How to make a Slide and Hide with Yahoo YUI
Javascript transitions are becoming more and more popular with the Web 2.0 sites. We simply couldn’t use an Ajax powered site without some sort of visual notifications, and although animation is not absolutely neccessary the sites that do use it stand out from the crowd.
There are quite a few transitions covered in the Yahoo Design Pattern Library but I’m going to show you my way of Sliding and Hiding a div. Unlike the design pattern library, I’m not going to tell you why the effect should be used, but exactly how to create it.
Before we get started, you might want to look at the finished product, so you know what the goal of this is.
Overview of the process
When I wanted tp make this transition for a page of mine, as a programmer I thought about how the div would dissapear:
- The div would maintain size and hide beneath another div with a higher z-index or
- The div would decrease in size, height or width depending on the orientation of the transition.
Although hiding the slider div beneath another div might have worked, what would happen if the slider moved off the visible screen area? You’d get those nasty scrollbars in the browser window…
So the second option sounded better. But (yes so many buts) what happens to the content of the div when the height/width shrinks? Yes, it moves with it. The solution for that is a small CSS property: overflow:hidden;
That’s a good start, but it’s still nto perfect. For example, when shrinking the width of a div, the content (in the case of text) would wrap as much as possible before it will overflow. It looks tacky believe me.
I’ve found that you can wrap the sliding div with another div, and set the width of the inner div, while setting overflow:hidden on the outer div. If you didn’t quite catch that, have a look at this diagram:
The outer div compresses to the dimensions specified by the transition, while the inner div overflows because the width is set.
Have a look at the source of the example for CSS and Javascript.
Comments