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]

Re: Floating div

Simon Wigzell wrote:
[color=blue]
> 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?[/color]

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


PointedEars

[JimMenees]

Re: Floating div

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

[Thomas 'PointedEars' Lahn]

Re: Floating div

JimMenees wrote:
[color=blue]
> 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:
> [...][/color]

"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]

Re: Floating div

"Simon Wigzell" <simonwigzell@s haw.ca> writes:
[color=blue]
> 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![/color]

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:absolu te; }
</style>
<script type="text/javascript">
window.onscroll = function() {
var root = (document.compa tMode == "CSS1Compat "?
document.docume ntElement: 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:10 0px;height:100p x;border:1px solid black;">
HERE<br>I<br>AM
</div>
---

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Thomas 'PointedEars' Lahn]

Re: Floating div

Lasse Reichstein Nielsen wrote:
[color=blue]
> "Simon Wigzell" <simonwigzell@s haw.ca> writes:[color=green]
>> 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![/color]
>
> 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:[/color]

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.googl e.com/translate?u=htt p://www.fabrice-pascal.de/artikel/posfixedie6/&langpair=de%7C en&hl=en&ie=Unk nown&oe=ISO-8859-1>
(Beware of the [awful] translation, it translates the stylesheets as well!)


X-Post & F'up2 comp.infosystem s.www.authoring.stylesheets

PointedEars

[Simon Wigzell]

Re: Floating div

Thanks to all who replied, my problem is resolved.