jQuery: Slide Left to Right

**cancer10** · 02-02-2009, 05:41 PM

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

**Snookerman** · 02-02-2009, 05:53 PM

You can use animate for that:
http://docs.jquery.com/Effects/animate

Good luck!

**cancer10** · 02-03-2009, 04:16 AM

But how do I set the direction?

**Nile** · 02-03-2009, 04:19 AM

Just a tip, I've never seen $().ready(function(){, and don't think many people use it.

One of the following is better (in my opinion):

Shorty:

Code:

$(function(){


});

Tally:

Code:

$(document).ready(function(){

});

**jscheuer1** · 02-03-2009, 06:52 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<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: w, 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>

</head>
<body>
<input name="" type="button" value="Click me" id="clicky">
<div id="slide">
<h1><span>Hello World!</span></h1>
</div>

</body>
</html>

**cancer10** · 02-03-2009, 05:01 PM

That works fine.

Thanx

**Xaliber** · 10-15-2009, 07:33 PM

Sorry to bump such old topic; but is it possible to integrate this with jQuery cookies? So it could be toggled with cookies. Thanks!

**jscheuer1** · 10-16-2009, 04:43 AM

Anything that can be done with javascript/jQuery can be setup to respond to a cookie. The jQuery library itself has no cookies though that I'm aware of, but there are probably one or more units available for cookies written in jQuery. However, for most cookie operations, this:

http://www.dynamicdrive.com/forums/blog.php?b=32

is all you will need.

Without knowing exactly what you want the cookie to keep track of or how exactly you want the code to respond to whatever values you set in the cookie, I cannot be more specific.

One caveat with cookies though, they can be turned off and/or cleared in the user's browser, so nothing too important should be setup to depend upon them.

**Xaliber** · 10-16-2009, 04:13 PM

Ah, I apologize for not mentioning what I wanted. What I meant was to keep the collapsed/expanded state with cookies.

For example, if you collapsed the things to the left, it would stay collapsed even if another page were loaded. And if it is expanded to the right, it would stay expanded.

Perhaps it is caused by my lack of knowledge in jQuery, but apparently I do not know what to do with the blog post you have given to integrate that with this... so, I will be grateful for any help offered. Thanks!

**jscheuer1** · 10-16-2009, 11:48 PM

Something like so:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<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">
document.write('<style type="text/css">.slideHide {visibility: hidden;}<\/style>');
jQuery(function($){
 var s = $('#slide'), w = $(s.find('span')[0]).width(), cookie = {
   set: function(n, v, d){ // cookie.set takes (name, value, optional_persist_days) - defaults to session if no days specified
     if(d){var dt = new Date(); 
       dt.setDate(dt.getDate() + d);
       d = '; expires=' + dt.toGMTString();}
   document.cookie = n + '=' + escape(v) + (d || '') + '; path=/';
   },
   get: function(n){ // cookie.get takes (name)
   var c = document.cookie.match('(^|;)\x20*' + n + '=([^;]*)');
   return c? unescape(c[2]) : null;
   },
   kill: function(n){ // cookie.kill takes (name)
   cookie.set(n, '', -1);
   }
 };
 s.css({width: w, overflow: 'hidden', whiteSpace: 'nowrap'});
 $('#slideContainer').css({minWidth: w, height: s.height()});
 $('#clicky').toggle(function(){
  s.stop(true).animate({width: 0}, {duration: 'slow', queue: false, complete: function(){s.hide();}});
  cookie.set('slider', 'in');
 }, function(){
  s.stop().animate({width: w}, {duration: 'slow', queue: false});
  cookie.kill('slider');
 });
 if(cookie.get('slider') === 'in'){
  s.css({width: 0, display: 'none'});
  $('#clicky').click();
 }
 s.removeClass('slideHide');
});

</script>

</head>
<body>
<input name="" type="button" value="Click me" id="clicky">
<div id="slideContainer">
<div id="slide" class="slideHide">
<h1><span>Hello World!</span></h1>
</div>
</div>

</body>
</html>

Thread: jQuery: Slide Left to Right

Thread Tools

Search Thread

jQuery: Slide Left to Right

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions