Set left in Firefox

[jnoody]

This works fine in IE, but not Firefox. I am trying to set the left property of an element. I can do it fine if I set it using a string literal, but not if I use offsetWidth of another element. See below.

//el is my element
//this works fine
el.style.left = "100px";

//this does not work
this.element.style.left = anotherEl.offsetWidth + "px";

Now the wierd thing is that if I run:

alert(anotherEl.offsetWidth + "px");

it displays "100px" as you would expect. Why isn't this working?

I am thinking that it has to do something with string literals or the need for a wrapper class, but can't get any combination of eval and String to work.

Any ideas?

 

[friendlyposter]

I dont think it works in IE either

The this.element.style.left in some contexts should be this.style.left

See the following & try it out

<div style="position:absolute; left:20; top:20; width:200; height:200;
            background-color:yellow;"
     id="el1"
     onclick='el1.style.left = 200 ; alert(99);'

>

//el is my element<p>
//this works fine<p>
el.style.left = "100px";

</div>



<div style="position:absolute; left:20; top:220; width:200; height:200;
            background-color:#CCFFCC;"
     id="el2"
     onclick='this.style.left = anotherEl.offsetWidth + "px";'

>
//this ACTUALLY does not work<p>
this.element.style.left = anotherEl.offsetWidth + "px";<p>

//this does workb WITHOUT the word element.<p>
this.style.left = anotherEl.offsetWidth + "px";<p>

</div>


<div style="position:absolute; left:20; top:420; width:200; height:200;
            background-color:#FFCCFF;"
     id="anotherEl" 
     onclick='alert(anotherEl.offsetWidth + "px");alert(this.element.style.left);'

>
 if I run:<p>

alert(anotherEl.offsetWidth + "px");

//it throws a javascript error in IE too

</div>

 

[jnoody]

It does work in IE. I have tested it.

Sorry, I also should have mentioned that "this" is being using in an object-oriented context for an unrelated class I have defined.

Any other ideas?

 

[BillyRayPreachersSon]

Perhaps you could give us a bit more to go on about the context of the line in question, the object it belongs to, where it is called, etc.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jnoody]

I am making a javascript menu with submenus. I am using tables for each individual menu and submenu and am calculating the width of the parent menu to determine the left position of the submenu. The three classes I have are Menu, Submenu, and Cell. Each of the three classes I have has an instance variable for its main element. So for a Menu object, "this.element" refers to the table element that has been inserted into the document via Document.AppendChild().

So in the submenu's method that actually draws the menu by appending the elements to the document, I am trying to assign a submenu's parent menu width to the submenu's style.left property using:

//this = the submenu object instance
//this.parent is the cell the is the parent of the submenu
//this.parent.parent is the menu that is the parent of the parent cell
//this.parent.parent.element is the table element of the parent menu

//the following works in IE, but not Firefox
//I have tried clientWidth as well as offsetWidth
//it doesn't display the element at all anywhere on the page, but causes no javascript errors

this.element.style.left = this.parent.parent.element.offsetWidth + "px";

//the following now returns "0pt" in firefox
alert(this.element.style.left);

To test why it didn't work in Firefox, I tried the following instead:

var parentWidth = this.parent.parent.element.offsetWidth;

//the following shows "100" as expected in Firefox so we know what value we were trying to assign in the previous failed attempt above
alert(parentWidth);

//yet the following does actually work in Firefox using string literals in an expression instead of the value returned from offsetWidth
//it causes the element to be positioned correctly in Firefox
this.element.style.left = "100" + "px";

So you can see that the only difference between what works in firefox and what doesn't is the difference between the string literal "100" and the integer return from a method that we know returns 100.

Does that make sense?

 

[BillyRayPreachersSon]

inserted into the document via Document.AppendChild().

Perhaps that is where you are going wrong. You should realise that JS is case-sensitive... you need a lowercase "d" on "document", and a lowercase "a" on "appendChild", otherwise the call will fail.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

And don't use "parent" - use "parentNode" for traversing up the DOM.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jnoody]

Please reread my post.

parent is an instance variable in my class, not the use of parent that you are thinking off. And the element gets appended fine if I don't set style.left. The javascript for adding the page works. I have tested that and verified.

If my syntax isn't perfect, please understand that I didn't copy the actual code and may have capitalized a letter that shouldn't be. If you read my post you will see that the specific problem I am having is this.

What I am asking is why setting
element.style.left = "100" + "px";

positions the element perfectly on the page where I want it, but setting
element.style.left = getWidth() + "px";

when I know that getWidth() returns 100, has the equivalent effect of trying to set
element.style.left = "pickles";