SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Toggle between three divs

    I try to toggle between three divs. Which you can see here. The initial div (when coming on the page) is okay. But when you click on one of the other buttons you will see what happens. The entire div is jumping upwards! What am I doing wrong?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This has to do with your use of the jQuery .show and .hide methods. Here's what the jQuery documentation says about the implementation of .show:
    When a duration, a plain object, or a "complete" function is provided, .show() becomes an animation method. The .show() method animates the width, height, and opacity of the matched elements simultaneously.
    -- http://api.jquery.com/show/

    What you are doing is asking the <div> to shrink, then grow with each firing event; not the effect you wanted, I'm sure. You might want to try instead resetting the z-index of the <div> you want to show, and setting the other <div>s to a z-index of 1. Good luck!

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi moretea.

    I tried it with resetting the z-index but without any success. Could you please suggest another option or plugin?

    Thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you just want to toggle the visibiliy then use toggle instead of the slide animation.

    e.g.
    Code:
     // here we toggle show/hide the correct div at the right speed and using which easing effect
                		//$(toggleDiv).slideToggle(options.speed, options.easing, function () {
                    // this only fires once the animation is completed
                    // if(options.changeText==0){
                    //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
                    //}
    														
    															
                //});
    	
    $(toggleDiv).toggle();

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. I am affraid that I not realy understand what you mean? (Javascript is not my strongest point ) I have changed it as you can see here, but see what happens!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The JS should now look like this:

    Code:
    <script>
    $.fn.showHide = function (options) {
    		$('#slidingDiv_2').hide();
    		$('#slidingDiv_3').hide();
        //default vars for the plugin
        var defaults = {
            speed: 2000,
            easing: '',
            changeText: 0,
            showText: 'Show',
            hideText: 'Hide',
            slideDiv: '.slide-div'
        };
        var options = $.extend(defaults, options);
    
        return this.each(function () {
            $(this).click(function () {
                $(options.slideDiv).hide();
                // this var stores which button you've clicked
                var toggleClick = $(this),
                    toggleDiv = $(this).data('slide-id');
                  // here we toggle show/hide the correct div at the right speed and using which easing effect
                		//$(toggleDiv).slideToggle(options.speed, options.easing, function () {
                    // this only fires once the animation is completed
                    // if(options.changeText==0){
                    //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
                    //}
    																
    																
    
                //});
    												$(toggleDiv).toggle();
            });
    
        });
    
    };
    $('a').showHide({'slideDiv' : '.slide-div'});
    </script>
    I've left the original code commented out in case it wasn't what you wanted.

  7. #7
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. That works great indeed . One last question is it possible to fadein/fadeout the text.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could fade the whole thing in like this:

    Change the .toggle js to this instead:
    Code:
    $(toggleDiv).fadeToggle( "slow", "linear" );
    If you don't want the background to fade then move the background to the parent.

    e.g.
    Code:
    .slide-div {background:none}
    .fakereal{
     background: url("http://diem.nl/images/site/content.png") repeat ;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •