I have a tabbed environment.
Parent div with a div for each tab.
Inside one tab are a set of options - each a div.
On selecting one of the options a greyed-out div is laid over the other divs rendering them inoperable so only one option can be fed to the form.
This code works well - but IE doesn't like it (the nested divs?).
It gets the size right but not x or y pos.
I wonder about using jquery - ?
I generally wonder: confused:
Any suggestions would be most welcome.
Use jQuery to develop a cross-browser solution.
$(selector).offset() will return an object with absolute position (left, top) of the element relative to the document.
$(selector).position() will return another object with relative position to the element's parent container.
var elt=arguments[x];
var offsets=$(elt).offset();
xPos=offsets.left;
yPos=offsets.top;
The oWidth and oHeight would be the width and height of the element without the padding, border and margin.
You could use innerWidth() and innerHeight() is you would like the width and height to include the padding,
outerWidth() and outerHeight() to include both padding and borders.
All you have to do is use the jquery library to take advantage of its cross-browser methods.
There is no need of jQuery with a function like this (see findPosition from Peter-Paul Koch)
Code:
function getPos(obj){var curleft=curtop=0;
if (obj.offsetParent)
do {curleft+=obj.offsetLeft;curtop += obj.offsetTop;}
while (obj=obj.offsetParent);
return [curleft,curtop];
}
With any HTML code and, for example, an element identified by myElm, like the following span
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Use of function getPos</title>
<style type="text/css">
#page {display:block;margin:30px auto;text-align:center}
</style>
</head>
</body>
<div id="page">
<p>Hello <span id="myElm">Arfa !</span></p>
</div>
<script type="text/javascript">
// The function in a script
function getPos(obj){var curleft=curtop=0;
if (obj.offsetParent)
do {curleft+=obj.offsetLeft;curtop += obj.offsetTop;}
while (obj=obj.offsetParent);
return [curleft,curtop];
}
// The corresponding element (the span tag a DOM object which exists)
var objElm=document.getElementById('myElm');
// We call this function with this element as argument
var xy=getPos(objElm);
// To get this coordinates
alert('Span tag coordinates\n'+xy[0]+' pixels left\n'+xy[1]+' pixels top');
</script>
</body>
</html>
Reply With Quote
Bookmarks