Questions Tags Users Unanswered

getBoundingClientRect method

Question is open.
1 answer (2 voices) (3994 views)
Hi, I was trying to implement getBoundingClientRect() as in your code on http://help.dottoro.com/ljvmcrrn.php. I am able to get the coordinates, but they are skewed to the right and bottom from the actual.

I am thinking I need to add a scroll or parent element, But I am not sure how or where to add it in. Please help

URL = "http://www.winbatch.com/techsupt.html"
tag_id = "inpagelinks"
GoSub Open_IE
GoSub Get_Coordinates
Exit
;*******************
:Get_Coordinates
Browser_Name = strtrim(msie.Document.title)
dom_element   = msie.Document.getElementById( tag_id )
position      = dom_element.getBoundingClientRect( dom_element )

Pos_top = itemextract(1, position.top, ".")
Pos_left = itemextract(1, position.left, ".")
Pos_bottom = itemextract(1, position.bottom, ".")
Pos_right = itemextract(1, position.right, ".")

MousePlay("%Pos_left% %Pos_top%", Browser_Name, "", 0, 0.5)
timedelay(0.2)
MousePlay("%Pos_left% %Pos_bottom%", Browser_Name, "", 0, 0.5)
timedelay(0.2)
MousePlay("%Pos_right% %Pos_bottom%", Browser_Name, "", 0, 0.5)
timedelay(0.2)
MousePlay("%Pos_right% %Pos_top%", Browser_Name, "", 0, 0.5)
Return
;*******************
:Open_IE
msie           = ObjectCreate("InternetExplorer.Application")
msie.visible   = @TRUE
msie.navigate( URL )
TIMEDELAY(5)
while msie.readystate <> 4
       timedelay(0.5)
endwhile
Return
;*******************
1 Answer
returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.
<head>
<script type="text/javascript">
var timid = -1;
var timoID_2 = -1;
var nLine;
var nPosInLine;
var oRcts;
var nDivLen;
var nEraser;
function LoadDone() {
oTextRange = document.body.createTextRange();
// Get bounding rect of the range
oRcts = oTextRange.getClientRects();
nLine = 0;
oBndRct = obj.getBoundingClientRect();
nDivLen = oBndRct.right - oBndRct.left + 1;
MoveTo();
}
function MoveTo() {
if (nLine >= oRcts.length) {
nLine = 0;
}
obj.style.top = oRcts[nLine].top;
nPosInLine = oRcts[nLine].left;
nEraser = 0;
timoID_2 = setInterval("MoveToInLine()",60);
}
function MoveToInLine() {
if (nPosInLine >= oRcts[nLine].right - nDivLen) {
clearInterval(timoID_2);
timoID_2 = -1;
obj.style.left = oRcts[nLine].right - nDivLen;
nLine++;
timid = setTimeout("MoveTo()", 100);
return;
}
if (nEraser == 0) {
nEraser = 1;
}
else {
nEraser = 0;
}
im.src = "/workshop/graphics/dot.png";
obj.style.left = nPosInLine;
nPosInLine += 3;
}
function End() {
if(timid != -1) {
clearInterval(timid);
timid = -1;
}
if(timoID_2 != -1) {
clearInterval(timoID_2);
timoID_2 = -1;
}
}
</script>
</head>
<body id="bodyid" onload="LoadDone()"
onresize="End();LoadDone();" onunload="End()">
<p style="text-align:center">
<b>The quick brown fox jumps over the lazy dog.</b>
</p>
<div id="obj" style="position:absolute">
<img id="im" src="/workshop/graphics/dot.png"
border="0" height="16" width="16">
</div>
</body>
15 30 50 per page

Your Answer

Limit of files to attach: 3 / Max total size: 1024 KB
File:
Description:
remove