We Keep Coding

Javascript - Show div only with device is in landscape

I have a problem with my script.
I am showing a hidden div #alert only when #total=0, and what I am looking for is that it ONLY be displayed when the screen is in landscape. (See CSS).
What is the snippet of the script to add, and which evaluates whether the screen is landscape?
See online DEMO ( JSFiddle ).
Thanks in advance.
$(document).ready(function () {
function manageRegalo() {
var totalStorage = Number(localStorage.getItem("total"));
var total = parseFloat($("#total").val());
if (totalStorage != null && total === 0) {
total = totalStorage;
}
if (total > 99.99 && total < 299.99) {
console.log("PASS");
$('#regalo').show();
$('#alert').hide();
if (localStorage.getItem('suppress_gift_tooltip_1') == null) {
$('.tooltip').show();
window.setTimeout(function () {
$('.tooltip').fadeOut('slow');
}, 2000);
//--------------------
if (!$("#notify")[0].paused) { //play audio
$("#notify")[0].pause(); //play audio
$("#notify")[0].currentTime = 0; //play audio
} else { // play audio
setTimeout(function () { //play audio
$("#notify")[0].play(); //play audio
})
}; //play audio
//--------------------
localStorage.setItem('suppress_gift_tooltip_1', 'true')
}
} else if (!total) {
$('#regalo').hide();
$('#alert').show();
} else {
console.log("FAIL");
$('#alert').hide();
$('#regalo').hide();
}
}
$(document).on('click', function (event) {
const target = event.target;
if (target.matches('.comp-clone') || target.matches('.bbp')) {
manageRegalo();
localStorage.setItem('total', Number($("#total").val()));
}
});
manageRegalo();
});
CSS:
#alert,
.tooltip {
display: none
}
#media screen and (max-width:999px) and (orientation:landscape) {
#alert {
display: block;
}
}
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="regalo">Regalo</div>
<br>
<div class="tooltip">Tooltip</div>
<br>
<div id="alert">Alert</div>
<br>
<input type="text" id="total" value="">
<button type="button" class="bbp">Enter</button>

