birwin
asked on
Expand div on mouseover that expands over existing elements
Hopefully this is possible.
I have a div <div style='height: 200px; width: 230px; overflow-y: scroll; overflow-x: hidden; '> It contains a list of locations in a table.
I would like that div to expand to show the full contents on mouseover, but I'd like it to expand OVER the existing page elements below it, without changing their position. I do not want the effect to be modal. I do not want an accordion effect that will push the existing page elements down.
It there any JavaScript or jQuery way to do this?
Note that the original div has about twice the content displayed, so it would be about 400px high when displayed in full.
I have a div <div style='height: 200px; width: 230px; overflow-y: scroll; overflow-x: hidden; '> It contains a list of locations in a table.
I would like that div to expand to show the full contents on mouseover, but I'd like it to expand OVER the existing page elements below it, without changing their position. I do not want the effect to be modal. I do not want an accordion effect that will push the existing page elements down.
It there any JavaScript or jQuery way to do this?
Note that the original div has about twice the content displayed, so it would be about 400px high when displayed in full.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you. I liked the tranisition.
I did have to add a margin-top: 220px; to the lower div, but with that added the result is very cool.
I did have to add a margin-top: 220px; to the lower div, but with that added the result is very cool.
You can do this using relative / absolute css positioning
You'll need to give the expanding/collapsing div position:absolute and place it inside a position:relative parent and adjust positioning / margin / padding etc..
Check the example below
Open in new window