Hi all,

I'm looking for a script to do the following:

I want to have a div, with content defined externally, show only a portion of it (with overflows=hidden) until the visitor rolls over the actual div -- then it drops down the rest of it in an overlay way that won't interrupt or shift the page.

In other words...

The user will see this:
____________________
| xxxx 1 xxxxxxxxxxxxx|
| xxxx 2 xxxxxxxxxxxxx |
|_____3_____________|

Until the user rolls the mouse over the div, and then it will expand downwards to show the rest of the content:
____________________
| xxxx 1 xxxxxxxxxxxxx|
|xxxx 2 xxxxxxxxxxxxx |
| xxxx3 xxxxxxxxxxxxx|
| xxxx4 xxxxxxxxxxxxx |
| xxxx 5 xxxxxxxxxxxxx |
|_____6_____________|

Does anyone know of a script that does something like this or can point me in the right direction?

Thanks a bunch!

I'm just going to throw out a couple of ideas/thoughts off the top of my head:

Using the overflow=hidden sounds like a good idea.

I'm thinking that you could use CSS absolute positioning to place the full DIV directly over the partial DIV. the z-index works well for overlaying things. You could determine the absolute-position values that the full DIV will be positioned to using javascript. Using the javascript onmouseover event, you could show/hide the overlay DIV.

I hope I am making myself clear.

I'll try to come up with some code as soon as I can find the time.

Moatist