SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    739
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery: Slide Left to Right

    Hi,

    I know how to Slide a DIV from top to bottom and vice-versa. The following code shows how to do it:

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script>
    $().ready(function(){
    				   $("#clicky").click(function(){
    					$("#slide").slideToggle("slow");						   
    											   });
    				   
    				   });
    </script>
    
    <input name="" type="button" value="Click me" id="clicky"/>
    <div id="slide">
    <h1>Hello World!</h1>
    </div>

    Question: Is there anyway I can slide a DIV from left to right and vice-versa?

    Please help.


    Thanx in advance

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    John Resig, the author of jQuery, says the following:

    Do you realize that you can do this now? There's already a .animate()
    function, you don't need any of the 1.2 functionality for that.

    Code:
    SlideDown: .animate({ height: 'show' }); 
    SlideUp: .animate({ height: 'hide }); 
    SlideRight: .animate({ width: 'show' }); 
    SlideLeft: .animate({ width: 'hide' });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    739
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    We cannot have a toggle kinda thing?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    There isn't one built in, but it's rather easy to create a toggle function.

    Have a look at the interface fx slide code from the demo page from the interface elements plugin for jQuery

    There they use the following:

    Code javascript:
    if ( type == 'toggle') {
    	type = z.el.css('display') == 'none' ? 'in' : 'out';
    }

    So you could do something very similar, just replacing in and out with the appropriate function name

    Code javascript:
    function slideToggle(el) {
        var type = (el.css('display') == 'none') ? slideRight : slideLeft;
        type(el);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    739
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Thanx for your effort. Can you please post the whole code for me?


    Thanx in advance

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Here is a sample implementation:

    Code html4strict:
    <p><a class="toggleWidth" href="#">Toggle width</a></p> 
    <div id="homeTown"> 
        My home town
        <img src="http://tbn2.google.com/images?q=tbn:XuAWyjom5m2VYM:http://www.dementad.com/Reception/images/christchurch.jpg"> 
        <a href="http://www.dementad.com/Reception/images/christchurch.jpg">Christchurch</a> 
    </div>

    Code javascript:
    jQuery('.toggleWidth').click(function () {
    	jQuery('#homeTown').slideToggleWidth();
    });
     
    jQuery.fn.extend({
      slideRight: function() {
        return this.each(function() {
          jQuery(this).animate({width: 'show'});
        });
      },
      slideLeft: function() {
        return this.each(function() {
          jQuery(this).animate({width: 'hide'});
        });
      },
      slideToggleWidth: function() {
        return this.each(function() {
          var el = jQuery(this);
          if (el.css('display') == 'none') {
            el.slideRight();
          } else {
            el.slideLeft();
          }
        });
      }
    });
    Last edited by paul_wilkins; Feb 5, 2009 at 17:57.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul - how come you're using the jQuery keyword? Why not enclose the whole block in a function scope, feed jQuery and reference it using $ inside of the function? Or is it just a preference, in that you don't think $ is semantic, etc?
    Cross browser css bugs

    Dan Schulz you will be missed

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Yes, it could be enclosed in a function scope, such as this:

    Code javascript:
    jQuery(function () {
        ...
    });

    But that wasn't the purpose of the code snippet that was provided.
    The code would be used with other jQuery code, so in much the same way that we tend not to show html and head tags when showing html snippets, it doesn't seem appropriate to show all of the complete details when showing jQuery snippets.

    As to why jQuery is being used instead of $, there was a recent discussion in another thread about the use of $ and how it can be confusing with the wide range of other libraries that also use it.

    So, in order to aid in a lessoning of confusion, and to make things easier should the need to make it cross-compatable with other libraries occur, I'm using the same techniques here that plugin authors use.

    Think of it this way, $() is the lazy way which makes several assumptions that can and will quite easily break its own functionality. jQuery() ensures that things work well with little chance for things to go wrong.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast software_eng's Avatar
    Join Date
    Oct 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great code snippet, i am now trying to use it to create a sort of menu that goes out to the right when mouseover is triggered, and it should close on mouseout of the whole area.

    This is my code snippet, where container is the whole area including the menu, so when the mouse leaves "container" the menu should close.

    It doesnt work however; the "menu" closes as soon as the mouse leaves the "toggle width" link....which of course means the user have no chance at clicking "link1" and "link2"

    what am i doing wrong?

    Code:
    <div id="container" style="background-color: #ffff00;">
    
    <p><a class="toggleWidth" href="#">Toggle width</a></p>
    
    <div id="homeTown" style="display: none;">
        <nobr>
        some menu sort of
        <a href="asdasd">link 1</a> -
        <a href="asdasd">link 2</a>
        </nobr>
    </div>
    
    </div>
    
    <script>
        jQuery('.toggleWidth').mouseover(function () {
        jQuery('#homeTown').slideRight();
    });
    
        jQuery('#container').mouseout(function () {
        jQuery('#homeTown').slideLeft();
    });
    
    jQuery.fn.extend({
      slideRight: function() {
        return this.each(function() {
          jQuery(this).animate({width: 'show'});
        });
      },
      slideLeft: function() {
        return this.each(function() {
          jQuery(this).animate({width: 'hide'});
        });
      },
      slideToggleWidth: function() {
        return this.each(function() {
          var el = jQuery(this);
          if (el.css('display') == 'none') {
            el.slideRight();
          } else {
            el.slideLeft();
          }
        });
      }
    });
        </script>

  10. #10
    SitePoint Enthusiast software_eng's Avatar
    Join Date
    Oct 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    found it, if i use mouseleave instead of mouseout it works.


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
  •