Pozíciólekérdezés Javascript-ből
Adott az alább beillesztett HTML+Javascript kód. A lényege az, hogy az oldalon található 'testlayer' layert a 'testcell' cella bal felső sarkába kellene abszolút módon elhelyezni (position: absolute). Ehhez viszont tudnom kellene a 'testcell' cella pontos pozícióját az oldalon.
Az oldalba beágyazott Javascript pontosan ezt hivatott elvégezni (csak) annyira böngészőfüggetlen módon, hogy az oldalnak működnie kellene Explorer, Mozilla és Safari alatt is. Ebből az első kettő teljesen szépen megy is, de a Safari (illetve mint kiderült más KHTML alapú böngészők) alatt a layer rossz helyre kerül.
A pozíció leolvasó script-et a http://www.quirksmode.org/js/findpos.html oldalról vettem, és az alkotó állítása szerint Safari allatt is működnie kellene.
Van valakinek valami ötlete, hogy hogyan bírhatnám működésre ezt a funkciót Safari alatt is? (Az is jó, ha más KHTML alapú böngészőben megmozdul -> akkor már valószínűleg a Safariban is menni fog. (Feltételezem nem olyan sokan tudják kipróbálni Safari alatt...))
Kösz:
Babszem.
PS: A kód a teljes tartalom végén látható.
■ Az oldalba beágyazott Javascript pontosan ezt hivatott elvégezni (csak) annyira böngészőfüggetlen módon, hogy az oldalnak működnie kellene Explorer, Mozilla és Safari alatt is. Ebből az első kettő teljesen szépen megy is, de a Safari (illetve mint kiderült más KHTML alapú böngészők) alatt a layer rossz helyre kerül.
A pozíció leolvasó script-et a http://www.quirksmode.org/js/findpos.html oldalról vettem, és az alkotó állítása szerint Safari allatt is működnie kellene.
Van valakinek valami ötlete, hogy hogyan bírhatnám működésre ezt a funkciót Safari alatt is? (Az is jó, ha más KHTML alapú böngészőben megmozdul -> akkor már valószínűleg a Safariban is menni fog. (Feltételezem nem olyan sokan tudják kipróbálni Safari alatt...))
Kösz:
Babszem.
PS: A kód a teljes tartalom végén látható.
<html>
<head>
<title>Safari Javascript bug testcase</title>
<script type="text/javascript">
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 testfunction ()
{
leftPos = findPosX (document.getElementById('testcell'));
topPos = findPosY (document.getElementById('testcell'));
document.getElementById('testlayer').style.left = leftPos;
document.getElementById('testlayer').style.top = topPos;
}
window.onload = testfunction;
</script>
</head>
<body>
<table border="1px" width="100%">
<tr>
<td width="40%">
<span style="font-size:xx-large;">Header</span>
</td>
<td>
Logo goes here
</td>
</tr>
<tr>
<td id="testcell" colspan="2" height="500px">
<div id="testlayer" style="position:absolute; left:0px; top:0px; width:500px; height:200px; z-index=10; background-color:#8888FF;">
Layer should start in
<ul>
<li>upper left corner of Content cell</li>
</ul>
Position is
<ul>
<li>partly outside and vertically in the middle of the cell</li>
</ul>
Conclusion: <code>findPos ()</code> functions only return position of "Content" text relative to table upper left corner. (I asked for content <u>cell</u>.) Why?
</div>
Content
</td>
</tr>
</table>
</body>
</html>
<head>
<title>Safari Javascript bug testcase</title>
<script type="text/javascript">
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 testfunction ()
{
leftPos = findPosX (document.getElementById('testcell'));
topPos = findPosY (document.getElementById('testcell'));
document.getElementById('testlayer').style.left = leftPos;
document.getElementById('testlayer').style.top = topPos;
}
window.onload = testfunction;
</script>
</head>
<body>
<table border="1px" width="100%">
<tr>
<td width="40%">
<span style="font-size:xx-large;">Header</span>
</td>
<td>
Logo goes here
</td>
</tr>
<tr>
<td id="testcell" colspan="2" height="500px">
<div id="testlayer" style="position:absolute; left:0px; top:0px; width:500px; height:200px; z-index=10; background-color:#8888FF;">
Layer should start in
<ul>
<li>upper left corner of Content cell</li>
</ul>
Position is
<ul>
<li>partly outside and vertically in the middle of the cell</li>
</ul>
Conclusion: <code>findPos ()</code> functions only return position of "Content" text relative to table upper left corner. (I asked for content <u>cell</u>.) Why?
</div>
Content
</td>
</tr>
</table>
</body>
</html>
relativ
relativ?
Remélem csak én értettem félre valamit...
Kösz:
Babszem.
erdekes
Az hogy az ablakhoz relativ az abszolut az tevedes!
Megoldás?
Köszönöm a segítséget.
A position:absolute leírását pedig a http://www.w3schools.com/css/pr_class_position.asp oldalról szedtem össze - egy kissé homályos ezek szerint. Jól értem, hogy a relative az elem eredeti pozíciójához képest ad meg pozíciót, míg az absolute a legutolsó (tartalmazó) pozícionált elemhez képest?
Kösz:
Babszem.
PS: Azért kíváncsi lennék, hogy a Javascript-et hogyan lehetett volna Safari alatt működésre bírni...