bringing divs to the front dynamically

[matiefert]

I have a page with content that consists of several boxes (divs). Since I'm trying for liquid design and got bored with a strict grid look, I'm scattering them on the page. But I want all the content of each box to be visible, even when visitors use a narrow browser window.

So, how to make the box they want to look at pop in front of any it might be behind? Something with hover (maybe???) or onmouseover.

It seems to me to be a simple problem, and I'd like to be able to solve it simply (not with 50 million lines of JavaScript and keeping track of incrementing z-indexes :-)

Making the zOrder be front sounds like it ought to work, but I haven't been able to get it to, and I've run out of ideas. Not even sure it's really implemented yet in browsers.

The (under-construction, ad-less) page is at: http://stores.tiefert.com/books/

As an example, the css for one of the boxes is:

.science { 
	position: absolute; 
	left: 30%;
	top: 22%; 
	background-color: #fff7ea; 
}

thanks!!

Marj

[matiefert]

This should probably be moved to the JavaScript forum, but I can't do that. (administrator??)

Anyway, the css is essentially the same as before, but I added some javascript to the index.html file:

[CODE]<script language="JavaScript">
i=0;
function upi() { i+=10; return i; }
function raiselit() { upi(); lit.style.zIndex+=i; }
function raisesci() { upi(); sci.style.zIndex+=i; }
function raisemy() { upi(); my.style.zIndex+=i; }
function raisetst() { upi(); tst.style.zIndex+=i; }
</script>
CODE]

and each div calls its function by (for example):

<div class="science" id="sci" onmouseOver="raisesci()">
<p>Science writing:</p>

But, either i is not global (as all the documentation I found says it ought to be) or it's not incrementing properly (or there's some duh! flaw in my logic...), since sometimes several swipes with the mouse are needed to bring a div to the top.

Anybody can help?

thanks!

Marj

PS - I got it!

A script that works in IE and Mozilla is:

	<script language="JavaScript">
		i=0;
		function raisediv(e) { i+=1; updiv=e; updiv.style.zIndex=i; }
	</script>

accompanied by this in the div tag:

onmouseOver="raisediv(this);"