Javascript\CSS inline floating div problem

**fileserverdirect** · 03-11-2008, 01:09 AM

Hi guys,
I was recently helping someone out on the forums, when I modified one of my ideas to work for my website. The only problem is that I need the 1x1 semi-transparent png to be ontop of the page's content, but below the actual popup div. Also, is there any way for the div to be auto centered in the document?

Code:

<html>
<head>
<style>
div#container {
background: #CCCCCC;
border: 1px solid black;
position:absolute;
left:-9999px;
top:-9999px;
width: 200px;
z-index: 2;
}
#body
{
z-index: 0;
}
#top
{
z-index: 1;
}
</style>
<script>
function init(x)
{
if(x=="show"){
document.getElementById("container").style.left="200px"
document.getElementById("container").style.top="200px"
document.getElementById("top").style.background="url('t.png') repeat"
}
if(x=="hide"){
document.getElementById("container").style.left="-9999px"
document.getElementById("container").style.top="-9999px"
document.getElementById("top").style.background="none"
}
}
</script>
<body id="top">
<div id="body">
<div id="container">
<p>various text goes here</p>
<input type="button" onClick="init('hide');" value="Hide Text">
</div>
<input type="button" onClick="init('show');" value="Show Text">
Some random Text
</div>
</body>
</html>

THANKS.
The Image could'nt be uploaded...

**fileserverdirect** · 03-12-2008, 07:56 PM

Does Anybody know how to do this?

**Bob90** · 03-13-2008, 04:32 PM

See here
http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Do you really need to add a transparent .png? Surely you can do what you want with CSS.

I thought divs with no background were transparent.

Have you tried modifying your code to only alter the class of the div instead of its style attributes?

**fileserverdirect** · 03-14-2008, 07:33 PM

Thanks for the link.
The effect that I am trying to get is a "lightbox-like" effect where the "popup" is on the topmost section, and then underneath it a semi-transpaernt overlay, so opacity 50%, and then the rest of the body underneath it all.

**zaphod42** · 03-15-2008, 01:55 AM

I center elements in the page by adding a "wrapper" div around my viewable content, then you can simply use the offsetTop and offsetLeft values to position according to the wrappers offsetWidth and offsetHeight. as far as having one thing on top of another, check out quirksmode.org's javascript CSS compatability reference under "zIndex", the higher the number, the close it is to the front.

**fileserverdirect** · 03-15-2008, 02:52 PM

I am using z-index already, but I do not know how to give it a "lightbox-like" effect.
Do you know how to do this?

**zaphod42** · 03-15-2008, 05:07 PM

the only "lightbox's" I've used where light tables...is the div supposed to illuminate the png or visa versa? first I wouldn't try to turn the body background on and off, I would set a second div with the png as the background, also instead of starting container at -9999 -9999 why dont you just try...

Code:

if(x=="show"){
document.getElementById("container").style.display="block"
document.getElementById("wrapper").style.backgroundImage="t.png"
}
if(x=="hide"){
document.getElementById("container").style.display="hidden"
document.getElementById("wrapper").style.backgroundImage="none"
}

Thread: Javascript\CSS inline floating div problem

Thread Tools

Search Thread

Javascript\CSS inline floating div problem

try

Bookmarks

Bookmarks

Posting Permissions