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
DogofwarsAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
hieloConnect With a Mentor Commented:
Basically you need to do something similar to my example below. I am using HTML but the same rules apply. I don't know how experienced you are with css, but when you use absolute positioning, the reference point of the element that is being positioned "absolutely", is its parent element. To clarify, on my example, the "parent" of "container" is <body>. So when I say "top:0, left:5px", then the browser will first find  the top-left corner of the <body> box/area and use it as its reference point. Then position "container" 0px from the top of that corner and then 5px over. Similarly, you will find that my "child1" and "child2" elements are positioned absolute, but their reference point is not <body>, but rather <div id="container">. That's why, if you notice, the child1 and child 2 appear one above the other since both have left:1em;. The only thing that I changed was the top position and I did it so that child2 appears above child1. If I had set them both to top: 1em; left:1em; they would literally overlap.
If this is still not clear, then perhaps the following link might help you understand positioning better (middle of page):
http://www.yourhtmlsource.com/stylesheets/csslayout.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
#container{position:absolute; top:3em; left:5em;background-color:lightgrey;}
#child1{position:absolute;top:2em;left:1em;}
#child2{position:absolute;top:1em;left:1em;}
-->
</style>
 
</head>
<body>
	<div id="container">
 
		<div>a</div>
		<div id="child1">b</div>
		<div id="child2">c</div>
		<div>d</div>
	</div>
</body>
</html>

Open in new window

0
 
hieloCommented:
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>
0
 
DogofwarsAuthor Commented:
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!?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
DogofwarsAuthor Commented:
That work with standard DHTML but it does not seam to work with VML
0
 
hieloCommented:
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.
0
 
hieloCommented:
In addition to "position:absolute;" you could try adding "display:inline;" to the elements in question.
0
 
DogofwarsAuthor Commented:
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

0
 
DogofwarsAuthor Commented:
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.
0
 
DogofwarsAuthor Commented:
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 :)
0
 
DogofwarsAuthor Commented:
It's not really VML but it does the same job.
0
All Courses

From novice to tech pro — start learning today.