Title: [Plugin: WP Carousel] Adding styles to active link
Last modified: August 20, 2016

---

# [Plugin: WP Carousel] Adding styles to active link

 *  [khleomix](https://wordpress.org/support/users/khleomix/)
 * (@khleomix)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-wp-carousel-adding-styles-to-active-link/)
 * Hi, I’m currently using the WP Carousel as a menu in a membership site. I need
   to add a border to the active link but for some reason its not showing. If I 
   use this script, it only highlights the first image in the menu:
 *     ```
       <script type="text/javascript">
       var $allimages=jQuery('.belt .panel')
       $allimages.eq(0).css({border:'3px solid #0078C9'}) //style for first image
       $allimages.click(function(){
       $allimages.css({border:none}) //style for unselected images
       jQuery(this).css({border:'3px solid #0078C9'}) //style for selected image
       })
       </script>
       ```
   
 * Any help would be greatly appreciated. Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)

 *  [sumolari](https://wordpress.org/support/users/sumolari/)
 * (@sumolari)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-wp-carousel-adding-styles-to-active-link/#post-2167546)
 * If I were you, I would try to do that with CSS instead of Javascript.
 * In any case, I think the problem is that some of the items may be “removed” from
   DOM and added when they are needed, so you have to use [.live()](http://api.jquery.com/live/)
   to add the effect to items that will be shown in a future.
 *  Thread Starter [khleomix](https://wordpress.org/support/users/khleomix/)
 * (@khleomix)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-wp-carousel-adding-styles-to-active-link/#post-2167548)
 * Thanks, the css is actually in place but the problem is its not adding the needed
   class to the active link. Can you show me how? Thank you so much!
 *  [sumolari](https://wordpress.org/support/users/sumolari/)
 * (@sumolari)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-wp-carousel-adding-styles-to-active-link/#post-2167550)
 *     ```
       .my_panel a.my_link { /* Normal link */ }
       .my_panel a.my_link:hover { /* The cursor is over the link */ }
       .my_panel a.my_link:active { /* The user has clicked the link */ }
       .my_panel a.my_link:visited { /* The user has visited this page before */ }
       ```
   
 * And it affects the DOM dynamically: when is added a new div to the DOM, if the
   div has the class _my\_panel_, links will be styled.
 *  Thread Starter [khleomix](https://wordpress.org/support/users/khleomix/)
 * (@khleomix)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-wp-carousel-adding-styles-to-active-link/#post-2167566)
 * the thing is, what I need to style is the actual active panel… can you show me
   how to dynamically add a class to the active panel? I just started using jquery
   and still need a lot of work on it. 🙂
 * this is my css, I’m using the default theme
 * _[CSS moderated as per the [Forum Rules](http://codex.wordpress.org/Forum_Welcome#Posting_Code).
   Please just post a link to your site.]_
 * The hover and everything else works, I just need to dynamically add the active
   class to the panel div. thanks
 *  [sumolari](https://wordpress.org/support/users/sumolari/)
 * (@sumolari)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-wp-carousel-adding-styles-to-active-link/#post-2167570)
 * Oh! I didn’t understand you at first. Ok, you can do that, but it’s a bit more
   complex.
 * If you use StepCarousel, there are 3 variables, called statusA, statusB and statusC
   that store the first panel shown, the last panel shown and the total number of
   panels.
 * You can see a demo [here](http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm)(
   demos 2 and 3).
 * If you use jCarousel, you should check [this demo](http://sorgalla.com/projects/jcarousel/examples/static_callbacks.html).
 *  Thread Starter [khleomix](https://wordpress.org/support/users/khleomix/)
 * (@khleomix)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-wp-carousel-adding-styles-to-active-link/#post-2167597)
 * thanks… one other thing, would it be possible to retain the position of the carousel
   when you click a link and not have it go back to the first slide but instead 
   stay on that particular panel? I’m using stepcarousel. Thank you so much for 
   the time
 *  [sumolari](https://wordpress.org/support/users/sumolari/)
 * (@sumolari)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-wp-carousel-adding-styles-to-active-link/#post-2167610)
 * You can use the method `stepcarousel.stepTo('galleryid', index)` to move to a
   specific panel. It is explained in [StepCarousel page](http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm).
 *  Thread Starter [khleomix](https://wordpress.org/support/users/khleomix/)
 * (@khleomix)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-wp-carousel-adding-styles-to-active-link/#post-2167619)
 * I may need more help again… 🙁 I was able to fix the position retention of the
   link in the panel by editing the stepcarousel.js file from:
 *     ```
       setCookie:function(name, value){
       		document.cookie = name+"="+value
       	},
       ```
   
 * to:
 *     ```
       setCookie:function(name, value){
       		document.cookie = name+"="+value+"; path=/";
       	},
       ```
   
 * but my main problem is still not working, I’m trying to use this:
 *     ```
       <script type="text/javascript">
       $('.panel a').click(function(){
       $('.belt').find('.selected').removeClass('selected');
       $(this).addClass("selected");
       });
       </script>
       ```
   
 * This does not seem to work though… thanks!
 *  Thread Starter [khleomix](https://wordpress.org/support/users/khleomix/)
 * (@khleomix)
 * [14 years, 4 months ago](https://wordpress.org/support/topic/plugin-wp-carousel-adding-styles-to-active-link/#post-2167778)
 * hi there… I need another round of your expertise… 🙂 I’m using jcarousel now 
   and need a way to get the position retention for jcarousel just like with stepcarousel?
   Like setting a cookie? Thanks!
 *  [sumolari](https://wordpress.org/support/users/sumolari/)
 * (@sumolari)
 * [14 years, 4 months ago](https://wordpress.org/support/topic/plugin-wp-carousel-adding-styles-to-active-link/#post-2167779)
 * Check out [this example](http://sorgalla.com/projects/jcarousel/examples/static_callbacks.html),
   I think that with callback functions you can do that and more!

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘[Plugin: WP Carousel] Adding styles to active link’ is closed to new 
replies.

 * 10 replies
 * 2 participants
 * Last reply from: [sumolari](https://wordpress.org/support/users/sumolari/)
 * Last activity: [14 years, 4 months ago](https://wordpress.org/support/topic/plugin-wp-carousel-adding-styles-to-active-link/#post-2167779)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics