WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: WP Carousel] Adding styles to active link (11 posts)

  1. khleomix
    Member
    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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.

About this Topic