Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    show hide toggle slide left - right - almost works

    Hey guys, dont suppose any of you kind folks could help me out with a bit of code could you please?

    Heres the code -
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    var s = $('#slide'), w = $(s.find('span')[0]).width();
    s.css({width: 0, overflow: 'hidden', whiteSpace: 'nowrap'});
    $('#clicky').toggle(function(){
    s.stop(true).animate({width: 0}, {duration: 'slow', queue: false, complete: function(){s.hide();}});
    }, function(){
    s.stop().animate({width: w}, {duration: 'slow', queue: false});
    });
    });
    </script>
    <style>

    #slide{
    float:left;
    width:200px;
    height:100px;
    background:yellow;
    margin-left:20px;
    }
    #next{
    float:left;
    width:200px;
    height:100px;
    background:red;
    margin-left:20px;
    }


    </style>
    </head>
    <body>
    <input name="" type="button" value="Navigation" id="clicky"><br> <br>

    <div id="slide">
    <h1><span>Hello World!</span></h1>
    </div> <div id="next"></div>

    </body>
    </html>

    Now my problem, when you first load the page and click the navigation button it dosent behave as it should. If you press the button a second time it behaves perfect and then for each button click it works as it should, its just the very first button click, it dosent seem to scroll across.

    Any ideas what i have done wrong in my code?

    Thanks

  • #2
    New Coder
    Join Date
    Mar 2010
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Nobody has any idea?

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,622
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Looks like you just need to switch the functions inside the toggle function.

  • #4
    New Coder
    Join Date
    Mar 2010
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I dont suppose you could show me or tell me what to swap ? Its all a bit confussing to me im sorry

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,622
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    From
    Code:
    $(function(){
    	var s = $('#slide'), w = $(s.find('span')[0]).width();
    	s.css({width: 0, overflow: 'hidden', whiteSpace: 'nowrap'});
    	$('#clicky').toggle(function(){
    			s.stop(true).animate({width: 0}, {duration: 'slow', queue: false, complete: function(){s.hide();}});
    		}, function(){
    			s.stop().animate({width: w}, {duration: 'slow', queue: false});
    	});
    });
    to:
    Code:
    $(function(){
    	var s = $('#slide'), w = $(s.find('span')[0]).width();
    	s.css({width: 0, overflow: 'hidden', whiteSpace: 'nowrap'});
    	$('#clicky').toggle(function(){
    			s.stop().animate({width: w}, {duration: 'slow', queue: false});
    		}, function(){
    			s.stop(true).animate({width: 0}, {duration: 'slow', queue: false, complete: function(){s.hide();}});
    	});
    });
    The toggle function has two arguments which represent the action to be taken (i. e. the states between which something will be toggled). Originally you had specified to collapse the element on the first click and expand on second. However, since your element is collapsed when it’s loaded already nothing would happen. So you just swap the arguments to expand the element on first click etc.

  • Users who have thanked VIPStephan for this post:

    davidhopkins (03-31-2010)

  • #6
    New Coder
    Join Date
    Mar 2010
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you ever so much, you helped a great deal ! (Y)

  • #7
    New Coder
    Join Date
    Mar 2010
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    As a development upon this, how easy would it be to display a different button for each function, for example, using a image as the button.

    Would i be able to have say a + when the div is not shown and when that is pressed and the div is shown change the button so that a - is shown ?

    I know how to skin a button to use an image, i jus need to be able to change the button on each function. Any ideas?

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,622
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    That’s very simple. You just change the value of the value attribute:
    Code:
    $(function(){
    	var s = $('#slide'), w = $(s.find('span')[0]).width();
    	s.css({width: 0, overflow: 'hidden', whiteSpace: 'nowrap'});
    	$('#clicky').attr('value','+ Navigation').toggle(function(){
    		s.stop().animate({width: w}, {duration: 'slow', queue: false});
    		$(this).attr('value','- Navigation');
    	}, function(){
    		s.stop(true).animate({width: 0}, {duration: 'slow', queue: false, complete: function(){s.hide();}});
    		$(this).attr('value','+ Navigation');
    	});
    });
    The first green function changes the default value that you have in the HTML (which is just “Navigation” without plus or minus) to add a plus in front. Then when first clicked, the value is changed to a minus and the word “Navigation” and on second click it’s changed back to a plus again.


  •  

    Posting Permissions

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