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
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í.
|
1 2 3 4 |
//pole vsech IDecek var allIds = []; //pole IDecek skrytych elementu var visibleArr = []; |
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:
|
1 2 |
function expansion( id, trim ){ } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//ziskame seznam vsech tagu var elem=document.getElementsByTagName('*'); //vynulujeme pole allIds = []; visibleArr = []; //vytvorime si potrebne promenne var i = 0, el; //projdeme vsechny ziskane tagy a hledame jejich Idecka while( el = elem[i++]){ if( el['id'] ){ allIds[allIds.length] = el['id']; } } |
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:
|
1 2 3 4 5 6 7 8 9 |
//projdeme vsechny ziskane Idecka for( i = 0; i < allIds.length; i++ ){ //ulozime si do pole vsechny takove, ktere meli hodnotu visibility na hidden jiz nastavenou if( document.getElementById(allIds[i]).style.visibility == 'hidden'){ visibleArr[visibleArr.length] = allIds[i]; } //vsem Ideckam nastavime hodnotu visibility na hidden document.getElementById(allIds[i]).style.visibility ='hidden'; } |
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:
|
1 2 3 4 5 |
//ziskame objekt nami pozadovaneho Idecka var ElId = document.getElementById(id); //a nastavime mu pozadovane styly ElId.style.visibility = 'visible'; |
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:
|
1 2 3 4 5 6 7 8 |
if( trim == true ){ ElId.style.position = 'absolute'; ElId.style.top = '0px'; ElId.style.left = '0px'; ElId.style.width = '99%'; ElId.style.height = '100%'; ElId.style.background = 'white'; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
//vratime vsechny Idecka na hodnotu visibility: visible for( i = 0; i < allIds.length; i++ ){ document.getElementById(allIds[i]).style.visibility='visible'; } //vratime zpet ty idecka, ktera mali visibility: hidden if( visibleArr.length ){ for( i = 0; i < visibleArr.length; i++ ){ document.getElementById(visibleArr[i]).style.visibility = 'hidden'; } } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
if( trim == true ){ //zruime nami nastavene vlastnosti var ElId = document.getElementById(id); ElId = document.getElementById( id ); ElId.style.position = ''; ElId.style.top = ''; ElId.style.left = ''; ElId.style.width = ''; ElId.style.height = ''; ElId.style.background = ''; } |
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:
|
1 2 3 4 |
//orezani a roztazeni expansion('mainDiv', true); //navraceni zpet expansionBack('mainDiv', true); |
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:
|
1 2 3 4 |
//orezani divu expansion('mainDiv', false); //navraceni zpet expansionBack('mainDiv', false); |
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.