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 Thu, 24 Jun 2010 13:46:46 +0000 hourly 1 http://wordpress.org/?v=3.0 By: james http://blog.jc21.com/2007-01-19/how-to-make-a-slide-and-hide-with-yahoo-yui/comment-page-1/#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-page-1/#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-page-1/#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-page-1/#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-page-1/#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

]]>