By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,855 Members | 2,003 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,855 IT Pros & Developers. It's quick & easy.

Floating div

P: n/a
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!
Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
Simon Wigzell wrote:
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
Jul 23 '05 #2

P: n/a
Simon,
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:

http://www.javascript-page.com/watermark.html

http://www.dynamicdrive.com/dynamicindex4/logo.htm

http://www.ricocheting.com/js/watermark.html

Hope this helps!

Jim
Jul 23 '05 #3

P: n/a
JimMenees wrote:
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
Jul 23 '05 #4

P: n/a
"Simon Wigzell" <si**********@shaw.ca> writes:
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>
---

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #5

P: n/a
Lasse Reichstein Nielsen wrote:
"Simon Wigzell" <si**********@shaw.ca> writes:
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:


There are workarounds for IE 5+ that work without JScript.
Conditional comments are an important part of it, though.

<http://www.fabrice-pascal.de/artikel/posfixedie6/>

<http://translate.google.com/translate?u=http://www.fabrice-pascal.de/artikel/posfixedie6/&langpair=de%7Cen&hl=en&ie=Unknown&oe=ISO-8859-1>
(Beware of the [awful] translation, it translates the stylesheets as well!)
X-Post & F'up2 comp.infosystems.www.authoring.stylesheets

PointedEars
Jul 23 '05 #6

P: n/a
Thanks to all who replied, my problem is resolved.
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.