Avatar billede jvh Nybegynder
25. juli 2002 - 13:19 Der er 18 kommentarer og
1 løsning

offsetTop i ie6.0

Hejsa

Jeg slås en del med offsetTop i IE6.0. Den fungerer fuldstændig efter hensigten sålænge min div holdes i body scope, men når jeg flytter den ind i en tabel, giver div.offsetTop ikke det rigtige tal længere.

Prøv følgende kode:
<html>
    <head>
    <script>
    function posTop(e) {
        if(document.layers) return(e.pageY);
        var i=e.offsetTop;
        if(e.offsetParent!=null) i+=posTop(e.offsetParent);
        return(i);
    }
    function doOnload() {
        var n = posTop(document.all.relativeLayer);
        document.all.test.style.top = n;
    }
    </script>
    </head>
<body style="background-color:#cccccc" onload="doOnload()">
<table border="1">
<tr>
<td>
<div><h1>blah blah blah</h1></div>
</td></tr>
<tr><td style="background-color:red">
<div><h1>blah blah blah</h1></div>
<div id="relativeLayer" name="relativeLayer" style="position:relative">relativ</div>
</td></tr></table>
<div id="test" name="test" style="position:absolute;left:10;top:300">jeg skal stå over relativ</div>
</body>
</html>

Er der nogen der ved hvordan jeg får div'en test til at flytte sig op over div'en relativeLayer?
Avatar billede nikolajdu Nybegynder
25. juli 2002 - 13:26 #1
Mon ikke det virker hvis du trækker 12 fra n og fjerner style="position:relative"

document.all.test.style.top = n-12;
Avatar billede nikolajdu Nybegynder
25. juli 2002 - 13:27 #2
Så skal du nok også lægge lidt til offsetLeft....
Avatar billede jvh Nybegynder
25. juli 2002 - 13:31 #3
Tak for svaret, nikolajdu, men det dutter ikke.

Position skal være relative, og jeg kan ikke ane om det lige er 12 eller et andet tal der skal trækkes fra. Jeg er interesseret i en generel løsning, eller i det mindste på en forklaring på hvordan IE beregner offsetTop.
Avatar billede jakoba Nybegynder
25. juli 2002 - 13:34 #4
det er sikrere at sige:
        var i = parseInt(e.offsetTop);
da offsetTop ofte lagres med måleenhed på (eg: '15px')
Avatar billede jakoba Nybegynder
25. juli 2002 - 13:39 #5
lav evt funktionen  posTop  om til:

    function posTop(e) {
        if(document.layers) return(e.pageY);
        var i=0;
        do {
            i += parseInt( e.offsetTop );
        } while ( (e=e.offsetParent) );
        return(i);
    }

Det er hurtigere og der er ikke vældig mange stakpladser i javascript at lave rekursion i.
Avatar billede jvh Nybegynder
25. juli 2002 - 13:43 #6
Gode forslag, jakoba :-)

Jeg kan som kuriosum fortælle, at jeg så følgende, lidt provokerende (!) løkke andet sted: for(e;e;e=e.offsetParent)
Meget nydelig, synes jeg!

Som sagt er det gode optimeringer, men desværre løser de ikke mit problem.
Avatar billede jakoba Nybegynder
25. juli 2002 - 13:49 #7
Ja den er da kreativ :-))

kan du evt pege på en side med et eksempel på problemet, for som du beskriver burde det virke fint.
Avatar billede jvh Nybegynder
25. juli 2002 - 13:52 #8
Jeg forstår vist ikke hvad du mener? Jeg har i min problemformulering inkluderet et eksempel på det, der ikke virker... Hvis du gemmer det som en .htm fil, og afprøver i en ie6.0, skulle du gerne kunne se problemet.

Tak iøvrigt, fordi du gider kigge på det - også til dig, nikolajdu.
Avatar billede jakoba Nybegynder
25. juli 2002 - 14:26 #9
prøv at debugge med den nedenfor. I min IE4 virker den fint og giver

