Solved

Drupal JQuery CSS Issue

Posted on 2010-11-30
11
393 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
  • 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
 

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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 6

Accepted Solution

by:
blueghozt earned 500 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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Make bootstrap pagination vertical 3 40
Adding a menu section 13 35
Basic CSS issues 6 20
razorCMS: Change Menu Font 4 24
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now