antibiomatika

IE og max-width

2002-06-27 15:34

Som de fleste av oss vet, er Internet Explorers støtte for CSS i beste fall mangelfull. En av de tingene som har irritert meg mest, er det fullstendige fraværet av støtte for min-width og max-width.

Frustrerende nok, dersom man faktisk ønsker å begå et design som ikke er basert på fastbredde. Det fikk meg til å skrive en løsning, som om ikke perfekt, hvertfall hjelper på litt av problemet.

Selve skriptet er ikke spesielt stort, eller bør ikke være så altfor vanskelig å forstå.

function controlWidth(minWidth, maxWidth, layerId){ 
  var dObj = document.getElementById(layerId); 
  if ( (dObj.style.pixelWidth <= minWidth)
        && (minWidth != 0) && !dObj.style.minWidth)){
     dObj.style.pixelWidth = minWidth; 
  } else if ((dObj.style.pixelWidth > maxWidth) 
              && (maxWidth != 0) && (!dObj.style.maxWidth)){
    dObj.style.pixelWidth = maxWidth; 
  }
  return false; 
}

Selve funksjonen trenger tre argument:

• minWidth: minimumsbredde
• maxWidth: maksimumsbredde
• layerId: layeret som skal breddebegrenses

Det siste man så trenger, for å få dette til å virke, er å kalle scriptet når vinduet endrer størrelse, og/eller dokumentet er ferdiglastet

function widthEventHandler(){
  var minWidth = 150;
  var maxWidth = 600;
  var layerId = 'someelement';
  controlWidth(minWidth,maxWidth,layerId);
}

window.onload = widthEventHandler;
window.onresize = widthEventHandler;

Vanskeligere er det rett og slett ikke, men om du vil ha et ferdigtygd eksempel finnes det til nedlasting her: http://antibiomatika.net/files/minmax.zip

Kommentarer

Det er ikke åpent for å legge til flere kommentarer.