471,350 Members | 1,586 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,350 software developers and data experts.

Creating a div that obscures content beneath it

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

Jul 23 '05 #1
4 1131
Ivo
"Jonathan Ellis" wrote
div.style.left = div.style.typ = '20px'


Here is my tip: change "typ" to "top".
HTH
--
Ivo

Jul 23 '05 #2
Jonathan Ellis wrote:
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

Jul 23 '05 #3
Ok, that was a good tip, but it still doesn't work. :)

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #4
Ivo
"Jonathan Ellis" wrote
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)
}


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.
--
Ivo
http://4umi.com/web/javascript/
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

13 posts views Thread by Headless | last post: by
7 posts views Thread by mercurius_1 | last post: by
12 posts views Thread by Mats Lycken | last post: by
15 posts views Thread by David Thielen | last post: by
1 post views Thread by rfox | last post: by
3 posts views Thread by ColorWorld | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.