Dynamiczny HTML - odcinek 2

W tym odcinku prezentujemy funkcjΩ moveBy()

1. Zasada dzia│ania.

Funkcja moveBy('nazwaDiv', dx, dy) przesuwa blok o dx pikseli w poziomie i dy w pionie. Na przyk│ad wywo│anie moveBy('naszDiv',10,0) przesuwa blok naszDiv o 10 pikseli w prawo, a wywo│anie moveBy('naszDiv',-10,-5) o dziesiΩµ pikseli w lewo i piΩµ pikseli w g≤rΩ.

W stosunku do funkcji moveTo() z poprzedniego odcinka r≤┐nica jest taka, ┐e zamiast przesuwaµ blok do pozycji (dx,dy), warto╢ci te zostaj▒ dodane do aktualnych wsp≤│rzΩdnych bloku.

2. Rozwi▒zanie dla Netscape Navigatora.

Bloki w Navigatorze posiadaj▒ dwa atrybuty opisuj▒ce pozycjΩ na ekranie: left i top. By zmieniµ warto╢ci tych atrybut≤w o zadan▒ liczbΩ pikseli, nale┐y odczytaµ ich warto╢ci i dodaµ do nich odpowiednio dx i dy. Tak wiΩc odpowiedni fragment funkcji dla Navigatora wygl▒da nastepuj▒co:

function moveBy(ident,dx,dy) {
  if(nn4) {
    document.layers[ident].left = document.layers[ident].left  + dx;
    document.layers[ident].top = document.layers[ident].top + dy;
  } //......
 }
	

3. Rozwi▒zanie dla Internet Explorera.

Explorer ma zdefiniowane cztery atrybuty opisuj▒ce aktualn▒ pozycjΩ bloku. S▒ to left, top, pixelLeft i pixelTop. pixelLeft i pixelTop s▒ atrybutami read-only, co oznacza, ┐e nie mo┐na zmieniµ ich warto╢ci. Nowe warto╢ci wpisuje siΩ do atrybut≤w left i top, a przegl▒darka sama troszczy siΩ o zaktualizowanie atrybut≤w pixelLeft i pixelTop. Dodatkowo Explorer zosta│ wyposa┐ony w ma│y bug (w Microsofcie nazywaj▒ to "feature"): po za│adowaniu strony atrybuty left i top nie s▒ inicjowane. Oznacza to, ┐e aby odczytaµ aktualn▒ (pocz▒tkow▒) pozycjΩ bloku, musimy odwo│aµ siΩ do pixelLeft i pixelTop.

Odpowiedni fragment funkcji dla Explorera:

function moveBy(ident,dx,dy) {
  //......
  if(ie4) {
    document.all[ident].style.left = document.all[ident].style.pixelLeft  + dx;
    document.all[ident].style.top = document.all[ident].style.pixelTop + dy;
  }
}
	

4. Kompletna funkcja moveBy().

function moveBy(ident,dx,dy) {
  if(nn4) {
    document.layers[ident].left = document.layers[ident].left  + dx;
    document.layers[ident].top = document.layers[ident].top + dy;
  } else if(ie4) {
    document.all[ident].style.left = document.all[ident].style.pixelLeft  + dx;
    document.all[ident].style.top = document.all[ident].style.pixelTop + dy;
  }
}