[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 441
  • Last Modified:

Drupal JQuery CSS Issue

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
wardjame
Asked:
wardjame
  • 5
  • 3
  • 3
1 Solution
 
ZadoCommented:
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
 
wardjameAuthor Commented:
@Zado:  That does not seem to have made any difference.
0
 
blueghoztCommented:
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
Independent Software Vendors: 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!

 
wardjameAuthor Commented:
@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
 
ZadoCommented:
Please grant the points and close the question, thanks :-)
0
 
blueghoztCommented:
@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
 
wardjameAuthor Commented:
@zado you want me to grant points for solutions that did not work?
0
 
ZadoCommented:
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
 
wardjameAuthor Commented:
@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
 
blueghoztCommented:
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
 
wardjameAuthor Commented:
Thanks for the help!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 5
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now