Link to home
Start Free TrialLog in
Avatar of Dogofwars
Dogofwars

asked on

Javascript VML for IE: Object coordinate are not what they should be(not matching the input)

Hi,

  I am trying to develop a project that use VML to create basically a flow chart with, though I have a small problem. The width and height of the object are correct but as for the position it's twice what I request. For instance a "rect" of 100x100 in size, position at 0,0 will be at the right place but if I put for instance another "rect" at 100,100 they will be in fact at 200,200. Anyway reason why and how I can overcome this problem??

Thank you
Avatar of hielo
hielo
Flag of Wallis and Futuna image

declare a css definition for the elements in question and set their position to absolute.
Ex:
 <v:shape type="#myFirstRectangle"
   style='position: absolute; left:0; top: 0; width: 100px; height: 100px'>...</v:shape>
 <v:shape type="#mySecondRectangle"
   style='position: absolute; left:0; top: 0; width: 100px; height: 100px'>...</v:shape>
Avatar of Dogofwars
Dogofwars

ASKER

The group object is absolute but not the child one that are relative. They are inserted dynamically as for the CSS would it really made any difference, what would I need to put in the CSS so it make a difference!?
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
That work with standard DHTML but it does not seam to work with VML
I find that hard to believe. CSS is independent of HTML. The rules/definitions apply to "markup elements" (in general), not HTML elements. Most likely you are not providing the correct element references.
In addition to "position:absolute;" you could try adding "display:inline;" to the elements in question.
With the example below you might understand better. All the VML object except the standard object like input, textarea etc.. are  not at the right place(position) but they have the right size!? If you set them at 100,100 they will be at 200,200 and if you set them at 200,200 they will be at 400,400 like there is a multiplier of 2. If you change the " v:group" tag to div the whole thing goes at the right place except the VML "v:rect" tag that is still using a multiplier of 2 for the position. I just don't know what to set to remove this multiplier so it the object get all positioned at the right place.
this.Add_Text_Group(Name,Title,X,Y,W,H)
{
var vm = document.createElement("v:group");
vm.setAttribute("id", Name + "_Group");
vm.style.position = "absolute";
vm.style.width = W + "px";
vm.style.height = H + "px";
vm.style.left = X + "px";
vm.style.top = Y + "px";
vm.style.zOrder = 1
vm.setAttribute("coordsize", W + " " + H);
 
document.body.appendChild(vm);
 
 
o = document.createElement("v:rect");
o.setAttribute("id",Name)
o.style.position = "absolute";
o.style.left = X + "px";
o.style.top = Y + "px";
o.style.width = W  + "px";
o.style.height = H + "px";
o.style.zIndex = 2
o.setAttribute("fillcolor", 'white');
wm.appendChild(o);
o = null
 
 
o = document.createElement("input");
o.setAttribute("id",Name + "_TextInput")
o.style.position = "absolute";
o.style.left = X + 10 + "px";
o.style.top = Y + 5 + "px";
o.style.width = W - (title.length * 8) + "px";
o.style.height = 30 + "px";
o.style.zIndex = 3
wm.appendChild(o);
o = null
 
vm = null
}

Open in new window

By the way I had this code in multiple wrapper function but I made this simplier so you can understand you won't be able to execute de code, you will need to modifie it a bit.
The fault was in the wrapper itself, it injected twice the value I change that and it display correctly now, I guess I tried to make it too complicate :)
It's not really VML but it does the same job.