Webdesign 101 » Dynamisk HTML » DHTML modulbibliotek

Flyt til midten af browservinduet

Denen artikel beskriver udviklingen af en universalfunktion, der centrerer et element i et browservindue uden rulleskakter.

Et særligt tilfælde af flytning er, hvis vi ønsker at centrere et element. Statisk centrering - især vandret, som det, vi oftest har brug for - kan let klares med almindelige stylesheet formregler, som forklaret i artiklerne herom (Autocentrering). Her handler det om dynamisk centrering, altså noget, der foregår efter at websiden allerede er indlæst.



Rød kasse

Den matematik, der er tale om, er nem: Find ud af bredden af browservinduet, find ud af objektets bredde, træk de to fra hinanden og divider med 2 - så har du fundet x-positionen for objektets venstre kant. Ligeså med y-positionen. I JavaScript ser dette således ud:

var nyx = Math.floor((bbredde - obredde)/2)
var nyx = Math.floor((hhojde - ohojde)/2)

Math.floor() er blot en måde at runde ned til nærmeste heltal. bbredde står for browservinduets bredde, obredde står for objektets bredde. I sin helhed ser en funktion, der centrerer et objekt vandret i forhold til browservinduet således ud:

function centrerH(objekt){
var y = findY(objekt);
var x = findX(objekt);
var bbredde = windowWidth();
var obredde = objektB(objekt);
var nyx = Math.floor((bbredde - obredde) / 2);
  flytTil(objekt, nyx, y);
}

Centrer rød kasse vandret

Vi skal her benytte nogle egenskaber, vi ikke har brugt i de tidligere eksempler:

Objektets x-koordinat:
function findX(objekt){
var blok = findObjekt(objekt);
  if (ie4) {
    x = blok.pixelLeft;
  } 
  else {
    x = blok.left;
  }
  return(parseInt(x));  
}
- og ganske tilsvarende
Objektets y-koordinat:
function findY(objekt){
var blok = findObjekt(objekt);
  if (ie4) {
    y = blok.pixelTop;
  } 
  else {
    y = blok.top;
  }
  return(parseInt(y));  
}
Browservinduets bredde:
function windowWidth(){
  if (ie4 || ie5) {
    width = document.body.clientWidth;
  } 
  else {
    width = window.innerWidth;
  }
  return(parseInt(width));
}
- og ganske tilsvarende:
Browservinduets højde:
function windowHeight(){
  if (ie4 || ie5) {
    height = document.body.clientHeight;
  } 
  else {
    height = window.innerHeight;
  }
  return(parseInt(height));
}

Nogle browsere returnerer disse værdier på formen 400px, altså pixelantallet umiddelbart efterfulgt af px. Det er derfor, vi anvender JavaScript-funktionen parseInt(), der analyserer den returnerede værdi, renser den for andet end tal og giver et heltal som resultat.

Tilbage står objektets bredde - den variable obredde. Objektets bredde og højde er mærkeligt nok ikke en del af objektets style, så derfor kan vi ikke regne med noget brugeligt resultat af den variable blok ved at anvende vores findObjekt()-funktion. (Læs eventuelt websiden Blokvariable for at se sammenhængen mellem objektets ID og de variable objekt og blok). Vi er derfor nødt til at oprette en ny find-funktion, der ser således ud:

Find kerneobjektet:
function findKerneObjekt(objekt) {
var blok;
  if (dom) 
    blok = document.getElementById(objekt).style;
  else 
  if (msie) 
    blok = document.all[objekt].style;
  else 
  if (ns4) 
    blok = document.layers[objekt];
  return blok;
}

Jeg har i koden ovenfor gennemstreget det, der skal fjernes fra findObjekt()-funktionen for at få en funktion, der refererer til det, der kaldes "core object". Nu kan vi finde elementets bredde ved hjælp af:

Find objektets bredde:
function objektB(objekt){
var blok = findKerneObjekt(objekt);
  if (blok.offsetWidth) {
    b = blok.offsetWidth;
  } 
  else {
    b = blok.clip.width;
  }
  return(parseInt(b));
}
og tilsvarende for højden:
Find objektets højde:
function objektH(objekt){
var blok = findKerneObjekt(objekt);
  if (blok.offsetHeight) {
    h = blok.offsetHeight;
  } 
  else {
    h = blok.clip.height;
  }
  return(parseInt(h));
}

Husk at de fleste af disse funktioner er baserede på, at der først er indlæst en browsersniffer.

Nu har jeg præsenteret alle de funktioner, der skal til for at få centreringerne til at virke. Vi har allerede prøvet at centrere vandret. Centrering lodret foregår efter samme recept:

function centrerV(objekt){
var y = findY(objekt);
var x = findX(objekt);
var hhojde =windowHeight();
var ohojde = objektH(objekt);
var nyy = Math.floor((hhojde - ohojde) / 2);
flytTil(objekt, x, nyy);
}

Denne funktion duer kun til noget i et browservindue uden rulleskakter (scrollbars). Vindueshøjden er jo upåvirket af, hvor langt der scrolles, hvis indholdet ikke kan rummes i browservinduet. nyy antager derfor en værdi, der svarer til et vindue uden rulleskakter, og det vil altid være inden for skærmarealet.

Aht. afprøvning af hele centreringsfunktionen har jeg lavet en ekstra side til dette. Demo af centreringsfunktion.

1 2 3 4 5 6 7 8 9

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

Centreringsdemo

Da lodret centrering ikke kan de­mon­streres på en webside med rulle­skakter, har jeg lavet en demo­side: Centrerings­demo.

E-mail nyhedsbrev

Vælg normal præsentation

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