Full screen

De mult timp, dezvoltatorii si-au dorit posibilitatea de a crea experiente pe intreg ecranul – in sfarsit, de acum aveti si aceasta optiune!

In primul rand, sa incepem cu un buton intr-o pagina web – atunci cand se face click pe el, putem cere redimensionarea pe intreg ecranul pentru orice element din pagina web;

<button id=”view-fullscreen”>Fullscreen</button>

In exemplul de mai jos, executam operatiunea pentru toata pagina web, insa la fel de bine poate fi facuta pentru un element video pentru a oferi posibilitatea de vizualizare pe tot ecranul.

var viewFullScreen=document.getElementById(“view-fullscreen”);

if (viewFullScreen) {

viewFullScreen.addEventListener(“click”, function() {

var docElm=document.documentElement;

if (docElm.mozRequest-FullScreen) {

docElm.mozRequestFullScreen();

}

else if(docElm.WebkitRequestFullScreen) {

docElm.webkitRequestFullScreen():

}

}, false);

}

Pentru a completa diferitele stari pe care le poate avea un element, dispunem de pseudo-clase CSS ca sa modificam aspectul elementului. De exemplu, daca afisam documentElement pe tot ecranul, putem folosi pseudo-clasa full-screen pentru ai modifica aspectul sau poate sa folosim o mostenire pentru a afisa un buton “Exit fullscreen” ori ceva similar.

html:-moz-full-screen {

background:red;

}

html:-webkit-full-screen {

background:red;

}

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>