Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Drupal JQuery CSS Issue

Posted on 2010-11-30
11
Medium Priority
?
438 Views
Last Modified: 2012-05-10
I am having a problem with the css for the header slideshow at http://www.incanuspublicaffairs.com

The numbers should be highlighting for each slide the same as http://www.americanmedicalinnovation.org

Here is the code I am using.  For some reason the .activeSlide class never gets activated at least according to FireBug:
.views_slideshow_singleframe_pager .pager-item a:hover,
.views_slideshow_singleframe_pager .pager-item a:focus,
.views_slideshow_singleframe_pager .pager-item .activeSlide a:visited,
.views_slideshow_singleframe_pager .pager-item .activeSlide a {
  border: 1px solid #bbb;
  color: #1495d4;
}

Open in new window


The hover and focus are working as expected.

0
Comment
Question by:wardjame
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 3
11 Comments
 
LVL 8

Expert Comment

by:Zado
ID: 34241960
Try this:
.views_slideshow_singleframe_pager .pager-item a:hover,
.views_slideshow_singleframe_pager .pager-item a:focus,
.views_slideshow_singleframe_pager .pager-item .activeSlide a:visited,
.views_slideshow_singleframe_pager .pager-item .activeSlide a:active {
  border: 1px solid #bbb;
  color: #1495d4;
}

Open in new window

0
 

Author Comment

by:wardjame
ID: 34242064
@Zado:  That does not seem to have made any difference.
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 34249355
try this - you are suggesting with your CSS that activeSlide is below pager-item when it is on the same level
.views_slideshow_singleframe_pager .pager-item a:hover,
.views_slideshow_singleframe_pager .pager-item a:focus,
.views_slideshow_singleframe_pager .activeSlide a:visited,
.views_slideshow_singleframe_pager .activeSlide a {
  border: 1px solid #bbb;
  color: #1495d4;
}

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:wardjame
ID: 34251348
@blueghozt that also seems to have had no effect.  Is the problem maybe my earlier code for the slides which are not active?

.views_slideshow_singleframe_pager .pager-item a:link,
.views_slideshow_singleframe_pager .pager-item a:visited {
  background: #fff;
  border: 1px solid #ddd;
  color: #999;
  display: block;
  float: left;
  margin-right: 5px;
  padding: 5px 10px;
  text-decoration: none;
}

Open in new window


This is what firebug says is being used for both the active and inactive slides.
0
 
LVL 8

Expert Comment

by:Zado
ID: 34317460
Please grant the points and close the question, thanks :-)
0
 
LVL 6

Accepted Solution

by:
blueghozt earned 2000 total points
ID: 34317715
@wardjame

It could well be that have not include a:link in your activeSlide selectors! try that as you have been explicit about it in your earlier code as you just pointed out.
.views_slideshow_singleframe_pager .pager-item a:hover,
.views_slideshow_singleframe_pager .pager-item a:focus,
.views_slideshow_singleframe_pager .activeSlide a:visited,
.views_slideshow_singleframe_pager .activeSlide a:link,
.views_slideshow_singleframe_pager .activeSlide a {
  border: 1px solid #bbb;
  color: #1495d4;
}

Open in new window

0
 

Author Comment

by:wardjame
ID: 34319761
@zado you want me to grant points for solutions that did not work?
0
 
LVL 8

Expert Comment

by:Zado
ID: 34320040
I think you should tell us if here's no solution working for you, then experts would keep trying to resolve your problem. Some people leave their questions open forever, please respect someone's time and try to finish your questions if possible, if not, you can simply delete it. Thanks.

Regards
Zado
0
 

Author Comment

by:wardjame
ID: 34320157
@zado I have responded to every solution provided as soon as I have tested it, in your case within 10 minutes of your suggestion.  Too date they have had no effect.  I'm not sure how you don't see that in my previous messages.

Sincerely,
James
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 34320466
my last comment fixes it on a small test I did here at http://sandbox.nubz.com/test.html

simply adding the selector

.views_slideshow_singleframe_pager .activeSlide a:link

fixes it
0
 

Author Closing Comment

by:wardjame
ID: 34321502
Thanks for the help!
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question