Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE for MAC Div positioning

Status
Not open for further replies.
f0z

f0z

Programmer
Jan 10, 2003
48
0
0
US
Hi this has been bugging me most of the day, should be nice and simple but I must be doing something simple wrong. Or maybe it's IE.

I've created a function that returns the xy coordinates of an element. Then a div is positioned using these xy values. I've got it working for most browsers. But this ones not so easy.

Would someone be able to help out: either post up a function that they've used to position in IE for Mac or suggest what I might be doing wrong.

Here's the function that I'm using to get the x value, the y value is very similiar so I'm not going to post this:

Code: 
function getY(element)
{
   var el;
   var x;
   if(document.getElementById)
      el = document.getElementById(element);
   else if(document.all)
      el = document.all[element];
   x = el.offsetLeft;
   tempEl = el.offsetParent;
   while(tempEl != null)
   {
      x += tempEl.offsetLeft;
      tempEl = tempEl.offsetParent;
   }
   return x;
}
as i said this aint quite working as hoped on IE for MAC. Any help greatly appreciated.

Cheers,

foz

 
Sort by date Sort by votes
Ignore the fact that it's called getY when it returns the x value - little type-o.

Cheers.
 
Upvote 0 Downvote

What kind of element are you trying to get the position of?

Have you got a valid DOCTYPE at the very top of your page?

Have you put any alerts in to see what values are being returned for certain properties?

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
trying to get the position of a table cell, as for the doctype definition, is there a specific one for IE-MAC?
Yeah I've thrown in a few alerts and am getting back numbers just not the ones that I want ;)
 
Upvote 0 Downvote

This from MSDN regarding offsetParent:

MSDN said:
Note In Microsoft Internet Explorer 5, the offsetParent property returns the table object for the td object; in Internet Explorer 4.0 it returns the tr object.
Click to expand...

Although I don't suppose that makes any difference as you just add the values given anyway.

Are the values you've given way off? Random? Or is there some structure to them?

There is no Mac-only DOCTYPE, no.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
the values arent miles off, I'm sure there's some structure to what's going on, I'm just not sure what it is.

The values are less than what they should be which leads me to think that I'm getting the xy values of something in the table relative to the table not the page itself.

Today is another day, onward and upwards.
 
Upvote 0 Downvote

Can you post a URL?

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Unfortunately I can't I'll post the code: HTML and Javascript so that you can easily copy and paste.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>testing</title>
<script language="javascript">

var ns4;
var op5;
var op6;
var agt;
var mac;
var ie; 
var mac_ie;

sniffBrowsers();

function sniffBrowsers() {
	ns4 = document.layers;
	op5 = (navigator.userAgent.indexOf("Opera 5")!=-1) ||(navigator.userAgent.indexOf("Opera/5")!=-1);
	op6 = (navigator.userAgent.indexOf("Opera 6")!=-1) ||(navigator.userAgent.indexOf("Opera/6")!=-1);
	agt=navigator.userAgent.toLowerCase();
	mac = (agt.indexOf("mac")!=-1);
	ie = (agt.indexOf("msie") != -1); 
	mac_ie = mac && ie;
}

function moveXY(el)
	{
		var x = getElementLeft(el);
		var y = getElementTop(el)+getElementHeight(el);
		var div = document.getElementById("test");
		div.style.left = x+'px';
		div.style.top = y+'px';
		div.style.visibility = "visible";
	}
function getElementLeft(Elem) {
	if (ns4) {
		var elem = getObjNN4(document, Elem);
		return elem.pageX;
	} else {
		var elem;
		if(document.getElementById) {
			var elem = document.getElementById(Elem);
		} else if (document.all){
			var elem = document.all[Elem];
		}
		xPos = elem.offsetLeft;
		tempEl = elem.offsetParent;
  		while (tempEl != null) {
  			xPos += tempEl.offsetLeft;
	  		tempEl = tempEl.offsetParent;
  		}
		return xPos;
	}
}

function getElementTop(Elem) {
	if (ns4) {
		var elem = getObjNN4(document, Elem);
		return elem.pageY;
	} else {
		if(document.getElementById) {	
			var elem = document.getElementById(Elem);
		} else if (document.all) {
			var elem = document.all[Elem];
		}
		yPos = elem.offsetTop;
		tempEl = elem.offsetParent;
		while (tempEl != null) {
  			yPos += tempEl.offsetTop;
	  		tempEl = tempEl.offsetParent;
  		}
		return yPos;
	}
}

function getElementHeight(Elem) {
	if (ns4) {
		var elem = getObjNN4(document, Elem);
		return elem.clip.height;
	} else {
		var elem;
		if(document.getElementById) {
			var elem = document.getElementById(Elem);
		} else if (document.all){
			var elem = document.all[Elem];
		}
		if (op5) {
			xPos = elem.style.pixelHeight;
		} else {
			xPos = elem.offsetHeight;
		}
		return xPos;
	} 
}


</script>
</head>
<body>
	<table border="1">
		<tr>
			<td id="testing" onMouseOver="moveXY(this.id)">
				sometext
			</td>
		</tr>
	</table>
	<div id="test" style="position:absolute; visibility:hidden; top=0; left:0; background-color:#FF0000">
		some text again
	</div>
</body>
</html>
 
Upvote 0 Downvote
ok i know that this probably not the greatest or most robust of fixes but feck it it's working for me :D

At the end of the getElementLeft function I've added the following line:
Code: 
if(mac_ie)
   return xPos+10;
Before this line:
Code: 
return xPos;

And in the getElementTop I've added the following line:
Code: 
if(mac_ie)
   yPos = 17+elem.parentNode.parentNode.parentNode.offsetTop;
Before this line:
Code: 
return yPos;

The moveXY function then becomes:
Code: 
function moveXY(el)
{
	x=getElementLeft(el);
	y = getElementTop(el)+getElementHeight(el);
			
	var div = document.getElementById("test");
	div.style.left = x+'px';
	div.style.top = y+'px';
	div.style.visibility = "visible";
}

This places the divs just where I want them to go no matter where they're place on the page.

PreacherSon, all help was greatly appreciated. Cheers mate.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
131
Rayj0000
Rayj0000
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
302
ggriffit
ggriffit
michael12061206
  • Locked
  • Question
free javascript library for airliner diagrams
Replies
1
Views
53
xwb
xwb
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
66
chikwendu
chikwendu
James Mcgill
  • Locked
  • Question
Schema for a haikus
Replies
0
Views
41
James Mcgill
James Mcgill

Part and Inventory Search

Sponsor

Back
Top