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/ A snapshot of my more professional life Fri, 21 Nov 2008 09:26:46 +0000 http://wordpress.org/?v=2.3.2 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

]]>