<!DOCTYPE> breaking a script?

Discussion in 'Javascript' started by Matthew Schubert, Oct 4, 2004.

  1. 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?
     
    Matthew Schubert, Oct 4, 2004
    #1
    1. Advertising

  2. Matthew Schubert

    ZER0 Guest

    On Mon, 04 Oct 2004 15:11:13 GMT, Matthew Schubert wrote:

    > 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"
     
    ZER0, Oct 4, 2004
    #2
    1. Advertising

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

    Eh?

    > Replacing document.body with document.documentElement.


    Tried. Failed (At least in Firefox).
     
    Matthew Schubert, Oct 4, 2004
    #3
  4. On Mon, 04 Oct 2004 15:11:13 GMT, Matthew Schubert
    <> wrote:

    > 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/groups?threadm=1319c3c8.0409281107.1b34b642%40posting.google.com>

    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.

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Oct 4, 2004
    #4
  5. Matthew Schubert

    ZER0 Guest

    On Mon, 04 Oct 2004 15:28:20 GMT, Matthew Schubert wrote:

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


    > 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.

    >> Replacing document.body with document.documentElement.


    > 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"
     
    ZER0, Oct 4, 2004
    #5
  6. 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.
     
    Matthew Schubert, Oct 4, 2004
    #6
  7. On Mon, 04 Oct 2004 15:50:27 GMT, Matthew Schubert
    <> wrote:

    > 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

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Oct 4, 2004
    #7
  8. Matthew Schubert

    Mick White Guest

    Mick White, Oct 4, 2004
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Amy
    Replies:
    0
    Views:
    539
  2. vsoler

    "Breaking" the __main__ script

    vsoler, Mar 14, 2010, in forum: Python
    Replies:
    15
    Views:
    482
    Jean-Michel Pichavant
    Mar 15, 2010
  3. Ramon F Herrera

    Reading STDIN seems to be breaking my script

    Ramon F Herrera, Mar 17, 2007, in forum: Perl Misc
    Replies:
    10
    Views:
    298
    Joe Smith
    Mar 19, 2007
  4. chowdary
    Replies:
    1
    Views:
    108
    Thomas 'PointedEars' Lahn
    Nov 15, 2007
  5. Larry Lindstrom
    Replies:
    19
    Views:
    1,353
    Jonathan N. Little
    Jun 12, 2012
Loading...

Share This Page