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

[AaronNGray]

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

 

[Martin Honnen]

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

 

[AaronNGray]

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

 

[Thomas 'PointedEars' Lahn]

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(VS.85).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

 

[Thomas 'PointedEars' Lahn]

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

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


PointedEars

 

[Martin Honnen]

I was using cssFloat instead of styleFloat !

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

 

[Thomas 'PointedEars' Lahn]

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

 

[AaronNGray]

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

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