Objektets position om det ligger i en div med scrollbar

kristofferMedlem sedan juni 20001 257 inlägg

8 maj 2006 15:27#1

Hur kan jag få reda på de korrekta x- och y-koordinaterna för ett objekt (till exempel en tabell) som ligger i en DIV som har style="OVERFLOW:auto;"? Tanken är att nedanstående kod skall placeras lagret foo i övre vänstra hörnet i tabellen (objektet). Men om tabellen och lagret foo ligger inuti ett yttre lager som har scrollbars så placeras foo fel. Hjälp!

<HTML>
	<HEAD>
		<SCRIPT>
		var lastTableObject = null;
		var lastEditDivObject = null;

		function mouseLeaves (element, evt) {
			if (typeof evt.toElement != 'undefined' && evt.toElement && typeof element.contains != 'undefined') {
				return !element.contains(evt.toElement);
			}
			else if (typeof evt.relatedTarget != 'undefined' && evt.relatedTarget) {
				return !contains(element, evt.relatedTarget);
			}
		}
					
		function findPosX(obj)
		{
			var curleft = 0;
			if (obj.offsetParent)
			{
				while (obj.offsetParent)
				{
					curleft += obj.offsetLeft;
					obj = obj.offsetParent;
				}
			}
			else if (obj.x)
				curleft += obj.x;
			return curleft;
		}

		function findPosY(obj)
		{
			var curtop = 0;
			if (obj.offsetParent)
			{
				while (obj.offsetParent)
				{
					curtop += obj.offsetTop;
					obj = obj.offsetParent;
				}
			}
			else if (obj.y)
				curtop += obj.y;
			return curtop;
		}
		
		function showhide(objTable, layer_ref, state) 
		{
			newX = findPosX(objTable);			
			newY = findPosY(objTable);
			
			if (document.all) {
				obj = document.getElementById(layer_ref);
				
				if (state == 0) 
				{
					if (mouseLeaves(objTable, event) && mouseLeaves(obj, event)) {
						obj.style.visibility = 'hidden';
						objTable.style.border = "";
					}
				}
				else if (state == 1) 
				{
					if (lastTableObject && lastEditDivObject) 
					{
						if (lastEditDivObject.style.visibility == 'visible')
						{
							lastEditDivObject.style.visibility = 'hidden';
						}
						lastTableObject.style.border = "";
					}					
					obj.style.visibility = 'visible';
					obj.style.top = newY + 'px';
					obj.style.left = newX + 'px';
					objTable.style.border = "1px dotted red";
				}
			}			
			lastTableObject = objTable;
			lastEditDivObject = obj;
		}
		</SCRIPT>
	</HEAD>
	<BODY>
		<center>
			<div style="OVERFLOW:auto;HEIGHT:400px;WIDTH:400px;">
				<TABLE onmouseover="showhide(this, 'foo', 1);" onmouseout="showhide(this, 'foo', 0);" height="100%" cellSpacing="0" cellPadding="0" width="300" border="0">
					<TR>
						<TD vAlign="top">Morbi varius, ante a ornare interdum, dolor elit luctus dui.</TD>
					</TR>
				</TABLE>
				<DIV id="foo" style="POSITION:absolute;">TEXT TEXT</DIV>
			</div>
		</center>
	</BODY>
</HTML>

kristofferMedlem sedan juni 20001 257 inlägg

10 maj 2006 09:49#2

Ingen som har någon idé?

zcorpanMedlem sedan dec. 20042 245 inlägg

10 maj 2006 10:54#3

Jag är inte säker att jag förstått frågeställningen, men vad händer om du ändrar:

<div style="OVERFLOW:auto;HEIGHT:400px;WIDTH:400px;">

...till:

<div style="position:relative; OVERFLOW:auto;HEIGHT:400px;WIDTH:400px;">

...?

kristofferMedlem sedan juni 20001 257 inlägg

10 maj 2006 12:30#4

Det fungerar inte. Här är två sidor som demonstrerar problemet:

http://www.alien.se/scroll/without-scrollbars.htm
Utan scrollbars, fungerar korrekt.

http://www.alien.se/scroll/with-scrollbars.htm
Med scrollbars, fungerar inte korrekt.

Jag vill att scriptet skall fungera i båda fallen.