dhtml/floating element question..

[Frances Del Rio]

http://www.francesdelrio.com/fixed_div.html

I picked up this neat script from www.dynamicdrive.com that does
something I had always wanted to do, namely put a div at a certain
distance from bottom of pg (for name-&-add-of-co footer..) and have it
stay there even if user scrolls up or down.. but: it gets screwed up
if user resizes window -- unless they reload after resizing.. I know
possibility of user resizing window is remote, but wanted to see anyway
if there was a way to make it work even if user resizes window.. also,
is there a way to make this script work in Netscape 6+?? thank you..

Frances Del Rio

 

[Thomas 'PointedEars' Lahn]

http://www.francesdelrio.com/fixed_div.html

I picked up this neat script from www.dynamicdrive.com

Eeek. What part exactly do you consider "neat"?

that does something I had always wanted to do, namely put a div at a
certain distance from bottom of pg (for name-&-add-of-co footer..) and
have it stay there even if user scrolls up or down.. but: it gets
screwed up if user resizes window -- unless they reload after resizing..

Which should tell you that it is flawed, if not junk.

I know possibility of user resizing window is remote, but wanted to see
anyway if there was a way to make it work even if user resizes window..

Use CSS and position:fixed. As it does not work
with IE, you require a workaround for this browser:
<http://www.fabrice-pascal.de/artikel/posfixedie6/>
(I don't have a link to an English explanation,
[1] Google is your friend [psf 6.1].)

also, is there a way to make this script work in Netscape 6+??

Yes, do a complete rewrite to use standards compliant DOM methods.
document.all previded by IE and Opera only.

<http://www.w3.org/DOM/DOMTR>

And, of course, [1].


PointedEars

 

[Frances Del Rio]

Eeek. What part exactly do you consider "neat"?

touchée... the effect is neat, I meant.. I did feel the script was a
bit "verbose" but since I don't know how to do this just made do w/it..

Which should tell you that it is flawed, if not junk.

oops.. CSS position:fixed sounds like a great idea, but: how do I
make div appear AT A CERTAIN DISTANCE FROM THE BOTTOM OF WINDOW,
REGARDLESS OF HEIGHT OF CLIENTHEIGHT..

in his script the guy has:

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")?

document.documentElement : document.body
}

I have no idea what this does, but have a feeling this is the key here,
because further down he has:

var w=ietruebody().clientWidth-195
var h=50

which on a hunch I changed to

var w=100
var h=ietruebody().clientHeight-60

and this worked in the sense it fixed my div where I wanted it..
anyway, key here is I need this div (which is nothing but plain HTML
text..) to show up about 60 px off the bottom of the screen, regardless
of what clientHeight happens to be... and then when user scrolls for it
to stay fixed.. is this possible?? in IE AND N??

Use CSS and position:fixed.

this is not working.. here is code I have now:

#footer {position:fixed; top:200px; left:150px; z-index:1}

(I actually want it a lot further down, but used this value just to
test..) if position:fixed does not work w/z-index I'm in trouble, since
I HAVE to have z-index, since everything on page is sitting on a bg img
positioned w/z-index:0...

I searched google for "CSS position:fixed" and among other things I
found this page, http://devnull.tagsoup.com/fixed/
where I found the weirdest code: for that img on top right that stays
fixed when you scroll check out the code I found:

<div class="overhead">
<h1><a href="http://tagsoup.com/"><imgalt="Tagsoup homepage"
src="/_img/logo.png"></a> <code>position:fixed</code>fixed for
IE/win</h1></div>

what on earth is this?? <code>...</code>.. who has ever seen such a
thing? of course when I tried to implement it in my own situation it
wouldn't work.. code on this page is full of really weird stuff, like
for example,

<divclass="foobar"><code><ahref="/">devnull</a>['<a href="/#toc">
<abbrtitle="Table of contents">toc</abbr></a>']</code></div>

ok, thank you very much for yr help.. Frances

 

[Frances Del Rio]

Hello PointedEars.. actually I just found a very simple solution:
http://www.francesdelrio.com/fixed_div.html

#footer {position:fixed; bottom:20px; left:150px; border:2px}

and that's it.. it works beautifully.. and it even works if user
resizes window... just that one little line of code.. it's almost too
good to be true.. and it is!! it doesn't work in IE!! it only works
in Netscape.. why is this??? and you know, I found this at the
"official" CSS specs, at
http://www.w3.org/TR/REC-CSS2/visuren.html#fixed-positioning..
(nothing in there about how this only works in Netscape..) I know this
has become a CSS question at this point, but since you responded to me
before w/a CSS solution thought I'd run this one by you, in case you can
shed some light.. (and I did post a query at the CSS ng...) ok.. thank
you again.. Frances

PS: are your ears really pointed???

Frances Del Rio wrote:

http://www.francesdelrio.com/fixed_div.html

I picked up this neat script from www.dynamicdrive.com

Eeek. What part exactly do you consider "neat"?

that does something I had always wanted to do, namely put a div at a
certain distance from bottom of pg (for name-&-add-of-co footer..) and
have it stay there even if user scrolls up or down.. but: it gets
screwed up if user resizes window -- unless they reload after resizing..

Which should tell you that it is flawed, if not junk.

I know possibility of user resizing window is remote, but wanted to see
anyway if there was a way to make it work even if user resizes window..

Use CSS and position:fixed. As it does not work
with IE, you require a workaround for this browser:
<http://www.fabrice-pascal.de/artikel/posfixedie6/>
(I don't have a link to an English explanation,
[1] Google is your friend [psf 6.1].)

also, is there a way to make this script work in Netscape 6+??

Yes, do a complete rewrite to use standards compliant DOM methods.
document.all previded by IE and Opera only.

<http://www.w3.org/DOM/DOMTR>

And, of course, [1].


PointedEars

 

[Michael Winter]

[snip]

<div class="overhead">
<h1><a href="http://tagsoup.com/"><imgalt="Tagsoup homepage"
src="/_img/logo.png"></a> <code>position:fixed</code>fixed for
IE/win</h1></div>

what on earth is this?? <code>...</code>..

It's simply another structural element. It marks the content as program
source code. This is usually rendered in a fixed-width font like Courier.
There are many other, similar mark-up elements. See section 9.2 of the
HTML Specification - Structured text.

who has ever seen such a thing?

Me. Several times.

of course when I tried to implement it in my own situation it wouldn't
work.. code on this page is full of really weird stuff, like for
example,

<divclass="foobar"><code><ahref="/">devnull</a>['<a href="/#toc">
<abbrtitle="Table of contents">toc</abbr></a>']</code></div>

The only "wierd" thing about this is that you've removed some critical
whitespace that merges element and attribute names.

Mike

 

[Michael Winter]

[Why doesn't position: fixed work?]

The simple reason, as I'm sure you'll be told in CIWAS, is that IE is poor
excuse for a browser. Microsoft simply haven't implemented it. Other
decent (and recent) browsers, however, have.

I'll leave it to the folks at CIWAS to provide alternate solutions.

PS: are [Lahn's] ears really pointed???

I've wondered that, too. Or at least where the nickname comes from. Star
Trek/Fantasy literature fan?

[Snipped top-post]

Mike


Please don't top-post.

 

[Thomas 'PointedEars' Lahn]

[...] actually I just found a very simple solution [...]

#footer {position:fixed; bottom:20px; left:150px; border:2px}

Use CSS and position:fixed. [...]

and that's it.. it works beautifully.. [...]
it doesn't work in IE!! it only works in Netscape.. why is this???

Because IE is junk and only few recognize it.
That's why I recommended the workaround for IE:

[...] As it does not work with IE, you require
a workaround for this browser:
<http://www.fabrice-pascal.de/artikel/posfixedie6/>
(I don't have a link to an English explanation,
[1] Google is your friend [psf 6.1].)

(You may want to read replies more thorougly.)

However, I do not know if it is applicable to fixed bottom position as well.

[...] thank you again..

You're welcome.

PS: are your ears really pointed???

Yes, indeed

[Top post]

<http://www.jibbering.com/faq/faq_notes/pots1.html>


PointedEars

 

[Thomas 'PointedEars' Lahn]

[...] actually I just found a very simple solution [...]

#footer {position:fixed; bottom:20px; left:150px; border:2px}

Use CSS and position:fixed. [...]

and that's it.. it works beautifully.. [...]
it doesn't work in IE!! it only works in Netscape..

It works in all Mozilla/5.0 which includes Netscape _6+_.

why is this???

Because IE is junk and only few recognize it.
That's why I recommended the workaround for IE:

[...] As it does not work with IE, you require
a workaround for this browser:
<http://www.fabrice-pascal.de/artikel/posfixedie6/>
(I don't have a link to an English explanation,
[1] Google is your friend [psf 6.1].)

(You may want to read replies more thoroughly.)

However, I do not know if it is applicable to fixed bottom position as well.

[...] thank you again..

You're welcome.

PS: are your ears really pointed???

Yes, indeed

[Top post]

<http://www.jibbering.com/faq/faq_notes/pots1.html>


PointedEars

 

[Lasse Reichstein Nielsen]

oops.. CSS position:fixed sounds like a great idea, but: how do I
make div appear AT A CERTAIN DISTANCE FROM THE BOTTOM OF WINDOW,
REGARDLESS OF HEIGHT OF CLIENTHEIGHT..

With CSS 2:

#footer {
position: fixed;
bottom: 1em; /* certain distance = 1em */
left:0px;
right:0px;
}

in his script the guy has:

function ietruebody(){

Not a great name to inspire confidence that it works in anything
except IE.

return (document.compatMode && document.compatMode!="BackCompat")?

That should be
.compatMode=="CSS1Compat"
Other browsers than IE agrees on the value of compatMode in standards
mode ("CSS1Compat"), but not in quirks mode. E.g. Opera (and IIRC,
earlier versions of Mozilla_ uses "QuirksMode" when not in standards
mode.

document.documentElement : document.body
}

I have no idea what this does,

It finds the root element of the document model. In standards mode, it

var w=100
var h=ietruebody().clientHeight-60

and this worked in the sense it fixed my div where I wanted
it..

Except that "clientHeight" might not work in anything but IE.
The FAQ has solutions for other browsers as well.

anyway, key here is I need this div (which is nothing but plain
HTML text..) to show up about 60 px off the bottom of the screen,
regardless of what clientHeight happens to be... and then when user
scrolls for it to stay fixed.. is this possible??
Yes.

in IE AND N??

What about the rest of the browsers?
I assume "N" means Netscape. In Netscape 6+ (based on the Mozilla
project), you can use position:fixed. If you also need it to work
in Netscape 4, you will need some extra, Netscape 4 specific, code.

For IE, you can use the above code embedded in a conditional comment,
so only IE sees it, along with a position:absolute setting.

this is not working.. here is code I have now:

#footer {position:fixed; top:200px; left:150px; z-index:1}

That puts it 200px from the top. You want "bottom:60px".

(I actually want it a lot further down, but used this value just to
test..) if position:fixed does not work w/z-index I'm in trouble,

It should. They are not incompatible.

<div class="overhead">
<h1><a href="http://tagsoup.com/"><imgalt="Tagsoup homepage"
src="/_img/logo.png"></a> <code>position:fixed</code>fixed for
IE/win</h1></div>

what on earth is this?? <code>...</code>..

who has ever seen such a thing?

Someone reading the HTML specification

of course when I tried to implement it in my own situation it
wouldn't work..

code on this page is full of really weird stuff, like for example,
<divclass="foobar"><code><ahref="/">devnull</a>['<a href="/#toc">
<abbrtitle="Table of contents">toc</abbr></a>']</code></div>

(I assume the missing spaces is due to your cut'n'paste)
Yes, what about it? Apart from the misuse of "code" for something that
doesn't look like code, I see no problem with this.

/L

 

[Frances Del Rio]

[...] actually I just found a very simple solution [...]

#footer {position:fixed; bottom:20px; left:150px; border:2px}

Use CSS and position:fixed. [...]

and that's it.. it works beautifully.. [...]
it doesn't work in IE!! it only works in Netscape..

It works in all Mozilla/5.0 which includes Netscape _6+_.

why is this???

Because IE is junk and only few recognize it.

I know, but still us developers have to be mindful of the fact that
whether we like it or not most browsers in use out there IS this damn
IE, so we have no choice, I think, but to make sure our stuff works in
IE.. such is life.. Someone in CSS group told me IE doesn't support
CSS2 and Position:fixed is a CSS2 property.... now I would love to know
what their rationale here is...???

That's why I recommended the workaround for IE:

[...] As it does not work with IE, you require
a workaround for this browser:
<http://www.fabrice-pascal.de/artikel/posfixedie6/>
(I don't have a link to an English explanation,
[1] Google is your friend [psf 6.1].)

(You may want to read replies more thoroughly.)

I did see this yesterday, but was confused b/c you say "for 'this'
browser.." didn't know if you meant IE.. I do know German, so I did
read a bit about the conditional comments and such... (I could never
discuss any of this stuff in German though.... this is the same
thing you can do w/JavaScript browser-detection code
(if (navigator.userAgent.indexOf.. etc.. oder??

Vielen Dank fur Deine Hilfe.......... Frances

 

[Frances Del Rio]

With CSS 2:

#footer {
position: fixed;
bottom: 1em; /* certain distance = 1em */
left:0px;
right:0px;
}




Not a great name to inspire confidence that it works in anything
except IE.




That should be
.compatMode=="CSS1Compat"
Other browsers than IE agrees on the value of compatMode in standards
mode ("CSS1Compat"), but not in quirks mode. E.g. Opera (and IIRC,
earlier versions of Mozilla_ uses "QuirksMode" when not in standards
mode.




It finds the root element of the document model. In standards mode, it



Except that "clientHeight" might not work in anything but IE.
The FAQ has solutions for other browsers as well.




What about the rest of the browsers?
I assume "N" means Netscape. In Netscape 6+ (based on the Mozilla
project), you can use position:fixed. If you also need it to work
in Netscape 4, you will need some extra, Netscape 4 specific, code.

Right now am interseted in IE and N/Mozilla.. (IE 5+ and N6+..) as I
mentioned earlier position:fixed works wonders in N, what I need to work
on is for IE...

For IE, you can use the above code embedded in a conditional comment,
so only IE sees it, along with a position:absolute setting.

yes, I guess I will have to do that...

[...]

<div class="overhead">
<h1><a href="http://tagsoup.com/"><imgalt="Tagsoup homepage"
src="/_img/logo.png"></a> <code>position:fixed</code>fixed for
IE/win</h1></div>

what on earth is this?? <code>...</code>..

[....]

code on this page is full of really weird stuff, like for example,
<divclass="foobar"><code><ahref="/">devnull</a>['<a href="/#toc">
<abbrtitle="Table of contents">toc</abbr></a>']</code></div>

what do the [ and ] mean????

(I assume the missing spaces is due to your cut'n'paste)
Yes, what about it? Apart from the misuse of "code" for something that
doesn't look like code, I see no problem with this.

ok, this is how entire code for this guy's page looks like:
does this look to you like normal code? it almost looks like it was
generated w/a WYSIWYG or something else weird.. either way thank you
very much for all yr help... Frances

<title
Fixed Positioning for Internet Explorer on Windows</title
<link

rel="stylesheet"
type="text/css"
media="screen"
title="devnull style sheet"
href="/_css/"

<link

rel="shortcut icon"
href="/_img/favicon.ico"

</head
<body
<div class="overhead"
href="http://tagsoup.com/"
<img

alt="Tagsoup homepage"
src="/_img/logo.png"

</a
<code
position:fixed</code
fixed for IE/win</h1
</div
<div class="foobar"

<code
<a href="/"
devnull</a
['<a

href="/#toc"
<abbr title="Table of contents"
toc</abbr
</a
']</code
</div
<div

entire pg is like this, with the >'s at the beginning of lines....
thanks again... Frances

 

[Frances Del Rio]

[snip]

<div class="overhead">
<h1><a href="http://tagsoup.com/"><imgalt="Tagsoup homepage"
src="/_img/logo.png"></a> <code>position:fixed</code>fixed for
IE/win</h1></div>

what on earth is this?? <code>...</code>..

It's simply another structural element. It marks the content as program
source code. This is usually rendered in a fixed-width font like
Courier. There are many other, similar mark-up elements. See section
9.2 of the HTML Specification - Structured text.

<URL:http://www.w3.org/TR/html4/struct/text.html#h-9.2>

interesting... didn't know about this... had seen "ABBR" tags before,
had also wondered what these were...

[.......]

of course when I tried to implement it in my own situation it
wouldn't work.. code on this page is full of really weird stuff,
like for example,

<divclass="foobar"><code><ahref="/">devnull</a>['<a href="/#toc">
<abbrtitle="Table of contents">toc</abbr></a>']</code></div>

The only "wierd" thing about this is that you've removed some critical
whitespace that merges element and attribute names.

what are the [ and ] for???

thank you very much for yr help..... Frances

 

[Michael Winter]

[snip]

<divclass="foobar"><code><ahref="/">devnull</a>['<a href="/#toc">
<abbrtitle="Table of contents">toc</abbr></a>']</code></div>

[snip]

what are the [ and ] for???

Nothing. The author just decided to wrap the link in square brackets and
single quotes so it looks like: ['toc'].

thank you very much for yr help..... Frances

You're welcome.

Mike