Your problem basically is here:
var total = parseFloat($("#total").val());
and consequently here
} else if (!total) {
$('#regalo').hide();
$('#alert').show();
The first time you read total it provides NaN and then the else if (!total) is executing $('#alert').show();
For that reason, you see alert message.

Exit fullscreen not working on chrome? [What I'm missing?]

I have two buttons on my screen. each one fires a piece of javascript code to enter and exit fullscreen mode.
Button 1: Enter Fullscreen Mode
Button 2: Exit Fullscreen Mode
If I first click on Button 1 it brings me to fullscreen mode and then if I click on Button 2 it'll exit fullscreen mode.
BUT if I enter fullscreen mode using F11 or via chrome menu, unexpectedly Button 2 doesn't work anymore.
Why this happens and how to fix it?
Button 1 code :
goFullscreen();
function goFullscreen() {
var el = document.documentElement,
rfs = el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
rfs.call(el);
}
Button 2 code :
document.webkitCancelFullScreen();
I've tried this with no luck too:
document.webkitExitFullscreen();

You should validate before executing....
function FullScreen(divID) {
fnFullScreen(divID, !IsFullScreen());
}
function IsFullScreen() {
return (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
}
function fnFullScreen(divID, TurnOn) {
if (TurnOn) {
var docElm = $('#' + divID).parent()[0];
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
} else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
$('#' + divID).css("min-height", "100vh");
$('.btnFullScreen').html('Exit Full Screen');
} else {
if (document.exitFullscreen) {
document.exitFullscreen().catch(() => { });
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
$('#' + divID).css("min-height", "");
$('.btnFullScreen').html('Full Screen');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body">
<div id="div1"> <button class="btnFullScreen" onclick="FullScreen('div1')">Full Screen</button> click to full screen</div>
</div>

Javascript function on url change of page

I have an html page (http://www.autoelettric.com/info/SafeConversionToLed.html) that when I click on button the status bar on top will change.
The site would be designed for easy navigation through the buttons, but if an user uses the scroll, the status bar is not updated. So I would like to know if can I do an event that updates the status bar on the change of url (httt.url.com # step1, httt.url.com # step2, httt.url.com # step3).
For example, my code now:
Script:
<script type = "text/javascript">
function status0()
{
document.getElementById("imgStausBar").src ="status0.png";
}
function status1()
{
document.getElementById("imgStausBar").src ="status1.png";
}
function status2()
{
document.getElementById("imgStausBar").src ="status2.png";
}
function status3()
{
document.getElementById("imgStausBar").src ="status3.png";
}
</script>
Html
<div class="btn-5" width="50px">↓ START</div>
<div class="btn-5" width="50px">→ YES</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
What I would do:
if current url is #SafeConversion do status0()
if current url is #FlasherUnit do status1()
if current url is #ExactPower do status2()
etc...
EDIT:
I added this, but it doesn't work.
if ("onhashchange" in window) { // event supported?
window.onhashchange = function () {
hashChanged(window.location.hash);
}
}
else {
var locationHash = window.location.hash;
window.setInterval(function () {
if(locationHash == "#SafeConversion") {
status0();
} else if(locationHash == "#FlasherUnit") {
status1();
} else if(locationHash == "#ExactPower") {
status2();
} else if(locationHash == "#ExactPower") {
status2();
} else if(locationHash == "#YourSolution") {
status3();
} else if(locationHash == "#YourSolution2") {
status3();
} else if(locationHash == "#YourSolution2/1") {
status3();
} else if(locationHash == "#YourSolution3") {
status3();
} else if(locationHash == "#YourSolution3/1") {
status3();
} else if(locationHash == "#YourSolution4") {
status3();
} else if(locationHash == "#Contact") {
status0();
}
}, 100);
}

Something like this should work:
<script type="text/javascript">
function hashChanged(locationHash) {
if(locationHash == "#SafeConversion") {
status0();
} else if(locationHash == "#FlasherUnit") {
status1();
} else if(locationHash == "#ExactPower") {
status2();
} else if(locationHash == "#ExactPower") {
status2();
} else if(locationHash == "#YourSolution") {
status3();
} else if(locationHash == "#YourSolution2") {
status3();
} else if(locationHash == "#YourSolution2/1") {
status3();
} else if(locationHash == "#YourSolution3") {
status3();
} else if(locationHash == "#YourSolution3/1") {
status3();
} else if(locationHash == "#YourSolution4") {
status3();
} else if(locationHash == "#Contact") {
status0();
}
}
if ("onhashchange" in window) { // event supported?
window.onhashchange = function () {
hashChanged(window.location.hash);
}
}
else { // event not supported:
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
storedHash = window.location.hash;
hashChanged(storedHash);
}
}, 100);
}
</script>

If you mean the url, when you said status bar, i tried it and the status bar updated when i scroll-up or down.

use "window.location.hash"
var locationHash = window.location.hash;
if(locationHash == "#SafeConversion") {
status0();
} else if(locationHash == "#FlasherUnit") {
status1()
}
and so on....

Fullscreen browser script

I have got a problem with my script making browser 's window to fullscreen. It's working for a single document ("document.body") but after click link to another site, browser closes fullscreen mode. Is it possible to change:
document.body
to something like this:
window.[...]
to make fullscreen mode pernamently like it is after press F11.
My script looking like that:
function toggleFullScreen() {
// ## The below if statement seems to work better ##
if((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
if (document.body.requestFullScreen) {
document.body.requestFullScreen();
} else if (document.body.mozRequestFullScreen) {
document.body.mozRequestFullScreen();
} else if (document.body.webkitRequestFullScreen) {
document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (document.body.msRequestFullscreen) {
document.body.msRequestFullscreen();
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}

How to change to Fullscreen the entire webpage with confirm()?

I want that when click in "OK" in the confirm box the entire webpage go to fullscreen, but with this only get error TypeError: docelem.requestFullscreen is not a function. I tried of all but nothing...
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
docelem.requestFullscreen();
}
else if (conf == true) {
docelem.mozRequestFullScreen();
}
else if (conf == true) {
docelem.webkitRequestFullScreen();
}
else if (conf == true) {
docelem.msRequestFullscreen();
}
Some solution? or is it not possible with confirm()? Because with a button works:
(function () {
var fullscreenon = document.getElementById("fullscreenbutton");//button Id
if (fullscreenon) {
fullscreenon.addEventListener("click", function () {
var docelem = document.documentElement;
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullScreen) {
docelem.webkitRequestFullScreen();
}
}, false);
}
})();

Firsty, your conditions are different between 2 samples. Right code is:
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullscreen) {
docelem.webkitRequestFullscreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
}
Secondly and importantly, you can't make fullscreen your page without a user interaction. This is a security restriction. If you trigger code above by a user click, it'll be work. For example:
document.onclick = function (argument) {
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullScreen) {
docelem.webkitRequestFullScreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
}
}
If you click anywhere on the page, fullscreen mode will be activated. More detail: https://stackoverflow.com/a/20533579/198062