Avatar billede newcoma Nybegynder
18. marts 2011 - 18:41 Der er 19 kommentarer og
1 løsning

jQuery offset positionning i IE

Hej
Jeg har følgende script som laver et tooltip der følger musen. Men i IE 7 og 8 bliver popup positioneret helt anderledes. Er der nogen der ved hvorfor?

$(document).ready(function(){
$(".element").mousemove(function(e) {
$(this).children('.popup').css({
top: (e.pageY - this.offsetTop -45) + "px",
left: (e.pageX - this.offsetLeft -480) + "px"
});
});

html
<div class="element>
<div class="popup"></div>
</div>

css
.element {position:relative;}
.popup {position:absolute;}
Avatar billede olebole Juniormester
18. marts 2011 - 19:03 #1
<ole>

Hvad skriver du før <html>? Ligger divet med klassen 'element' som direkte barn af body?

/mvh
</bole>
Avatar billede olebole Juniormester
18. marts 2011 - 19:07 #2
Hehe ... Explorer understøtter ikke pageY og pageY, men clientX og clientY
Avatar billede newcoma Nybegynder
18. marts 2011 - 19:15 #3
element er direkte barn af body og der står ikke noget før html andet end doctypen. <!doctype html>
Avatar billede olebole Juniormester
18. marts 2011 - 19:16 #4
- og så mangler du vist en }). Jeg formoder, dette vil virke bedre:


$(document).ready(function(){
    $(".element").mousemove(function(e) {
        $(this).children('.popup').css({
            e = e ? e : event;
            top: ((e.pageY?e.pageY:e.clientY) - this.offsetTop -45) + "px",
            left: ((e.pageX?e.pageX:e.clientX - this.offsetLeft -480) + "px"
        });
    )};
});



- men jeg er ikke sikker, da jeg af gode grunde ikke bruger jQuery.

Husk i øvrigt at slå fejlmeldinger til i IE. Ellers kan du ikke udvikle i IE.

Når der kommer en gul trekant i nederste venstre hjørne, klikker du på den. Det fremkalder en dialog, der viser fejlen. Sæt fluebenet "Vis altid denne meddelelse ved fejl"
Avatar billede olebole Juniormester
18. marts 2011 - 19:17 #5
Læg også mærke til min indrykning. Det giver en overskuelig kode, der er lige til at debugge. Bruger du ikke en logisk indrykning, skyder du dig selv i foden  *o)
Avatar billede newcoma Nybegynder
18. marts 2011 - 19:34 #6
Jeg kan ikke få din kode til at virke desværre...
Avatar billede olebole Juniormester
18. marts 2011 - 20:11 #7
Hvad betyder "virker ikke"? Tal til os!  =)
Avatar billede newcoma Nybegynder
18. marts 2011 - 20:14 #8
missing : after property id
e = e ? e : event;
Avatar billede olebole Juniormester
18. marts 2011 - 20:19 #9
Kanon ... så let er kommunikation  *o)


$(document).ready(function(){
    $(".element").mousemove(function(e) {
        e = e ? e : event;
        $(this).children('.popup').css({
            top: ((e.pageY?e.pageY:e.clientY) - this.offsetTop -45) + "px",
            left: ((e.pageX?e.pageX:e.clientX - this.offsetLeft -480) + "px"
        });
    )};
});

Avatar billede olebole Juniormester
19. marts 2011 - 20:01 #10
Hjalp det?
Avatar billede newcoma Nybegynder
20. marts 2011 - 16:37 #11
Det virkede :).

Kan du forklare hvad e.pageY?e.pageY:e.clientY og  e = e ? e : event; gør?
Avatar billede olebole Juniormester
20. marts 2011 - 17:27 #12
Ja, der eksisterer to forskellige event modeller (IE's og resten). Min kode understøtter begge.


e = e ? e : event;

// Dette er en if/else konstruktion, som svarer til:

if (e) e = e;
else e = event



I IE medsendes event objektet ikke til en event handler, men ligger som global variabel event eller window.event.

IE understøtter ikke pageX og pageY, men clientX og clientY. Derfor vælger jeg også her de understøttede properties med if/else short hand konstruktionen, vist ovenfor
Avatar billede newcoma Nybegynder
21. marts 2011 - 12:03 #13
Ups der var jeg lidt for hurtig. Der er ikke nogen forskel. '.popup' er stadig positioneret ca. 200px længere til venstre i IE...
Avatar billede olebole Juniormester
21. marts 2011 - 18:33 #14
Jeg kan ikke se, hvad det kan skyldes udfra den kode, du har skrevet her  =)
Avatar billede newcoma Nybegynder
22. marts 2011 - 09:24 #15
Hvis jeg blot sætter left:100px; på .popup er der samme afstand i ie og ff.
Avatar billede olebole Juniormester
22. marts 2011 - 15:40 #16
Hvis ikke du forstod min forrige kommentar må jeg prøve med: Hvis din kode eller drop det!
Avatar billede newcoma Nybegynder
22. marts 2011 - 15:55 #17
$(document).ready(function(){
    $(".element").mousemove(function(e) {
        e = e ? e : event;
        $(this).children('.popup').css({
            top: ((e.pageY?e.pageY:e.clientY) - this.offsetTop -45) + "px",
            left: ((e.pageX?e.pageX:e.clientX) - this.offsetLeft -480) + "px"
        });
    )};
});


css
.element {position:relative;}
.popup {position:absolute;}
Avatar billede olebole Juniormester
22. marts 2011 - 16:03 #18
Her dropper jeg tråden!
Avatar billede newcoma Nybegynder
22. marts 2011 - 16:08 #19
Ok jeg forstod ikke hvad du mente så. Smid et svar så får du point.
Avatar billede newcoma Nybegynder
31. maj 2011 - 11:16 #20
Lukker
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