Floating div

[Simon Wigzell]

How do a create a floating div that will always stay in the same place
relative to the browser window as the user scrolls the main page? I guess an
adaptation of one of these floating menus that always stay in view would
work but I just need the few lines of code to keep it positioned a certain x
and y pix location from the window top left corner... Thanks!

 

[Thomas 'PointedEars' Lahn]

How do a create a floating div that will always stay in the same place
relative to the browser window as the user scrolls the main page?

CSS2's position:fixed and a proper workaround for non-compliant
browsers. This has nothing to do with J(ava)Script, ask in
comp.infosystems.www.authoring.stylesheets.


PointedEars

 

[Thomas 'PointedEars' Lahn]

This is called a 'watermark' script; there are several examples on the web.
Here's a few URL's with the explanation and info on this javascript/dhtml tool:
[...]

"Watermark scripts" have been utter nonsense since they have been conceived,
and eventually are utter nonsense since they are outdated. CSS2 provides
this feature much more reliable and performant.


PointedEars

 

[Lasse Reichstein Nielsen]

How do a create a floating div that will always stay in the same place
relative to the browser window as the user scrolls the main page? I guess an
adaptation of one of these floating menus that always stay in view would
work but I just need the few lines of code to keep it positioned a certain x
and y pix location from the window top left corner... Thanks!

Use CSS 2 position:fixed for browsers that support it (all modern
browsers), and use a fallback for older browsers (including all IE
versions). The fallback is based on detecting scrolling and
repositioning the element. I would usually only bother putting in a
fallback for IE 5+, using IE conditional comments:

---
<style type="text/css">
#myfixed {
position: fixed;
top: 100px;
left: 50px;
}
</style>
<!--[if IE]>
<style type="text/css">
#myfixed { position:absolute; }
</style>
<script type="text/javascript">
window.onscroll = function() {
var root = (document.compatMode == "CSS1Compat"?
document.documentElement: document.body);
var elem = document.all["myfixed"];
elem.style.left = root.scrollLeft + 50 + "px";
elem.style.top = root.scrollTop + 100 + "px";
};
</script>
<![endif]-->
....
<div id="myfixed" style="width:100px;height:100px;border:1px solid black;">
HERE<br>I<br>AM
</div>

 

[Simon Wigzell]

Thanks to all who replied, my problem is resolved.