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?
 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.