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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
hieloCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JScript

From novice to tech pro — start learning today.