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.
Related
let firstplayerturn = 1;
if (firstplayerturn == 1) {
value_input = document.getElementById("b1").value;
if (value_input === "0") {
alert("ERROR");
}
firstplayerturn = 0;
} else {
}
<input type="text" id="b1" class="box">
I was expecting that when first player is playing the game, "0" should not be taken as input.
That's why I try:
if (value_input === "0") {
alert("ERROR");
}
Firstly, you don't have a function that executes your script when the input is entered.
let firstplayerturn = 1;
function check(){
if (firstplayerturn == 1) {
value_input = document.getElementById("b1").value;
if (value_input === "0") {
alert("ERROR");
}
firstplayerturn = 0;
}
}
<input type="text" id="b1" class="box">
<button onclick="check()">Submit</button>
I have spent over 5 hours each day for the last 3 days trying to get this to work. I have done research into this topic and nothing I have found on stack overflow, youtube, etc has helped me understand this any more. To give you idea of the purpose of this is to set up a local website (non-online, just a file) and present it as a school project, so it only needs to work in chrome. The idea was to have two titles with 4 images below each,
title
img img img img
title
img img img img
now, I am trying to figure out how to trigger a hidden video to go full screen whenever a button is pressed (each video will have a key labeled beside it) (each image has a different video) and disappear when it is over. The code I attached shows how far I have managed to get trying to get it to work. (I have minimal experience with html and even smaller with css and java, have only ever coded games in c# so I don't understand more complicated aspects).
<html><head>
<title>Full Screen Test</title>
<style type="text/css">
/* make the video stretch to fill the screen in WebKit */
:-webkit-full-screen #myvideo {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<style>
video::-webkit-media-controls {
display:none !important;
}
</style>
<p><strong>Press enter to go fullscreen</strong></p>
<video src="http://videos-cdn.mozilla.net/serv/webmademovies/Moz_Doc_0329_GetInvolved_ST.webm" width="800" id="myvideo">
<script>
var videoElement = document.getElementById("myvideo");
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
</script>
</video>
</body></html>
I think this can help.
You can add the video and try to use fullscreen api, if does not works you use css to simulate fullscreen.
Also use onended to exit fullscreen and hide the player.
Buttons are keypad 0 to 7 [key code 96 to 103]
With the keycode on valid range it gets the correct video index from the array and plays it.
document.addEventListener("keydown", function(e) {
if (e.keyCode >= 96 && e.keyCode <= 103 ) { // Keypad 0 to 7
stopPlaying();
setTimeout(()=> playVideo(e.keyCode-96), 500);
}
}, false);
Hope it helps.
videos = [
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
];
removeVideo = function() {
video = document.getElementById("video");
video.remove();
}
playVideo = function (index) {
wrapper = document.getElementById("wrapper");
wrapper.innerHTML = '<video autoplay onended="removeVideo()" id="video" width="320" height="240" controls> <source src="' + videos[index]+'" type="video/mp4"> </video>';
var elem = document.getElementById("video");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
function isFullScreen() {
return (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
}
function stopPlaying() {
video = document.getElementById("video");
if(isFullScreen()) {
closeFullscreen();
}
if(video) {
video.remove();
}
}
document.addEventListener("keyup", function(e) {
if(e.keyCode == 27 || e.keyCode == 69) { //Esc or e
stopPlaying();
}
}, false);
document.addEventListener("keydown", function(e) {
if (e.keyCode >= 96 && e.keyCode <= 103 ) { // Keypad 0 to 7
stopPlaying();
setTimeout(()=> playVideo(e.keyCode-96), 500);
}
}, false);
#video {
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
}
video::-webkit-media-controls {
display:none !important;
}
<h6> Videos 1 </h6>
<img onclick="playVideo(0)" src="https://via.placeholder.com/50">0
<img onclick="playVideo(1)" src="https://via.placeholder.com/50">1
<img onclick="playVideo(2)" src="https://via.placeholder.com/50">2
<img onclick="playVideo(3)" src="https://via.placeholder.com/50">3
<h6> Videos 2 </h6>
<img onclick="playVideo(4)" src="https://via.placeholder.com/50">4
<img onclick="playVideo(5)" src="https://via.placeholder.com/50">5
<img onclick="playVideo(6)" src="https://via.placeholder.com/50">6
<img onclick="playVideo(7)" src="https://via.placeholder.com/50">7
<div id="wrapper">
<h6> Exit video </h6>
<div>
You can type 'e' to exit the video.
</div>
<div id="wrapper">
</div>
I have a problem with this script.
The script shows to me the hidden div #regalo if #total is between 99.99 and 299.99 ... ok, but (now), I also need to show the hidden div #alert when #total is 0 (zero), and be available to show if values of #total more than 1 , and only when the screen is in landscapeand mode...
Truth is that I can't find a way to modify the code.
Any ideas?
$(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();
//if(total === 0) {
//if(total == 0) {
//if(total < 1) {
//$('#alert').hide();
//}
//else{
//$('#alert').show();
//};
if (localStorage.getItem('suppress_gift_tooltip_1') == null) {
$('.tooltip').show();
window.setTimeout(function() {
$('.tooltip').fadeOut('slow');
}, 9000);
//--------------------
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 {
console.log("FAIL");
$('#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();
});
#alert {
display: none
}
#media screen and (max-width:999px) and (orientation:landscape) {
#alert {
display: block !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="regalo"></div>
<div id="alert"></div>
<!-- I need to show this div when the #total equals zero -->
This is where consistent and sensible indentation is important. All of the conditions you're trying are all valid:
if (total === 0)
if (total == 0)
if (total < 1)
Any one of them by itself will work just fine. But the problem is that they're not by themselves. They're inside another condition:
if (total > 99.99 && total < 299.99)
When that condition is true, none of your above conditions can possibly be true. The same variable (total) can not be greater than 99.99 and equal to 0 at the same time.
Don't put the test for zero inside of that if block:
if (total > 99.99 && total < 299.99) {
if (total === 0) {
//...
}
}
Put it outside of that if block:
if (total > 99.99 && total < 299.99) {
//...
}
if (total === 0) {
//...
}
Have a try with this
function manageRegalo() {
var totalStorage = Number(localStorage.getItem("total")) || 0;
var total = parseFloat($("#total").val());
if (totalStorage && total === 0) {
total = totalStorage;
}
$('#regalo').toggle(total > 99.99 && total < 299.99);
$("#alert").toggle(!total);
if ($('#regalo').is(":visible") && localStorage.getItem('suppress_gift_tooltip_1')!="true") {
$('.tooltip').show();
localStorage.setItem('suppress_gift_tooltip_1',"true");
window.setTimeout(function() {
$('.tooltip').fadeOut('slow');
}, 9000);
}
}
I am trying to display image on full screen on image click. In other words o click of image it will show in full screen
I tried like this but not working
$(".imageBlock").click(function () {
$('.imageBlock').css({'width':'100%','height':'100%','z-index':'9999'})
});
https://jsbin.com/hayalobixo/1/edit?html,css,js,output
$(function() {
var counter = 0;
$('.currentPage').text(counter+1);
$('#pre').prop('disabled', true);
$('#next').click(function() {
if (counter < 4) {
counter++;
$('.imageBlock').hide();
$('.imageBlock').eq(counter).show();
}
$('.currentPage').text(counter+1);
})
$('#pre').click(function() {
if (counter > 0) {
counter--;
$('.imageBlock').hide();
$('.imageBlock').eq(counter).show();
}
$('.currentPage').text(counter+1);
})
$('#next, #pre').click(function() {
if (counter == 0) {
$('#pre').prop('disabled', true);
} else if (counter == 4) {
$('#next').prop('disabled', true);
} else {
$('#pre').prop('disabled', false);
$('#next').prop('disabled', false);
}
})
$(".imageBlock").click(function () {
$('.imageBlock').css({'width':'100%','height':'100%','z-index':'9999'})
});
})
CSS:
div.imageBlock.full{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
JS:
$(".imageBlock").click(function () {
$('.imageBlock').addClass("full");
});
You can use - div as absolute positioned
$(function() {
$(".imageBlock").click(function () {
$(this).css({'width':'100%','height':'100%','z-index':'9999','position':'absolute'})
});
https://jsbin.com/kowogukave/edit?html,css,js,console,output
I have this function that will show a LOADING image when page is loading:
<script>
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('all', true);
show('loading', false);
});
</script>
jsfiddle
What I want to do is add a fadeIn effect to show div #all WHEN LOADING is complete.
Can I add a fadeIn effect in function show? Can I use jquery? Any ideas?
You can use following to function for fade in & fade out effect using javascript. CREDIT
function fadeIn(el, display) {
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .01) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}
function fadeOut(el) {
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .01) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
}
And change your show function to following.
function show(id, value) {
var el = document.getElementById(id);
if(value)
fadeIn(el)
else
fadeOut(el);
}
UPDATED FIDDLE
You can use jQuery's fadeIn method. e.g
function show(id, value) {
if(value){
$("#" + id).fadeIn(2000);
} else{
$('#' +id).hide();
}
}
https://jsfiddle.net/az9uaspr/
Put this in your "head" tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
And Just change your show() like this:-
function show(id, value) {
if(value)
$("#"+id).fadeIn("2000");
else
$("#"+id).hide();
}