?
Solved

use jquery to add an acrive class

Posted on 2012-09-18
5
Medium Priority
?
306 Views
Last Modified: 2012-09-18
I am trying to add an active class to the 1,2,3 buttons on this slider
http://gromit.utopia.co.nz/~safeware/newsslider/index.html

IE, if slider 1 is showing then class="active" is added to the Number 1 button etc..
Can anyone assist?
Cheers,
N
0
Comment
Question by:Neil_Bradley
  • 3
  • 2
5 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 38411604
add the following at line 90 (just after next_excerpt.addClass('selected');)  :

var n = $("#gallery li").index($("#gallery li.selected"));
$("#buttons").next("div").find("a.active").removeClass("active");
//setTimeout('$("#buttons").next("div").find("a:eq(" + n + ")").addClass("active")', 800);
$("#buttons").next("div").find("a:eq(" + n + ")").addClass("active");

Open in new window

0
 
LVL 5

Author Closing Comment

by:Neil_Bradley
ID: 38411635
You made that look too easy!
Brilliant solution and appreciate the quick response.
Cheers,
Neil
0
 
LVL 5

Author Comment

by:Neil_Bradley
ID: 38411751
Just a quick follow up.
Playing with the code a little and I noticed that when div id="buttons" is wrap in another div the script stops working..
http://gromit.utopia.co.nz/~safeware/newsslider/index.html
Any way to specifically target the #id=buttons?
Cheers,
Neil
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38411766
set an ID for the div where you've the LI, for example : divID <div id="divID">
So instead : $("#buttons").next("div")
use : $("#divID")
0
 
LVL 5

Author Comment

by:Neil_Bradley
ID: 38411786
Cheers, that got it.
I am going to open up another question regarding this slider (specifically the active function) as I am keen to go a step further.
Look forward to your participation..
Neil
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month8 days, 22 hours left to enroll

621 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