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