Avatar billede b_ Nybegynder
28. november 2006 - 13:31 Der er 17 kommentarer og
1 løsning

AJAX problem med position

hejsa,

Jeg har et udmærket script som viser noget indhold(tekst) fra en database når man kører musen hen over et billede.
Det virker som det skal når man er ved toppen af siden i ens browser, men så snart man begynder at scrolle lidt og kører musen over et billede kommer teksten frem højere oppe.
Hvordan kan man justere det så det spiller både når man er i toppen og når man har scrollet lidt?

Her er scriptet (test er id'et på min <body>) og det kaldes "onmouseover=\"startRequest(".$row->test_id.", event);\" onmouseout=\"removeDivElement()\"":

var xmlHttp;
var posX;
var posY;

function createXMLHttpRequest() {
  if (window.ActiveXObject) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest) {
      xmlHttp = new window.XMLHttpRequest();
  }
}

function startRequest(test_id, event) {
  posX = mouseX(event);
  posY = mouseY(event);
  createXMLHttpRequest();
  xmlHttp.onreadystatechange = handleStateChange;
  xmlHttp.open("GET", "hent_detaljer.php?id="+test_id, true);
  xmlHttp.send(null);
}

function handleStateChange() {
  if(xmlHttp.readyState == 4) {
      if(xmlHttp.status == 200) {
        //alert("Serveren svarede: "+ xmlHttp.responseText);
        createDivElement(xmlHttp.responseText);
      }
  }
}

function createDivElement(text) {
  removeDivElement();
  var textElem = document.createTextNode(text);
  var elem = document.createElement("div");
  elem.setAttribute("id", "detaljer");
  elem.appendChild(textElem);       
  var parentElem = document.getElementById("test");
  parentElem.appendChild(elem);
 
  document.getElementById("detaljer").style.width = "200px";
  document.getElementById("detaljer").style.position = "absolute";
  document.getElementById("detaljer").style.backgroundColor = "#ccccff";
  document.getElementById("detaljer").style.border = "1px solid black";
  document.getElementById("detaljer").style.padding = "10px";
  document.getElementById("detaljer").style.fontSize = "11px"; 
  document.getElementById("detaljer").style.left = posX+"px";
  document.getElementById("detaljer").style.top = posY+"px";
}

function removeDivElement() {
  if (document.getElementById("detaljer")) {
      var elem = document.getElementById("detaljer");
      var parentElem = document.getElementById("test");
      parentElem.removeChild(elem);
  }
}

function mouseX(evt) {
  return evt.clientX;
}

function mouseY(evt) {
  return evt.clientY;
}

P.S
I hent_detaljer.php er opkaldet til databasen
Avatar billede olebole Juniormester
28. november 2006 - 14:29 #1
<ole>

Forudsat, du bruger en fuld DTD (DocType Definition) i begyndelsen af dokumentet, indeholder document.documentElement.scrollTop antal pixels, der er scrollet. Mon ikke det bliver noget i retning af:
    document.getElementById("detaljer").style.top = (posY+document.documentElement.scrollTop) +"px";


/mvh
</bole>
Avatar billede olebole Juniormester
28. november 2006 - 14:30 #2
- og horisontalt hedder den scrollLeft  ;o)
Avatar billede mr_bula Nybegynder
28. november 2006 - 15:38 #3
Jeg bruger http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd.

Hmm synes det giver mening og ser fornuftigt ud, men der sker ingenting eller den gør det samme som før nå man scroller kom outputtet for højt
Avatar billede mr_bula Nybegynder
28. november 2006 - 15:39 #4
Nå kan se jeg poster med min lillebrors brugernavn ;) ikke første gang han har gjort det nummer mens man er væk
Avatar billede b_ Nybegynder
28. november 2006 - 18:53 #5
Det vil sgu ikke følge med... Andre der har et bud?
Avatar billede olebole Juniormester
29. november 2006 - 11:17 #6
Det er der nok ikke - for der er ikke andre måder at gøre det på  =)
Prøv at lægge et link til siden
Avatar billede b_ Nybegynder
29. november 2006 - 15:42 #7
Ok =)

Sidder og arbejder med det lokalt...

Jeg har tilføjet understående til funktionen createDivElement:
  document.getElementById("detaljer").style.top = (posY+document.documentElement.scrollTop) +"px";
  document.getElementById("detaljer").style.top = (posX+document.documentElement.scrollLeft) +"px";

Men skal scrollen ikke også defineres i startRequest?
Avatar billede b_ Nybegynder
29. november 2006 - 15:43 #8
document.getElementById("detaljer").style.top = (posX+document.documentElement.scrollLeft) +"px"; er selvfølgelig document.getElementById("detaljer").style.left = (posX+document.documentElement.scrollLeft) +"px";
Avatar billede olebole Juniormester
29. november 2006 - 15:52 #9
Nej, det skal kun stå der, hvor du har skrevet det. Du er nødt til at uploade et eksempel  =)
Avatar billede b_ Nybegynder
29. november 2006 - 15:56 #10
Ok, laver lige hurtigt et lille eksempel
Avatar billede b_ Nybegynder
29. november 2006 - 16:11 #11
Det er uden database kald mm. men det har ingen betydning....

http://www.dinbror.dk/ajax/

Virker fint så længe du ikke scroller.... Prøv at scrolle lidt nedaf, og du vil se
Avatar billede olebole Juniormester
30. november 2006 - 11:43 #12
Først flytter du elementet det rigtige sted hen - og bagefetr flytter du det hen, hvor du lagde det, før du spurgte:


  document.getElementById("detaljer").style.top = (posY+document.documentElement.scrollTop) +"px";
  document.getElementById("detaljer").style.left = (posX+document.documentElement.scrollLeft) +"px";
  document.getElementById("detaljer").style.left = posX+"px";
  document.getElementById("detaljer").style.top = posY+"px";

Slet de to sidste linjer, så virker det uden tvivl  ;o)
Avatar billede b_ Nybegynder
30. november 2006 - 11:59 #13
Haha, det tænkte jeg også på at det var dobbeltkonfekt, men så spurgte jeg en ven i stedet for at teste, og han sagde det var lige meget...

Du er en skat - smid et svar
Avatar billede b_ Nybegynder
30. november 2006 - 12:01 #14
Et lille ekstra spg:

Ved du om det på nogen måde er muligt at lave noget style/tags i outputfeltet? Ved godt at når jeg nu gør det vha af ajax har fortolkeren tolket siden
Avatar billede b_ Nybegynder
02. december 2006 - 18:00 #15
Ole: Selvom du ikke kan svare på mit ekstra spg, må du gerne ligge et svar så du kan få dine velfortjente point
Avatar billede b_ Nybegynder
06. december 2006 - 10:51 #16
OLE..... vil gerne lukker spørgsmålet, så smider du ikke et svar
Avatar billede olebole Juniormester
06. december 2006 - 14:06 #17
Sorry ... jeg har ikke fået mail om dette spm  :o|

Stylesheets udenfor head-elementet er ikke valid kode. Ifølge standarden må style-elementer (og link-elementer, der importerer stylesheets) kun findes i head-elementet  :)
Avatar billede b_ Nybegynder
06. december 2006 - 17:06 #18
Ja men ved du om det på nogen måde er muligt i mit tilfælde? Outputtet er to ting der bliver hentet fra en database. Jeg vil så gerne have den ene med fed og den anden på linjen under.

<b><br /> og /n tags bliver bare udskrevet som de står da siden jo er blevet fortolket!
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