Clever Geek Handbook

Javascript execution problems with Dojo

Before asking your question, here is the code that breaks:

var coords = dojo.coords(g);
g.style.left = coords.x + "px";
g.style.top = coords.y + "px";
g.style.position = "absolute";

Now imagine what g

is a relatively positioned element with position x

70 and a y

position 30. If I comment out the last line of the above code, which dojo.coords(g)

gives me, But as soon as I add the last line, it dojo.coords(g)

returns position x

18 where the element would be if it was absolutely positioned. It seems to me that the call dojo.coords()

should not depend on the code below, but it is.

I also see the same problem with dojo.require()

, where if I call it just before calling the function that it loads, I get an undefined error for the given function.

I'm testing in Firefox 3, but I also notice similar problems in Safari 3. Any ideas?

-1


source to share


3 answers


I would still like someone to explain why this works, but here is the solution:

var coords = dojo.coords(g);
g.style.left = coords.x + "px";
g.style.top = coords.y + "px";
setTimeout(function(h) {
    h.style.position = "absolute";
}, 0, g);


Greetings

0


source


This is not a Dojo quirk, but the way browsers work. Basically, the DOM can take a while to reflect your changes and elements to permute, or even change the layout. This is why you see what you see.

Another reason could be the parent of your element. dojo.coords () returns the position relative to the viewport. If you pass "true" as the second value, it will return the position relative to the document root. Assigning a top / left forward position and changing the position to "absolute" makes the element positioned relative to its parent if it was positioned too (absolute, relative, or fixed) or at the document root. It's a subtle difference, but sometimes it bites people. Relevant links: Contains block , MSDN: position Attribute , Google doctype: position .



PS: I personally rely on Dojo to set left / right, hoping it will do the right thing for browser addictions, and I set the position first:

var coords = dojo.coords(g);
g.style.position = "absolute";
dojo.marginBox(g, {l: coords.x, t: coords.y});
+1


source


Sorry for not answering your question (because I don't know dojo), but if coords.x and coords.y do not return a string, there is an error in your function,

g.style.left = coords.x + "px";

g.style.top = coords.y + "px";

You need to always pass the string in style, so add also:

g.style.left = parseInt(coords.x) + "px";
g.style.top = parseInt(coords.y) + "px";

You would be surprised how many times such a mistake made my head spin. About the answer, I'm sorry, but I can't help you.

Good luck!

Edited:

Oh, if I understood, I can help you now .. well, since I don't know dojo, I can point you to a javascript that will do what you want.

g.offsetTop

and

g.offsetLeft

Gives you coordinates from the position of the element. Try them and see if it works.

-1


source






More articles:


All Articles