Určování umístění objektů JavaScriptem

Při návrhu moderního webu je užitečné vědět jaký prostor máme k dispozici. Jedná se o poměrně složitou záležitost, protože se téměř u každého uživatele využitelný prostor obrazovky liší - používá jiné rozlišení, jiný prohlížeč, nemusí mít maximalizované okno, může používat různé doplňky, které prostor ubírají (např. nejrůznější toolbary) a mnoho dalších "užíračů prostoru" (styl windows, velikost písma, popisky pod ikonami prohlížeče,...). Vše by bylo jednoduché, kdyby každý objekt svůj styl s pozicí, ale toho se v praxi nedá dosáhnout. Naštěstí existují způsoby, jak rozměry plochy prohlížeče a pozice objektů zjistit a z nich již můžeme pozice objektů dopočítat - jedním z nich je pouužití "kouzelné" vlastnosti offset, kterou o objektu zjistíme téměř vše.

Naneštěstí se tyto postupy různí prohlížeč od prohlížeče.

Zjištění rozměrů plochy prohlížeče

Pro zjištění využitelné plochy považuji za nejvyužitelnější vlastnosti javascriptu document.body.offsetWidthdocument.body.offsetHeight, které zjistí rozměry plochy prohížeče - v IE je to celková plocha včetně marginu a borderu, ale bez paddingu / v Geckových prohlížečích je to plocha včetně borderu, ale bez marginu a paddingu.
Další vlastnosti jsou document.body.clientWidth document.body.clientHeight, které v Gecku provedou to samé jako offsetové funkce v IE, ale v IE dají rozměry "psací" plochy, tj. veškerá plocha bez okraje (borderu) a bez posuvníků (scrollbarů).

Za nejlepší variantu pavažuji zjištění rozměrů plochy bez paddingu a případné jeho přičtení:
1. zjištění offsetů
2. zjištění rozměrů clienta
3. porovnání a vybrání větší z hodnot - získám rozměry, které odpovídají většině prohlížečů
4. případné přičtení paddingu

Zjištění velikosti objektů

Vykreslený objekt zabírá místo na stránce, ale jeho rozměry nemusí přesně odpovídat rozměrům, které jsem požadovali :-(

.
Opět záleří na prohlížeči. V IE velikost objektu odpovídá nadefinovaným stylům - width a height - včetně borderu, naproti tomu pro Gecko tyto styly znamenají velikost obsahu a border se vykresluje navíc - stejný objekt s borderem bude v Gecku větší než v IE.

Pro zjištění skutečné velikosti můžeme použít vlastnosti document.getElementById("id").offsetWidth document.getElementById("id").offsetHeight, tyto valstnosti obsahují skutečnou velkost prvku.

Další záludnost skrývá skrolování, chceme-li zjistit skutečnou velikost prvku včetně jeho neviditelné části lze použít vlastností document.getElementById("id").scrollWidthdocument.getElementById("id").scrollHeight, tím získáme celkovou velikost obsahu prvku. Dále můžeme zjistit, o kolik je obsah již odskrolovaný, a to vlastnostmi document.getElementById("id").scrollTopdocument.getElementById("id").scrollLeft. Když odečteme přechozí dvě valstnosti získáme skutečnou velikost zobrazeného obsahu.

Zjištění pozice objektů

Pozici objektu na stránce můžeme zjistit opět pomocí offsetu, konkrétně se jedná o vlastnost offsetTopoffsetLeft. Hodnota opět záleží na prohlížeči a jeho způsob chápání borderu. Zkusíte-li tuto valstnost na objekt <BODY> dostanete v IE s největší pravděpodobností 0,0 - určuje počáteční pozici obsahu okna (jak by šlo obsah okna posunout netuším). V Gecku se může stát, že dostanete záporné hodnoty, to se stane, pokud máte kolem body border, záporná hodnora určuje velikost okraje.
Offsety v ploše prohlížeče

komentáře (0)