Webdesign 101 » Dynamisk HTML » DHTML modulbibliotek

Flyt elementer med en universalfunktion

Denne artikel forklarer, hvorledes laver en universalfunktion, du kan bruge til at flytte et vilkårligt element på websiden. Du opretter en blokvariabel, der repræsenterer et vilkårligt element. Derigenenm kan du være ligeglad med, hvilken browser, der er tale om. Din funktion virker i alle (nyere) browsere.

Blokvariable

Øvelsen med oprettelse af blokvariable går via oprettelsen af en universalfunktion til at flytte et HTML-element.

Denne øvelse går ud på at flytte den blå kasse fra den oprindelige position - 0 pixel fra websidens venstre margin - til en ny position lidt længere inde på siden - 400 pixel fra marginen.

Du kan kun flytte på et relativt eller absolut positioneret element. De kulørte kasser her på siden er relativt positionerede. Det har jeg gjort for at flette kasserne ind i teksten på en passende måde.

Du skal derfor være opmærksom på, at de afstande, jeg flytter de kulørte kasser, er i forhold til den placering, kasserne har, når siden indlæses.

Det vil sige, det er værdien left:10px, der skal ændres til left:400px. Jeg starter med det lette, oprettelse af en trigger-funktion, der skal flytte kassen ved et klik:

Blå
kasse

Flyt blå kasse

(<a href="javascript:flytIE()">Flyt</a>)

Den funktion, der udløses, ser således ud:

  function flytIE(){
    document.all["bluebox"].style.left="400"
  }

Forskellige metoder

Problemet med denne er kun, at det er Microsofts model for ændring af left-egenskaben, jeg bruger her. Det betyder, at denne funktion ikke flytter den blå kasse, hvis denne webside betragtes med en browser, der ikke kommer fra Microsoft. (Opera-browseren bygger dog på Microsofts browser-engine, så de fleste formregler manipuleres på samme måde som i ældre Microsoft browsere (IE4, IE5)).

Skal jeg have denne funktion til at fungere i Netscape 4, ser den således ud:

function flytNS(){
document.layers["bluebox"].left="400"
}

- mens moderne browsere - Netscape 6, Internet Explorer 5, 5.5 og 6, Mozilla 1.x, Opera 5 m.fl. bruger en helt tredie medtode til at ændre på et elements egenskaber:

Rød
kasse

Flyt rød kasse

function flytDOM(){
document.getElementById('redbox').style.left="400";
}

Med den viden, vi har fra foregående side (Universalfunktioner), kan vi nu lynhurtigt lave en funktion, der flytter den blå kasse tilbage, hvor den kom fra:

function move(objekt){
  if (dom)
    document.getElementById(objekt).style.left="0";
  if (msie)
   document.all[objekt].style.left="0"
  if (ns4)
    document.layers[objekt].left="0"
}

(Jeg forudsætter her, at browsersnifferen er indlæst på forhånd).

Flyt den røde kasse tilbage kalder nu funktion move('redbox') med parameteren 'redbox'.

Flere parametre

Når vi skal flytte et element, er der - i modsætning til vis og skjul - tale om flere end én parameter. Vi har nu dels elementets ID, men også en left-afstand og en top-afstand, hvis vi også skulle flytte vertikalt. Således kommer den strømlinede flyttefunktion til at se således ud:

flytTil(objekt,x,y)

- hvor objekt som hidtil repræsenterer det element, vi vil flytte, mens x og y udgør det koordinatpunkt, hvortil vi vil flytte elementet. Overfladisk set er det tilstrækkeligt at passere x- og y-koordinaterne til funktionen på følgende måde:

function moveEnGangTil(objekt,x,y){
  if (dom)
    document.getElementById(objekt).style.left=x;
    document.getElementById(objekt).style.top=y;
  if (msie)
   document.all[objekt].style.left=x
   document.all[objekt].style.top=y
  if (ns4)
    document.layers[objekt].moveTo(x,y)
}

- som fungerer udmærket, hvis vi passerer x og y til funktionen sammen med elementets id:

Grøn
kasse

Flyt grøn kasse.

<a href="javascript:moveEnGangTil('greenbox',400,-100)">
Flyt ën gang til</a>

Bemærk her, at Netscape 4 gør det let for os, fordi denne browser har en indbygget JavaScript funktion, moveTo(x,y) (og i øvrigt også en tilsvarende moveBy(dx,dy)).

Blokvariable

I koden herover har jeg markeret med rødt de objektreferencer, der altid er ens i de 3 forskellige tilfælde, vi beskæftiger os med. Skulle vi gøre dette en smule smartere, kunne vi oprette en variabel, der fik forskellig værdi, alt efter hvilken browser, der var tale om:

function findObjekt(objekt) {
var blok;
  if (dom) 
    blok = document.getElementById(objekt).style;
  else 
  if (ie4) 
    blok = document.all[objekt].style;
  else 
  if (ns4) 
    blok = document.layers[objekt];
  return blok;
}

findObjekt(objekt)-funktionen, der forudsætter at browsersnifferen er indlæst, giver den variable blok en forskellig værdi, alt efter om det er den ene, den anden eller den tredie type browser, der er tale om. Herefter kommer en universal flyt-element-til-funktion til at se således ud:

function flytTil(objekt, x, y){
var blok = findObjekt(objekt);
  if (dom) {
    blok.left=x
    blok.top=y
  }
  else
  if (ie4) {
    blok.pixelLeft = x;
    blok.pixelTop = y;
  }
  if (ns4) {
    blok.moveTo(x,y);
  }
}

- og funktionskaldet ville se således ud:

<a href="javascript:flytTil('tealbox',400,-50)">
Flyt turkis kasse til 400,-50</a>

Turkis
kasse

Flyt turkis kasse til 400,-50

For at gennemskue dette, er det nødvendigt for det første at indse, at den variable objekt i ethvert konkret tilfælde erstattes af den variable, der passeres til funktionen fra funktionskaldet - i det aktuelle tilfælde tealbox. For det andet kan det være nyttigt at visualisere, hvad blok i grunden er for en størrelse. Hvis vi gør det for blot én af linierne får vi:

document.getElementById('tealbox').style.left=x

for den linie, der flytter den turkis kasse til en ny x-position i en W3C DOM kompatibel browser.

Konklusion

Vi har nu nået, hvad vi ville, nemlig at lave en universalfunktion, der flytter et vilkårligt element fra en vilkårlig position til en vilkårlig anden position.

Ofte vil vi imidlertid ønske at lave en glidende flytning, således at elementet bevæger sig hen over skærmen i stedet for at flytte sig i ét hug. Hvordan vi laver det er emnet for næste artikel.

1 2 3 4 5 6 7 8 9

Oprettet: 24. juni 2002
Senest opdateret: 21. maj 2003

E-mail nyhedsbrev

Vælg normal præsentation

Vis siden som den ser ud i udskrift Send siden til udskrift.