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;
  }
}
	

( spis treści )