Diskuze: fullscreen pomocí tlačítka
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Díky moc za odpověď 
A jak bych to mohl uložit do cookies? Nic podobného jsem ještě nedělal..
Taky si myslím, že by to mohl být jeden z důvodů.. Na druhou stranu jsem
nikde nenašel, že by někdo řešil podobný problém. Potom by mohla být
chyba v tom jak se stránky shoptetu načítají. A nějakým způsobem
resetují všechny vyvolané akce. Ale netuším jak to obejít. Jedině
vytvořit globální proměnnou, která bude buď true nebo false na základě
stisknutí tlačítka fullscreen a pak script, který poběží neustále na
pozadí a bude kontrolovat podmínku, zda je daná proměnná true.. takže
vlastně obdoba cookies. Jsem ale v JS úplný začátečník a nevím jak
podobné podmínky sepsat. Zkoušel jsem hledat nějaké návody, ale už mi to
zabírá spoust času.. dělám to jen ve volnu jako koníček. Tak pokud někdo
ví jak to vyřešit, určitě by mi to moc pomohlo
Tak jsem to dnes zkoušel řešit a zatím bez úspěchu 
Nejspíš špatně rozumím sepisování JS..
Zkouším následující kód, ale zdá se, že kontrolní podmínka co by měla
běžet neustále a zkoumat, jestli je proměnná true nebo ne.. tak
neběží..
<!DOCTYPE html>
<html>
<body>
<p><button onclick="klik()" type="button">Klikni!</button></p>
<p><button onclick="storno()" type="button">Stornuj me!</button></p>
<p>Hodnota promenne:</p>
<p id="demo"></p>
<script>
klik();
function klik() {
if (sessionStorage.klik) {
sessionStorage.klik = true;
} else {
sessionStorage.klik = false;
}
document.getElementById("demo").innerHTML = sessionStorage.klik;
}
function storno() {
if (sessionStorage.klik) {
sessionStorage.klik = false;
}
document.getElementById("demo").innerHTML = sessionStorage.klik;
}
if (sessionStorage.klik = true) {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
}
if (sessionStorage.klik = false) {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
</script>
</body>
</html>Nevíte někdo, kde dělám chybu?
Na konci jsem špatně uzávorkoval podmínku, ale stejně to nefunguje
...
if (sessionStorage.klik = true) {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
}
}
if (sessionStorage.klik = false) {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
...
1)
https://developer.mozilla.org/…llscreen_API
https://developer.mozilla.org/…itFullscreen
https://developer.mozilla.org/…stFullscreen
Jestli spravne rozumim dokumentaci, tak...
document.fullscreenElement -- boolean promena, ktera rika, zda je fullscreen aktivni nebo ne (je pod nadpisem Properties)
elem.requestFullscreen() -- aktivuj FS (Methods on the Element interface)
document.exitFullscreen() -- zrus FS (Methods on the Document interface)
S tim, ze aktivace se musi volat na elementu, takze treba
let elem = document.documentElement;
let elem = document.querySelector("video");
A exit se vola z document.
if (document.exitFullscreen) -- to je dotaz, zda existuje funkce document.exitFullscreen, to je mozna zbytecne ve tvem koduJe tam krasny priklad, pod nadpisem "Toggling fullscreen mode" https://developer.mozilla.org/…llscreen_API
- A druhy problem, ktery tam mas, ze funkce klik a storno sice prepinaji hodnotu v session, ale nevolaji funkci pro prepnuti modu fullscreen a zpet.
function klik() {...; fullScreen();}
function storno() {...; fullScreen();}
function fullScreen() {...}
fullScreen(); // a soucasne je treba zavolat full screen po nacteni stranky, to tam jakoze masAle, po kliknuti na button se stranka nenacita, jen pri kliknuti na odkaz,
takze muzes klikat na butony, jak chces, kdyz delaji jen kliknuto = true /
kliknuto = false; vypisKliknutoNaObrazovku()
Tohle jsem tak nějak pochopil, doufám
Problém je, že asi nerozumím krokům, jak se kód na stránkách čte..
Funguje to tak, že se načte stránka, přečte celý kód a vykoná se
jednorázově? A jediné co běží na "pozadí" je kontrola stisku buttonu,
který vyvolá další případné funkce?
Takže následující část kódu se přečte a vykoná pouze jednou při načtení stránky? Protože můj záměr byl, že se čte neustále a podle toho jak se mění proměnná sessionStorage.klik se vykoná ten či onen kód..
...
if (sessionStorage.klik = true) {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
}
}
if (sessionStorage.klik = false) {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
...Pokud se to tedy přečte pouze jednou, pak chápu, že to nefunguje..
Proto jsem zkoušel najít funkci, která bude čtení kódu opakovat a zkusil
jsem něco takového:
<!DOCTYPE html>
<html>
<body>
<p><button onclick="klik()" type="button">Klikni!</button></p>
<p><button onclick="storno()" type="button">Stornuj me!</button></p>
<p>Hodnota promenne:</p>
<p id="demo"></p>
<script>
sessionStorage.klik = false;
document.getElementById("demo").innerHTML = sessionStorage.klik;
setInterval(fullScreen, 5000);
function klik() {
if (sessionStorage.klik) {
sessionStorage.klik = true;
}
document.getElementById("demo").innerHTML = sessionStorage.klik;
}
function storno() {
sessionStorage.klik = false;
document.getElementById("demo").innerHTML = sessionStorage.klik;
}
function fullScreen() {
if (sessionStorage.klik = true) {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
}
}
if (sessionStorage.klik = false) {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
</script>
</body>
</html>Pseudokódem jsem chtěl docílit následujícího postupu..
Při načtení stránky:
- definuj proměnnou sessionStorage.klik = false
- zobraz hodnotu této proměnné
- spusť opakující se interval každých 5 vteřin a spusť funkci fullScreen()
- tato funkce kontroluje jestli je proměnná sessionStorage.klik true nebo false a podle toho zapne nebo vypne fullscreen..
- jsou přítomné další dvě funkce, které spouští buttony a to funkce klik() a storno()
- při kliknutí na kterýkoliv button se změní hodnota proměnné sessionStorage.klik a vzhledem k tomu, že mám stále spuštěný interval každých 5 vteřin zapnout funkci fullScreen(), tak by měl podle toho zapnout nebo vypnout fullscreen..
Bohužel to nefunguje.. při různých experimentech jsem dospěl k názoru, že i přesto, že při kliknutí na tlačítko storno se funkce sessionStorage.klik nastaví na false, tak funkce pro zrušení fullscreenu se spustí jen když je true.. i když v podmínce je :
...
if (sessionStorage.klik = false) {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
...Proto mi přišlo, že stisknutím buttonu storno sice nastaví proměnnou
sessionStorage.klik = false, ale až na konci celého kódu/relace.. tudíž
kontrola jestli je již proměnná sessionStorage.klik = false je v daný moment
ještě true.. Proto si nejsem jistý časováním částí kódu a tak nejsem
schopný ani přijít na to, proč to nefunguje i přesto že pseudokódem to
dává smysl
Děkuji ještě jednou za vyčerpávající odpověď
Myslím, že většinu těchto poznatků znám a tak nějak chápu.. ale i
přesto netuším co dělám špatně že to nepracuje tak jak bych chtěl.
Sepsal jsem po lopatě následující kód s poznámkami jak si myslím, že by
to mělo fungovat, je to tak správně?
<!DOCTYPE html>
<html>
<body>
<p><button onclick="klikk()" type="button">Klikni!</button></p>
<p><button onclick="storno()" type="button">Stornuj me!</button></p>
<p>Hodnota promenne:</p>
<p id="demo"></p>
<script>
// nastavi pri nacteni stranky jednorazove promennou klik na false
sessionStorage.klik = false;
// zobrazi nastavenou hodnotu false, abych videl ze vse funguje
document.getElementById("demo").innerHTML = sessionStorage.klik;
// nastavi spousteni funkce fullScreen kazdych 5 vterin
setInterval(fullScreen, 5000);
// nadefinuje funkce klik() a storno() pro jejich pozdejsi spusteni pri stisknuti prislusneho buttonu
function klikk() {
if (sessionStorage.klik) {
// nastavi promennou klik na true
sessionStorage.klik = true;
}
// nasledne zobrazi nastavenou promennou abych videl, ze se zmenila
document.getElementById("demo").innerHTML = sessionStorage.klik;
}
function storno() {
sessionStorage.klik = false;
document.getElementById("demo").innerHTML = sessionStorage.klik;
}
// tuto funkci fullScreen vyvolávám každých 5 vteřin viz na začátku funkce setInterval()
function fullScreen() {
// pokud je promenna klik true, tak nastavi webovou stranku na celou obrazovku pokud tak jiz neni nastaveno
if (sessionStorage.klik = true) {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
}
} else {
// pokud je promenna klik false, tak spusti vypnuti cele obrazovky.. predpokladam ze je jedno, jestli je cela obrazovka aktivni nebo ne
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
</script>
</body>
</html>Jednoduše chci, aby se nadefinovali funkce klik() a storno() a pak funkce fullScreen().. Při stisku příslušného buttonu se proměnná sessionStorage.klik nastavi na true nebo false.. a jelikož každých 5 vteřin spouštím funkci fullScreen(), tak by se měla spustit celá obrazovka pokud je promenna sessionStorage.klik true a nebo vypnout pokud je false..
Pokud mám zápis správně, tak by to mělo fungovat ne?
Když to však zkusím spustit.. tak se mi samozřejmě na začátku nadefinuje
proměnná sessionStorage.klik na false.. a jak uběhne 5 sekundový interval,
tak i přesto, že je false tak se zapne celá obrazovka.. a neustále se
zapíná vždy po uplynutí intervalu.. pokud kliknu na button storno, který
má spustit funkci storno() a nastavit sessionStorage.klik na false, i když
jsem jí třeba předtím nastavil na true, tak se celá obrazovka samovolně po
uplynutí intervalu nevypne..
Rozumím, že když stisknu button, tak bych měl rovnou volat funkci
fullScreen, ale takle to nechci.. protože právě už v prvním příspěvku
jsem psal, že na stránkách se sice celá obrazovka zapne, ale jakmile
překliknu na nějaký odkaz, tak se sama vypne.. Proto se to snažím obejít
tím, že budu v nějakém intervalu kontrolovat funkci sessionStorage.klik
jestli je true nebo false a podle toho se ta obrazovka zapne nebo vypne... z
toho důvodu tuto proměnnou chci uložit jako globální a na Tvou radu jí
ukládat do cookies
Ale nejspíš pořád někde dělám chybu a nemůžu na to přijít 
Ale moc si vážím toho, že mi
věnuješ tolik času
Zatím jsem si jen letmo projel, co jsi mi psal.. až budu mít víc času,
tak to projedu podrobně a dám vědět
Každopádně ten zápis do session jsem čerpal odsud, kde je úplně dole
příklad.. Používají to úplně stejně na počet kliků..
Přišlo mi to jako jednodušší zápis než to co popisují nahoře stejně
jako ty..
https://www.w3schools.com/…lstorage.asp
Pozor, w3school jsou soukrome stranky, ktere napatri zadnemu vyrobci browseru, ani nespadaji pod organizaci w3c. Me zkusenosti jsou spis negativni. 90% veci treba bude fungovat, ale ten zbytek maji spatne.
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}Jestli myslis tento priklad, tak ten dela uplne neco jineho. Aspon si mysli, ze to dela neco jineho.
// tohle je obdobny kod
x = {}; // nebo localStorage = {};
x.setItem = function (name, value) {...}
x.getItem = function (name) {...}
x.cokoliv = neco // cokoliv je cokoliv jineho nez setItem getItemTimto zpusobem si muzes ukladat do kazdeho existujiciho objektu. Ale, po opusteni stranky se to ztrati, protoze to neni v definici te funkce.
Nahore mas priklad pouziti storage, ktere by melo fungovat vzdy. Protoze to
odpovida zapisum z dokumentace k prohlizeci Firefox. Pro IE by ses musel podivat
na ms stranky. Pro chrome na chrome stranky... Teoreticky to maji vsichni
stejne. Tak ze 70% nee
https://developer.mozilla.org/…localStorage
localStorage.setItem("lastname", "Smith");
localStorage.getItem("lastname");
Zobrazeno 15 zpráv z 15.