Sätt absolut position på <div> med javascript

Tråden skapades och har fått 10 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • 2004-10-13 12:39

Hejsan

Sitter och håller på med en hemsida där kunden vill ha en funktion som ska lösas. Jag har löst det bra i de plattformer jag provat, förutom på mac.

Problemet är att jag måste hämta positionen på ett element på sidan, ta den positionen och placaera ett annat element i förhållande till den positionen. Detta funkar inte riktigt som det ska när jag testade i IE5 på mac. Sjävla funktionen fungerar men positionen förskjuts.

Troligen är det något här som IE tolkar annorlunda på mac än på pc som jag måste kompensera för. Läste någonstans att offsetParent tolkas "fel" när man försöker läsa ut en position ur en <td>. Någon som vet något om detta? Om det inte går att lösa så måste hela idén skrotas nämligen.

  • Medlem
  • Karlstad
  • 2004-10-13 12:47

Om du använder Dreamweaver så finns det en extension som heter "Snap Layer" här:
http://projectseven.com/extensions/index.htm

Den är gratis och genererar javascript som "låser" en absolute positioned (ingen annan sort!) div till nästan vilket annat element som helst.

Vet dock inte om den åxå har problem med IE/Mac. Å andra sidan: Har kunden inga besökare med den läsaren, så kanske det inte spelar nån roll....

Är det bara IE på Mac som krånglar? Har du testat med Firefox och Safari på Mac? Jag skulle tro att en stor majoritet av Mac-användarna kör med något av dom två istället.

  • Medlem
  • 2004-10-13 13:00

Hmm

Nja, jag kör inte dreamweaver, kör allt för hand. Problemet är inte att scriptet inte fungererar, problemet är att värdena blir olika beroende på miljö vilket innebär att det ser helt fel ut i macmiljö. Många av besökarna kommer också sitta i macmiljö, det är jag säker på. Företaget som ska ha sidan (och som jag också sitter hos nu) har också många macar i användning, men ingen som kör nått annat än IE vad jag vet. Jag har inte testat i andra läsare, får nog ladda ner och testa.

  • Medlem
  • Karlstad
  • 2004-10-13 13:06
Ursprungligen av kenny:

Hmm

Nja, jag kör inte dreamweaver, kör allt för hand. Problemet är inte att scriptet inte fungererar, problemet är att värdena blir olika beroende på miljö vilket innebär att det ser helt fel ut i macmiljö.

Bara för att klargöra: Det har inget med plattformen att göra, utan med vilken version av webbläsaren använder.

Tyvärr kan inte jag ett jota om javascript, så hoppas nån anna kan ge ett tips. Men tror du inte det skulle hjälpa om du visat koden?

  • Oregistrerad
  • 2004-10-13 13:18

Jag tycker du skall testa att validera html först. Efter det så testa att omstrukturera lite och se om du kan hitta en lösning på layouten som de olika webläsarna tolkar likadant. Det brukar fungera.

Vill du har mer specifik hjälp så får du visa ett exemple så skall du nog få en lösning.

IE Mac har alltid varit dyslektikern bland webläsarna.

  • Medlem
  • 2004-10-13 13:28

Plattform eller ej, det fungerar i varje fall inte som det är tänkt.

Problemet är att det är lite svårt att omstrukturera eftersom grejjerna är xml som ritas upp med hjälp av xsl.

Här är skriptet som jag använder för att läsa ut en position samt att placera ut det andra elementet (Det översta för att placera, de tre understa för att hämta positionen);

function openBig(elmntId,actn,strBtnTxt){
posX = getAbsX(document.getElementById(elmntId)) - 13;
posY = getAbsY(document.getElementById(elmntId)) - 13;
if (actn == 'over'){
document.getElementById("bigBtn").innerHTML = strBtnTxt;
document.getElementById("bigBtn").style.top = posY + "px";
document.getElementById("bigBtn").style.left = posX + "px";
document.getElementById("bigBtn").style.display = "inline";
}
else {
document.getElementById("bigBtn").style.display = "none";
}
}

function getAbsX(elmnt){
return parseInt(elmnt.x) ? elmnt.x :
getAbsPos(elmnt,"Left");
}

function getAbsY(elmnt){
return parseInt(elmnt.y) ? elmnt.y :
getAbsPos(elmnt,"Top");
}

function getAbsPos(elmnt,strWhich){
iPos = 0;
while (elmnt != null){
iPos += elmnt["offset" + strWhich];
elmnt = elmnt.offsetParent;
}
return iPos;
}

problemet är att värdena posX och posY blir olika varför elementet placeras förskjutet. Det är det jag måste kompensera för på något sätt, men jag är inte helt hundra på hur.

  • Oregistrerad
  • 2004-10-13 13:35

Underlättar om du också kan visa html + css

  • Medlem
  • 2004-10-13 13:39

-------LOOPEN SOM SKRIVER UT XML-DATA SAMT RITAR TABELLEN VARIFRÅN POSITIONEN HÄMTAS-------

<xsl:for-each select="./group">
<xsl:sort select="@sort" data-type="number"/>
<xsl:if test="@name!='IMAGE'">

<td width="10" style="padding-top:27px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="10" height="1">
<tr>
<td class="navigationLine" height="1" width="10"><img src="/functions/administration/images/transimage.gif" width="1" height="1"/></td>
</tr>
</table>
</td>
<td width="54" height="54">
<xsl:attribute name="onMouseOver">
openBig(this.id,'over','<xsl:value-of select="@name"/>')
</xsl:attribute>
<xsl:attribute name="id">
<xsl:value-of select="@id"/>
</xsl:attribute>
<xsl:attribute name="style">
background-image:url(<xsl:value-of select="groupdata/data/row/@pagethumb"/>);
background-repeat:no-repeat;
</xsl:attribute>
<a>
<xsl:attribute name="href">
/default.asp?groupid=<xsl:value-of select="@id"/>
</xsl:attribute>
<xsl:attribute name="onclick">
window.location.href = '/default.asp?groupid=<xsl:value-of select="@id"/>';
</xsl:attribute>
<div style="width:54px; height:54px;"></div>
</a>
</td>

</xsl:if>
</xsl:for-each>
-------------------------------

---------LAGRET SOM SKA PLACERAS UT----------
<div onMouseOut="openBig(this.id,'out');" align="center" id="bigBtn">
<xsl:attribute name="style">
position:absolute;
top:0px;
left:0px;
width:80px;
height:80px;
background-image:url(/images/bigcircle.jpg);
background-repeat: no-repeat;
visibility:visible;
z-index: 45;
font-family:verdana;
font-size:10px;
display: none;
overflow: hidden;
padding-top: 32px;
</xsl:attribute>
<xsl:attribute name="onclick">
window.location.href = '/default.asp?groupid=<xsl:value-of select="@id"/>';
</xsl:attribute>
 
</div>
----------------------------

Det där bör väl räcka? Enklast lösningen vore väl kanske iofs att kolla vilken läsare som används, och ge olika värden till förskjutningen utefter detta.

  • Oregistrerad
  • 2004-10-13 13:59

Kan du inte ta den färdiga html-en? Det behöver inte vara hela dokumentet bara den delen som loopen skriver ut.

Orkar inte riktigt parsa din xsl.

Kolla CSS

Jag tror problemet mer är CSS än JavaScript.
Börja med att sätta margin, padding till 0 i CSS body,

body{margin:0; padding:0;}

Kolla sen om top:0 och left:0 verkligen är 0 på alla läsare du testar mot.
--
Olof

----
If God had intended Man to program we would be born with serial I/O ports.

1
Bevaka tråden