Creating a div that obscures content beneath it

J

Jonathan Ellis

I'd be surprised if this isn't a FAQ; if it is, I must be searching on
the wrong keywords because I can find a lot of stuff about "how do I
make a div stick to the same area of the screen while the user scrolls
around" but what I want to do should be substantially simpler. I hope.

What I have so far works, but my new element just flows where it
normally would if it were at the end of the BODY and I'd like to be
able to get it to "float over" the rest of the page.

<html>
<head>
<title></title>
</head>

<body>
<script>
function test() {
var div = document.createElement('DIV')
div.style.position = 'absolute'
div.style.left = div.style.typ = '20px'
var h = document.createElement('H3')
h.appendChild(document.createTextNode('text'))
div.appendChild(h)
document.body.appendChild(div)
}
</script>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eu
neque.
Duis lacinia volutpat lacus. Sed rutrum, nulla ac nonummy venenatis,
orci metus adipiscing ipsum, volutpat bibendum sapien nunc a purus.

<p>
<a href=javascript:test()>click here</a>
</body>
</html>

-Jonathan
 
J

Jonathan Ellis

Jonathan said:
What I have so far works, but my new element just flows where it
normally would if it were at the end of the BODY and I'd like to be
able to get it to "float over" the rest of the page.

One of my friends got this working in mozilla, but IE6 doesn't like it:

function test() {
var div = document.createElement('DIV')
div.setAttribute("style","position:absolute; left:0px; top:0px;
width:600px; z-index:10000; background-color:#ff6600;");
var h = document.createElement('H3')
h.appendChild(document.createTextNode('text'))
div.appendChild(h)
document.body.appendChild(div)
}

Any suggestions?

-Jonathan
 
I

Ivo

One of my friends got this working in mozilla, but IE6 doesn't like it:

function test() {
var div = document.createElement('DIV')
div.setAttribute("style","position:absolute; left:0px; top:0px;
width:600px; z-index:10000; background-color:#ff6600;");
var h = document.createElement('H3')
h.appendChild(document.createTextNode('text'))
div.appendChild(h)
document.body.appendChild(div)
}

Don't use setAttribute, but apply the styles directly:

div.style.position="absolute";
div.style.left="0";
div.style.top="0";
div.style.width="600px";
div.style.zIndex="100";
div.style.backgroundColor="#ff6600";

and IE will display it in the topleft corner.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top