PDA

View Full Version : 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:


<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 (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:


$(function(){


});

Tally:


$(document).ready(function(){

});

jscheuer1
02-03-2009, 06:52 AM
<!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:


<!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>

Xaliber
10-17-2009, 06:05 PM
Thank you! That works great.

But, if you don't mind... I'd like to ask for further assistance. There seems to be no problem for normal texts, but apparently I am having trouble when applied to my forum board. This is how the page would like with the script attached on (it's on the sidemenu):
http://xaliber.net/filez/misc/indexgot.html

And here is without the script (it is actually the exact same page; only the script is putted off):
http://bleachindonesia.com/forum/

There seems to be some problem with boxes...

If you don't mind, could you please offer the help? Thank you very much!

Dadel
10-15-2011, 08:30 AM
hi
I know that sounds stupid but wondering how I can perform this effect exactly the other way around?:confused: