<!DOCTYPE> breaking a script?

[Matthew Schubert]

I have reason for an element on a page to be static, like the CSS property
"position: fixed" defines.

Obviously, this CSS property doesn't work in IE :-/

I have looked around at alternatives, and found one that suits my needs, an
active Javascript that changes the position of the element when the page is
scrolled.

A simple test implementation of the script can be seen at
http://evil.mooo.com/test.html. It works perfectly.

When I add a <!DOCTYPE> declaration to the top of the page, so it conforms
with W3C's standards, the script breaks, and I get this
http://evil.mooo.com/test2.html.

What is happening? Any ideas?

 

[ZER0]

I have reason for an element on a page to be static, like the CSS property
"position: fixed" defines.

Obviously, this CSS property doesn't work in IE :-/
Exactly.

I have looked around at alternatives, and found one that suits my needs, an
active Javascript that changes the position of the element when the page is
scrolled.

This is old school method. Use expression instead (IE5+)

When I add a <!DOCTYPE> declaration to the top of the page, so it conforms
with W3C's standards, the script breaks, and I get this
http://evil.mooo.com/test2.html.

What is happening? Any ideas?

Replacing document.body with document.documentElement.

You can check the document.compatMode for choose body or documentElement.



--
ZER0://coder.gfxer.web-designer/

~ Come devo regolare la stampante laser per stordire?
(How do I set a laser printer to stun?)

on air ~ "Yellowcard - Breathing"

 

[Matthew Schubert]

This is old school method. Use expression instead (IE5+)

Eh?

Replacing document.body with document.documentElement.

Tried. Failed (At least in Firefox).

 

[Michael Winter]

I have reason for an element on a page to be static, like the CSS
property "position: fixed" defines.

Obviously, this CSS property doesn't work in IE :-/

Someone asked for something similar recently in this thread:

<URL:http://groups.google.com/[email protected]>

Though in my final solution, the fixed content was centred. It's easy
enough to adjust, though. Ask if you need help.

I have looked around at alternatives, and found one that suits my needs,
an active Javascript that changes the position of the element when the
page is scrolled.

I must say, it's a horrible implementation. Browser detection should
always be avoided with feature detection used in its place. In this case,
I used Microsoft's conditional comments, the contents of which change the
position property to absolute and add a script which moves the box when
the page is scrolled.

A simple test implementation of the script can be seen at
http://evil.mooo.com/test.html. It works perfectly.

When I add a <!DOCTYPE> declaration to the top of the page, so it
conforms with W3C's standards, the script breaks, and I get this
http://evil.mooo.com/test2.html.

What is happening? Any ideas?

The problem you're seeing is that when a DOCTYPE is specified, IE, like
most browsers, switches into strict mode. When IE does this, it uses
document.documentElement, not document.body, to hold the clientWidth, and
similar, properties. The code I've presented adapts as necessary[1].

Hope that helps,
Mike


[1] Many thanks to Richard Cornford for the concept, or at least an
implementation of it.

 

[ZER0]

Eh?

http://msdn.microsoft.com/workshop/author/dhtml/overview/recalc.asp

Of course, expressions are not a w3c standard. But fix a lot of stuff in
IE.
You can use position:fixed for the browsers w3c compliant; and expression
for emulate it in IE.

Tried. Failed (At least in Firefox).

I'm talking about IE. In IE it works. In Firefox it doesn't works 'cause
you missed the "px" suffix in your measures.

--
ZER0://coder.gfxer.web-designer/

~ Io non soffro di pazzia, ne godo ogni minuto.
(I don't suffer from insanity, I enjoy every minute of it)

on air ~ "Donots - Saccharine Smiles"

 

[Matthew Schubert]

Why is the second <script> outside of the IE conditional comments?

Is it not required only by IE in this case? (Remember I do not need the
button to make the DIV visible).

It is a nice implementation. One thing though. I do not like the way it
"jerks" when scrolling. The original script I posted smoothly scrolled the
DIV...

Also, I tried replacing document.body with document.documentElement, and it
works perfectly in IE, but not in Firefox :-/

I think I will use your script, with a little modification Thanks a
bunch.

 

[Michael Winter]

Why is the second <script> outside of the IE conditional comments?

Is it not required only by IE in this case? (Remember I do not need the
button to make the DIV visible).

The code there, part of a larger collection, is used in both the IE code
and the showWait function, used to make the DIV appear.

It is a nice implementation. One thing though. I do not like the way it
"jerks" when scrolling. The original script I posted smoothly scrolled
the DIV...

It was a quick fix. I woke up that morning and the first thing that came
to my mind was: "If the user scrolls the page, the DIV will shift." Odd, I
know. As I hadn't had anything back from the OP, I thought I should just
add the extra code as soon as possible. I should have just tested though
about it more in the first place.

If you want smoother movement, I could add it if you want.

Also, I tried replacing document.body with document.documentElement, and
it works perfectly in IE, but not in Firefox :-/

Firefox doesn't report properties like scrollTop on the HTML element
(which is what documentElement refers to). However, as Firefox does
support the fixed position value, there isn't much point in worrying about
that.

I think I will use your script, with a little modification Thanks a
bunch.

You're welcome.

Mike

 

[Mick White]

Have a look at IE7: http://dean.edwards.name/IE7/compatibility/fixed.html

http://dean.edwards.name/IE7/ie7-standard-p.js

interesting source...

Mick