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.
LVL 6
birwinAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
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

0
Steve KrileCommented:
If you were looking for a bit smoother transition, jquery could get you there like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


	</head>
	<body>
		<div style="position:relative; float:left;clear:both;height:200px;">
			<div style='height: 200px; width: 230px; overflow: hidden;
			background:blue;color:#fff;position:absolute;' id="expander">
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
				some text<br/>
			</div>
			<div style="clear:both">&nbsp;</div>
		</div>

		<div style="height:300px;width:200px;border:solid 1px gray;clear:both;">Innocent content</div>
	</body>

		<script type="text/javascript">

		<!-- Java Script -->

			$(document).ready(function(){

				$("#expander").hover(
					//function on mouse over
					function(){
						$(this)
							.stop()
							.animate({height : "400px", width : "400px"}, 400);
					},

					//function on mouse out
					function(){
						$(this)
							.stop()
							.animate({"height" : "200px", width : "230px"}, 400);

					}
				);

			});

		</script>

</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
birwinAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.