How to float div right with z-index from Javascript and have it workon IE 7

Discussion in 'Javascript' started by AaronNGray, Nov 15, 2009.

  1. AaronNGray

    AaronNGray Guest

    Hi,

    I have the following Javascript and am trying to get it to work on IE.
    It works on FF, Chrome, , Safari, and Opera fine.

    http://www.aarongray.org/CompLangJavascript/Test/test.html

    It works using normal CSS but not done as Javascript.

    I am trying to add a gif to the top right of a web page using
    Javascript.

    Any help welcome.

    Many thanks in advance,

    Aaron
     
    AaronNGray, Nov 15, 2009
    #1
    1. Advertising

  2. Re: How to float div right with z-index from Javascript and haveit work on IE 7

    AaronNGray wrote:

    > I have the following Javascript and am trying to get it to work on IE.
    > It works on FF, Chrome, , Safari, and Opera fine.
    >
    > http://www.aarongray.org/CompLangJavascript/Test/test.html
    >
    > It works using normal CSS but not done as Javascript.


    IE has styleFloat
    http://msdn.microsoft.com/en-us/library/ms530755(VS.85).aspx
    so you need e.g.
    element.style.styleFloat = "right";
    --

    Martin Honnen
    http://msmvps.com/blogs/martin_honnen/
     
    Martin Honnen, Nov 15, 2009
    #2
    1. Advertising

  3. AaronNGray

    AaronNGray Guest

    Re: How to float div right with z-index from Javascript and have itwork on IE 7

    On Nov 15, 6:27 pm, Martin Honnen <> wrote:
    > AaronNGray wrote:
    > > I have the following Javascript and am trying to get it to work on IE.
    > > It works on FF, Chrome, , Safari, and Opera fine.

    >
    > >    http://www.aarongray.org/CompLangJavascript/Test/test.html

    >
    > > It works using normal CSS but not done as Javascript.

    >
    > IE has styleFloathttp://msdn.microsoft.com/en-us/library/ms530755(VS.85).aspx
    > so you need e.g.
    >    element.style.styleFloat = "right";


    Thanks Martin, thats great.

    I was using cssFloat instead of styleFloat !

    Not doing any JS for a while takes its toll.

    Aaron


    Aaron
     
    AaronNGray, Nov 15, 2009
    #3
  4. Re: How to float div right with z-index from Javascript and have it work on IE 7

    AaronNGray wrote:

    > I have the following Javascript and am trying to get it to work on IE.
    > It works on FF, Chrome, , Safari, and Opera fine.
    >
    > http://www.aarongray.org/CompLangJavascript/Test/test.html


    If that actually works in FF, Chrome, Safari, and Opera, then by
    coincidence.

    tag.style.zIndex = 101;
    tag.style.cssFloat = "right";
    tag.setAttribute("style.float","right");
    tag.style.y = 0;
    tag.style.width = 32;
    tag.style.height = 32;

    must be at least

    tag.style.zIndex = "101";
    tag.style.cssFloat = "right";
    tag.style.top = "0";
    tag.style.width = "32px";
    tag.style.height = "32px";

    see <http://www.w3.org/TR/DOM-Level-2-Style/ecma-script-binding.html>.

    BTW, setting an attribute with the name `style.float' to the value `right'
    is nonsense. (Have you ever seen `<... style.float="right">...</...>'?)

    To make it work in IE/MSHTML, you will also at least need to branch for the
    MSHTML DOM:

    var sFloat = "right";

    if (typeof tag.style.cssFloat != "undefined")
    {
    tag.style.cssFloat = sFloat;
    }
    else if (tag.style.styleFloat != "undefined")
    {
    tag.style.styleFloat = sFloat;
    }

    See <http://msdn.microsoft.com/en-us/library/ms530755%28VS.85%29.aspx>
    (ignore the MS misnomer: `style' is a CSS _property_, not an attribute.)

    The `sFloat' variable is not necessary, but it eases maintenance.

    `test' is an identifier unwise to choose; unit testing frameworks (e.g.
    JSUnit) may provide a function of the same name, and the identifier is not
    self-explanatory anyway.

    > It works using normal CSS but not done as Javascript.
    >
    > I am trying to add a gif to the top right of a web page using
    > Javascript.


    <http://jibbering.com/faq/faq_notes/clj_posts.html#ps1DontWork>
    <http://jibbering.com/faq/#javascriptErrors>


    PointedEars
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Nov 15, 2009
    #4
  5. Re: How to float div right with z-index from Javascript and have it work on IE 7

    Thomas 'PointedEars' Lahn wrote:

    > See <http://msdn.microsoft.com/en-us/library/ms530755%28VS.85%29.aspx>
    > (ignore the MS misnomer: `style' is a CSS _property_, not an attribute.)


    I meant to say: `float' is a CSS _property_.


    PointedEars
    --
    Danny Goodman's books are out of date and teach practices that are
    positively harmful for cross-browser scripting.
    -- Richard Cornford, cljs, <cife6q$253$1$> (2004)
     
    Thomas 'PointedEars' Lahn, Nov 15, 2009
    #5
  6. Re: How to float div right with z-index from Javascript and haveit work on IE 7

    AaronNGray wrote:

    > I was using cssFloat instead of styleFloat !


    cssFloat is correct for other browsers but MS does not support that.


    --

    Martin Honnen
    http://msmvps.com/blogs/martin_honnen/
     
    Martin Honnen, Nov 15, 2009
    #6
  7. Re: How to float div right with z-index from Javascript and have it work on IE 7

    Thomas 'PointedEars' Lahn wrote:

    > if (typeof tag.style.cssFloat != "undefined")
    > {
    > tag.style.cssFloat = sFloat;
    > }
    > else if (tag.style.styleFloat != "undefined")


    Typo. This will likely be true always. Insert the `typeof' operator as
    above.


    PointedEars
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)
     
    Thomas 'PointedEars' Lahn, Nov 15, 2009
    #7
  8. AaronNGray

    AaronNGray Guest

    Re: How to float div right with z-index from Javascript and have itwork on IE 7

    On 15 Nov, 18:27, Martin Honnen <> wrote:
    > AaronNGray wrote:
    > > I have the following Javascript and am trying to get it to work on IE.
    > > It works on FF, Chrome, , Safari, and Opera fine.

    >
    > >    http://www.aarongray.org/CompLangJavascript/Test/test.html

    >
    > > It works using normal CSS but not done as Javascript.

    >
    > IE has styleFloathttp://msdn.microsoft.com/en-us/library/ms530755(VS.85).aspx
    > so you need e.g.
    >    element.style.styleFloat = "right";
    > --
    >
    >         Martin Honnen
    >        http://msmvps.com/blogs/martin_honnen/


    I am still getting problems with IE, the whole page is being pushed
    down when in narrow wisth on IE, but not on any other browsers. Its
    like the z-index stuff is colliding with the normal div's :-

    http://www.aarongray.org/comp.lang.javascript/Test/test1.html

    Hoping someone can solve this one :)

    Many thanks in advance,

    Aaron
     
    AaronNGray, Nov 16, 2009
    #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. hibiki
    Replies:
    2
    Views:
    462
    hibiki
    Apr 13, 2005
  2. hibiki
    Replies:
    0
    Views:
    361
    hibiki
    Apr 12, 2005
  3. bd
    Replies:
    0
    Views:
    671
  4. Carsten Fuchs
    Replies:
    45
    Views:
    1,660
    James Kanze
    Oct 8, 2009
  5. Tomasz Chmielewski

    sorting index-15, index-9, index-110 "the human way"?

    Tomasz Chmielewski, Mar 4, 2008, in forum: Perl Misc
    Replies:
    4
    Views:
    360
    Tomasz Chmielewski
    Mar 4, 2008
Loading...

Share This Page