Link to home
Start Free TrialLog in
Avatar of birwin
birwinFlag for Canada

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.
Avatar of remorina
remorina
Flag of Australia image

Hi birwin,
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <title>Div Expand test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    <style type="text/css">
        .container {width:800px;margin:0 auto;padding:10px;position:relative;border:solid 1px red;}
        .morecontent {border:solid 1px blue;margin-top:210px;}
        .autodiv {position:absolute;background:#fff;height: 200px; width: 230px; overflow-y: scroll; overflow-x: hidden;border:solid 1px green;}
    </style>
    <script type="text/javascript">
        function expanddiv(el, size) {
            el.style.height = size;
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="autodiv" onmouseover="expanddiv(this, 'auto')" onmouseout="expanddiv(this, '200px')">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula augue quis
            ipsum dignissim gravida. In ac lorem diam, at sodales leo. Nulla eu arcu et elit
            viverra viverra. Maecenas quam felis, accumsan at blandit nec, lacinia ut urna.
            Suspendisse nisi justo, luctus eu imperdiet sed, pretium eget quam. Integer quis
            odio mauris. Fusce scelerisque elit eu lacus convallis molestie. Aenean in orci
            viverra orci ultricies molestie in gravida magna. Cras eget nibh vitae odio interdum
            gravida quis id urna. Vivamus vitae orci tellus. Sed vestibulum, arcu ut congue
            dignissim, justo nisi adipiscing augue, id scelerisque ipsum justo et dui. Aenean
            ultricies massa id erat iaculis malesuada.
        </div>
        <div class="morecontent">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula augue quis
            ipsum dignissim gravida. In ac lorem diam, at sodales leo. Nulla eu arcu et elit
            viverra viverra. 
        </div>
    </div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Steve Krile
Steve Krile
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of birwin

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.