WordPress.org

1. khleomix
   Member
   Posted 1 year ago #
   

   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!

2. sumolari
   Member
   Posted 1 year ago #
   

   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() to add the effect to items that will be shown in a future.

3. khleomix
   Member
   Posted 1 year ago #
   

   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!

4. sumolari
   Member
   Posted 1 year ago #
   

   .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.

5. khleomix
   Member
   Posted 1 year ago #
   

   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. 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

6. sumolari
   Member
   Posted 1 year ago #
   

   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 (demos 2 and 3).

   If you use jCarousel, you should check this demo.

7. khleomix
   Member
   Posted 1 year ago #
   

   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

8. sumolari
   Member
   Posted 1 year ago #
   

   You can use the method stepcarousel.stepTo('galleryid', index) to move to a specific panel. It is explained in StepCarousel page.

9. khleomix
   Member
   Posted 1 year ago #
   

   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!

10. khleomix
    Member
    Posted 1 year ago #
    

    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!

11. sumolari
    Member
    Posted 1 year ago #
    

    Check out this example, I think that with callback functions you can do that and more!

Topic Closed

This topic has been closed to new replies.