Comments on: How to make a Slide and Hide with Yahoo YUI http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/ insert witty code here Wed, 17 Aug 2011 14:50:54 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Prefabrik http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-8567 Prefabrik Thu, 11 Nov 2010 08:27:10 +0000 http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-8567 Useful work thanks for shaing. Useful work thanks for shaing.

]]> By: jc http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-8562 jc Sat, 06 Nov 2010 03:44:26 +0000 http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-8562 Sure there are quite a few ways to do this, depending on your JS skills. Basically, create a function that is bound to the onclick event, and inside that function you must determine if the DIV is already hidden or shown, then take the action to show or hide based on that. Sure there are quite a few ways to do this, depending on your JS skills. Basically, create a function that is bound to the onclick event, and inside that function you must determine if the DIV is already hidden or shown, then take the action to show or hide based on that.

]]> By: Deon http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-8560 Deon Mon, 25 Oct 2010 18:57:56 +0000 http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-8560 Hi JC, Just came across this script and exactly what I was looking for. One question..is there a way to have the same id show and hide the div when clicked instead of 2 separate links/divs? Thanks. Hi JC,

Just came across this script and exactly what I was looking for. One question..is there a way to have the same id show and hide the div when clicked instead of 2 separate links/divs?

Thanks.

]]> By: james http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-8030 james Wed, 13 May 2009 15:58:15 +0000 http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-8030 <a href="#comment-8029" rel="nofollow">@james</a> please ignore my last comment - figured it out in the css. thanks @james

please ignore my last comment – figured it out in the css. thanks

]]> By: james http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-8029 james Wed, 13 May 2009 15:35:30 +0000 http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-8029 Hi, how do i change the direction of the animation so that it scrolls out from the left to the right? many thanks Hi,

how do i change the direction of the animation so that it scrolls out from the left to the right?

many thanks

]]> By: jc http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-256 jc Wed, 07 Feb 2007 22:42:44 +0000 http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-256 Firstly, the speed of the transition is found in the animation variable declaration: "var anim = new YAHOO.util.Anim('slider',{width:{to:0}},1,YAHOO.util.Easing.easeIn);" Where the 3rd value is 1, that is the time in seconds for the animation. This can be a decimal value aswell. There are other transition types aswell besides "YAHOO.util.Easing.easeIn". These are: * YAHOO.util.Easing.backBoth * YAHOO.util.Easing.backIn * YAHOO.util.Easing.backOut * YAHOO.util.Easing.bounceBoth * YAHOO.util.Easing.bounceIn * YAHOO.util.Easing.bounceOut * YAHOO.util.Easing.easeBoth * YAHOO.util.Easing.easeBothStrong * YAHOO.util.Easing.easeInStrong * YAHOO.util.Easing.easeNone * YAHOO.util.Easing.easeOut * YAHOO.util.Easing.easeOutStrong * YAHOO.util.Easing.elasticBoth * YAHOO.util.Easing.elasticIn * YAHOO.util.Easing.elasticOut Try them out to see the effect. As for the 2nd question, about sliding a div behind another: I prefer not to use this approach of 'hiding' one div behind another and applying a z-index higher for the static div. It can have unpredictable results between browsers. This is why I opt to 'squeeze' the div's height or width and allowing the contents of this div to overflow and hide itself. So in effect the div isn't moving, it's just shrinking. Firstly, the speed of the transition is found in the animation variable declaration:
“var anim = new YAHOO.util.Anim(‘slider’,{width:{to:0}},1,YAHOO.util.Easing.easeIn);”
Where the 3rd value is 1, that is the time in seconds for the animation. This can be a decimal value aswell. There are other transition types aswell besides “YAHOO.util.Easing.easeIn”. These are:

* YAHOO.util.Easing.backBoth
* YAHOO.util.Easing.backIn
* YAHOO.util.Easing.backOut
* YAHOO.util.Easing.bounceBoth
* YAHOO.util.Easing.bounceIn
* YAHOO.util.Easing.bounceOut
* YAHOO.util.Easing.easeBoth
* YAHOO.util.Easing.easeBothStrong
* YAHOO.util.Easing.easeInStrong
* YAHOO.util.Easing.easeNone
* YAHOO.util.Easing.easeOut
* YAHOO.util.Easing.easeOutStrong
* YAHOO.util.Easing.elasticBoth
* YAHOO.util.Easing.elasticIn
* YAHOO.util.Easing.elasticOut

Try them out to see the effect.

As for the 2nd question, about sliding a div behind another: I prefer not to use this approach of ‘hiding’ one div behind another and applying a z-index higher for the static div. It can have unpredictable results between browsers. This is why I opt to ‘squeeze’ the div’s height or width and allowing the contents of this div to overflow and hide itself. So in effect the div isn’t moving, it’s just shrinking.

]]> By: James http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-253 James Wed, 07 Feb 2007 16:38:07 +0000 http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-253 I am also curious as to how to set one sliding div behind another without interfering one or another when they open and close. I have tried many things including the z-index but to no avail. This is some great code. Thanx for posting it. James I am also curious as to how to set one sliding div behind another without interfering one or another when they open and close. I have tried many things including the z-index but to no avail.

This is some great code. Thanx for posting it.

James

]]> By: James http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-252 James Wed, 07 Feb 2007 16:34:30 +0000 http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/#comment-252 I am curious as to how to change the speed of the div opening and closing. Thanx I am curious as to how to change the speed of the div opening and closing.

Thanx

]]>