offsetTop=58 elm=DIV
offsetTop=0 elm=TD
offsetTop=66 elm=TR
offsetTop=172 elm=TABLE
offsetTop=0 elm=BODY
n=296

<html>
<head>
<META NAME="Generator" CONTENT="Stone's WebWriter 3">
<script type='text/javascript'>
    function posTop(e) {
        if(document.layers) return(e.pageY);
        var i=e.offsetTop;
        document.dbg.debug.value += "offsetTop="+e.offsetTop +" elm="+e.tagName +"\n";
        if(e.offsetParent!=null) {
            i+=posTop(e.offsetParent);
        }
        return(i);
    }
    function doOnload() {
        var n = posTop(document.all.relativeLayer);
        document.dbg.debug.value += "n="+n;
        document.all.test.style.top = n;
    }
</script>
</head>
<body style="background-color:#cccccc" onload="doOnload()">
<form name='dbg'>
<textarea name='debug' rows='10' cols='50' wrap='logical'></textarea>
</form>
<table border="1">
<tr>
<td>
<div><h1>blah blah blah</h1></div>
</td></tr>
<tr><td style="background-color:red">
<div><h1>blah blah blah</h1></div>
<div id="relativeLayer" name="relativeLayer" style="position:relative">relativ</div>
</td></tr></table>
<div id="test" name="test" style="position:absolute;left:10;top:300;background-color:yellow">jeg skal stå over relativ</div>
<!-- WebWriter AutoDato -->Opdateret: 25.7.2002<!-- WW -->
</body>
</html>

mvh JakobA
Avatar billede jvh Nybegynder
25. juli 2002 - 14:32 #10
Here goes output resultat:

offsetTop=386 elm=DIV
offsetTop=0 elm=BODY
n=386
Avatar billede jvh Nybegynder
25. juli 2002 - 14:33 #11
Og test div'en står iøvrigt ikke korrekt.
Avatar billede jakoba Nybegynder
25. juli 2002 - 15:00 #12
hvis test div'en ikke står noget i retning af 386 px nede kunne det være fordi du mangler 'px' der du assigner værdi til test.style.top :
        document.all.test.style.top = n +'px';
Avatar billede jvh Nybegynder
25. juli 2002 - 15:03 #13
Godt forslag, men det hjalp desværre ikke :-(
Avatar billede nikolajdu Nybegynder
25. juli 2002 - 15:41 #14
Nu må jeg høre. I hvilken sammenhæng skal det bruges?? Nu har jeg leget med det i timer og er helt rundt på gulvet. :))
Avatar billede jakoba Nybegynder
25. juli 2002 - 15:48 #15
et meget langt ude gæt: fjern name= og style fra den <div :
<div id="relativeLayer">relativ</div>
Avatar billede nikolajdu Nybegynder
25. juli 2002 - 15:50 #16
hov hov...

posTop er en i forvejen defineret funktion hos MS og da jeg tidlgere ved fra Jakoba at ikke alle funnktioner kan omdefineres i IE, så er det ihvertilfald noget at kigge på. :)

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/postop.asp

/Nikolaj
Avatar billede jvh Nybegynder
25. juli 2002 - 15:57 #17
Hejsa

Det hjalp at fjerne style="position:relative". Den var åbenbart unødvendig, og fik åbenbart IE6.0 til at regne forkert.

Jeg forstår stadig ikke hvorfor ie6 regner forkert med position:relative, men når nu det virker uden, så er jeg faktisk en glad mand.

Jeg vil sige tak til jer begge 2 for hjælpen. Det var nikolajdu der først kom med forslaget om at fjerne position:relative, så jeg mener pointene bør gå til ham (sorry, jakoba)
Avatar billede jakoba Nybegynder
25. juli 2002 - 16:08 #18
helt fint.
Avatar billede nikolajdu Nybegynder
25. juli 2002 - 16:12 #19
Jeg deler med glæde med jakoba.

Dog bør du nok alligevel lige ændre navnet på din topPos() :)

/Nikolaj
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester