© 2013 All rights reserved.
0

JavaScript: expansion div, trim div

Jedna funkce v JavaScriptu pro ořezání divu ze stránky a skrytí zbylého obsahu stránky nebo roztažení divu přes celou stránku, tzv. FullScreen.

Na začátku se můžete podívat na jednoduchý vytvořený ukázkový příklad, ve kterém je vidět, co se

javascript

budeme snažit vytvořit. Příklad je na adrese http://www.zaachi…mdiv/.

V příkladu jsou dvě ovládací javascriptová tlačítka v podobě HTML odkazů. První z nich, „Trim Div“, slouží pro ořezání divu a skrytí okolního obsahu. Druhé tlačítko, „Set FullScreen“, skryje obsah stránky a zobrazí pouze vybraný div přes celou obrazovku.

 

Jako první si vytvoříme dvě pole. První pole bude obsahovat veškeré IDéčka na stránce, které budou později JavaScriptem skryty. Druhé pole budeme využívat pro uložení právě těch IDéček, které jsou skryty před našim zásahem, abychom jejich vlastnost zachovali i po obnovení.

Nyní můžeme začít postupně skládat naši funkci.

Funkce bude obsahovat dva vstupní parametry. První z nich bude jméno IDéčka, které budeme chtít zachovat a druhý parametr bude typu boolean a bude rozhodovat o tom, zda bude daný element roztažen na celou obrazovku nebo pouze ořezán:

Nyní potřebujeme získat veškeré názvy ID ze všech elementů, které máme na stránce. To provedeme pomocí funkce getElementsByTagName a následným výběrem:

V poli allIds máme nyní všechna IDéčka na stránce, a můžeme jim nastavit vlastnost visibility: hidden. Navíc si do pole visibleArr uložíme názvy těch elementů, které již tuto hodnotu mají nastavenou:

Po provedení tohoto kódu budou všechny elementy, které obsahovali nějaký identifikátor na stránce skryty. Nakonec musíme pouze zobrazit námi požadovaný element, který být skrytý nemůže:

Pokud nechceme zvětšovat div přes celou obrazovku, tak máme hotovo. V případě že požadujeme jeho roztažení, můžeme nastavit jeho styly například nějak takto:

ElId representuje námi získaný objekt elementu.

 

Funkce pro obnovení bude podobná, jenom s tím rozdílem, že budeme muset nastavit všem elementům zpět viditelnost, s rozdílem těch, které máme uloženy v poli visibleArr:

Pokud jsme zvolili roztažení divu přes celou obrazovku, musíme u něj vymazat námi nastavené vlastnosti, a to například takto:

Tímto je celý JavaScript hotový a můžeme jej vyzkoušet.

 

Volat funkce můžeme dvěma způsoby, a to s rozdílem druhého parametru, kterým ovlivníme, zda bude div roztažen přes celou obrazovku.

V případě, že chceme roztáhnout div přes celou obrazovku:

V případě, že chceme pouze ořezat div a zanechat jej na stránce v jeho původní poloze a s jeho původními rozměry:

Závěrem

Celý JavaScriptový kód si můžete zobrazit zde: expand.js.txt

Vyzkoušet si jej můžete na příkladu, uvedeném na začátku článku.

Toto řešení určitě není jediné a v některých případech může způsobovat problémy. Například pokud bychom měli několik divů vnořených v sobě, nebo kdybychom neměli u všech hlavních divů uvedeny jejich identifikátory.

Comments (0)

No comments yet, but you can be the first..

Add comment

About
Hi, i am programmer from the Czech Republic. I love web development (Ruby, Ruby on Rails, PHP, Nette) and iOS development (Objective-C, Cocoa).
To cooperate, here is my phone:
+420 608 836