Tančící okna

6. prosince 1999

•

V jednom starším článku věnovanému JavaScriptu jsme vám ukázali, jak lze nadefinovat vlastnosti nově otevřeného okna. Dnes vám přinášíme návod, jak změnit parametry oken stávajících.

JavaScript ve verzi 1.2 umožňuje totiž nadefinovat pozici a velikost stávajících oken prohlížečů. Tyto metody jsou navíc podporovány oběma nejrozšířenějšími prohlížeči MSIE a NN (samozřejmě ale až od čtvrté verze), takže se vyhnete problémů s kompatibilitou browserů, což při používání JavaScriptu je relativně vzácný jev. Můžete využít následujících metod:

moveTo(x,y) – přemístí okno prohlížeče do pozice odpovídající souřadnicím x-y, které představují levý horní roh okna browseru. X představuje souřadnici horizontální, y je souřadnice vertikální (to platí i pro další metody).

moveBy(x,y) – tato metoda způsobí též posunutí okna, tentokráte x a y představují hodnoty o které se okno posune vzhledem k původní pozici. Např. pokud zadáte moveBy(50, 50) okno se posune o 50 pixelů doprava a o stejný počet pixelů směrem dolů. Lze zadávat i záporné hodnoty.

resizeTo(x,y) – tato metoda způsobí změnu velikosti okna. Proměnná x přitom představuje šířku okna, y pak výšku okna (v pixelech) Poznámka: Netscape Navigator tento příkaz bohužel nezobrazuje korektně. Přestože v dokumentaci Netscape najdete informace o tom, že x,y hodnoty odpovídají šířce a výšce vnějšího rámu okna prohlížeče (tj. zahrnují menu, panel nástrojů atd.), ve skutečně NN spíše počítá pouze s vnitřními rozměry (odzkoušeno v NN 4.5).

resizeBy(x,y) – zvětšení nebo zmenšení okna o hodnoty x,y. Pozice prohlížeče (levý horní roh) přitom zůstane stejná, dojde k posunu pravého dolního rohu. V případě, že chcete zmenšit okno, zadáte hodnoty záporné.

scrollTo(x,y) – sroluje dokument k daným souřadnicím, pokud není tato část viditelná. Starší verze podporují metodu scroll(x,y), která je v nových verzích postupně nahrazována metodou scrollTo(x,y).

scrollBy(x,y) – sroluje okno o hodnoty uvedených v proměnných x,y , jestliže tato část dokumentu není zobrazená. Lze zadávat i záporné hodnoty. Funkčnost metod si ověříme na následující ukázce. Pomocí odkazů budeme měnit parametry stávajícího okna (pozor, skript nebude funkční v trojkových verzích prohlížečů a samozřejmě v browserech bez podpory JScriptu):

Změna velikosti okna na 600×400
Zmenšení okna o 50 pixelů v horizontálním i vertikálním směru
Posun okna o 50 pixelů horizontálně i vertikálně
Posun do levého horního rohu obrazovky
Srolování okna na souřadnice 0, 900
Srolování o 900 pixelů ve vertikálním směru

<a href="javascript:window.resizeTo(600, 400);">Změna velikosti okna na 600×400</a><br>
<a href="javascript:window.resizeBy(-50, -50);">Zmenšení okna o 50 pixelů v horizontálním i vertikálním směru</a><br>
<a href="javascript:window.moveBy(50, 50);">Posun okna o 50 pixelů horizontálně i vertikálně</a><br>
<a href="javascript:window.moveTo(0, 0);">Posun do levého horního rohu obrazovky</a><br>
<a href="javascript:window.scrollTo(0,900);">Srolování okna na souřadnice 0, 900</a><br>
<a href="javascript:window.scrollBy(0,900);">Srolování o 900 pixelů ve vertikálním směru</a>

Javascript samozřejmě umožňuje změnit vlastnosti okna automaticky ihned po otevření volaného dokumentu, bez nutnosti klikání na odkazy. Tento skript například změní rozměry okna browseru na 600 x 400 pixelů a vycentruje ho do středu obrazovky. Stačí když do stránky vložíme tento kód:

Nejprve je nutno ověřit, zda-li má uživatel čtvrtou nebo vyšší verzi prohlížeče NN nebo IE. Teprve potom je možné vlastní skript provést. Pomocí objektu screen zjistíme rozlišení obrazovky (screen.width, screen.height) a následně je okno zmenšeno (window.resizeTo) a přemístěno do středu obrazovky (window.moveTo). Poznámka: U Netscape bude okno o něco větší a z toho důvodu nebude na výšku vycentrované. Důvodem je to, že nezapočítává korektně výšku panelu nástojů, menu atd.(odzkoušeno v NN 4.5).

Ukázka

Pokud jste se rozhodli využít uvedených možností JavaScriptu, musíte dát pozor na několik skutečností. Jednak je nutno si uvědomit, že řada uživatelů požívá nízké rozlišení, takže při špatně zvolených souřadnicích se může okno dostat úplně mimo obrazovku. Druhou věcí je, že příliš „tančící“ okna po obrazovce určitě nepřidají na kráse Vaší prezentace.

Předchozí článek HTML tipy k posílání emailů z webu

Další článek SVG - technologie 21. století pro web