I'm trying to make a CSS Rotator(Loader) visible after pressing a button. Then processing something and afterwards hiding the Rotator. But it seems that while processing the display:block atribute is set
but not visible (See console logs). How could I archive this? Thank you for your help!
Simplified code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function test(){
$('#loader').css("display","block");
console.log($('#loader').css("display"));
do_something();
console.log($('#loader').css("display"));
$('#loader').css("display","none");
console.log($('#loader').css("display"));
}
function do_something(){
for (var i=0; i<=10E9; i++){
}
}
$(document).ready(function() {
$('#loader').css("display","none");
$('#test_btn').click(test);
});
</script>
</head>
<body>
<div id="loader">Loader</div>
<button id="test_btn">test</button>
</body>
</html>
Browser doesn't update the DOM or change styling until your JS execution halts (which we are achieving using setTimeout. see my code below). That means if you set some element.style.[...] = "...", it won't kick in until your code finishes running (either completely, or because the browser sees you're doing something that lets it intercept processing for a few ms).
JS:
function show() {
$('#loader').css("display", "block");
}
function hide() {
$('#loader').css("display", "none");
}
function newTest() {
show();
setTimeout(() => {
do_something();
hide();
}, 50);
}
function do_something() {
for (var i = 0; i <= 1000; i++) {
console.log('i ', i);
}
}
$(document).ready(function () {
$('#loader').css("display", "none");
$('#test_btn').click(newTest);
});
Html:
<div id="loader">Loader</div>
<button id="test_btn">test</button>
I would suggest to read the answer given by #Mike 'Pomax' Kamermans Here
I just think your :
for (var i=0; i<=10E9; i++){
}
Make your page laggy since it's iterate a lot of time and can't update. Don't really know why.
But if you try to wait with a timer, it's working :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function test(){
$('#loader').css("display","block");
setTimeout(
function()
{
$('#loader').css("display","none");
}, 1000
);
}
$(document).ready(function() {
$('#loader').hide();
$('#test_btn').click(test);
});
</script>
</head>
<body>
<div id="loader">Loader</div>
<button id="test_btn">test</button>
</body>
</html>
Related
I know that there are countless questions about for loops or equivalent in JavaScript but I can't figure out how to make this one work.
<!-- Comes from https://github.com/sindresorhus/screenfull.js/edit/master/index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/5.0.2/screenfull.min.js"></script>
</head>
<body>
<img id = "img1" src="https://placeimg.com/200/150/nature" alt="">
<img id = "img2" src="https://placeimg.com/200/150/nature/2" alt="">
<button id="test">Click</button>
<script>
// WORKS:
// $(function () {
// $('#img1').click(function () {
// screenfull.request($('#img1')[0]);
// });
// });
var ids = ["#img1", "#img2", "#test"];
var item;
for (item of ids) {
$(function () {
$(item).click(function()) {
screenfull.request($(item)[0]);
}
})
}
</script>
</body>
</html>
Expected output: clicking on either of the two images should put it fullscreen.
Any idea? (I started with a for loop but I accept other solutions.)
I won't know the number of items in advance (nor their names) so the solution has to work with this specificity.
Just make a selector with both ids
$('#img1, #img2').click(function () {
screenfull.request(this);
});
with an array
var imgs = ['#img1', '#img2'];
$(imgs.join(',')).click(function () {
screenfull.request(this);
});
if you want to loop and reinvent what jQuery does for you
var imgs = ['#img1', '#img2'];
imgs.forEach(function(id){
$(id).click(function () {
screenfull.request(this);
});
});
So this is what i want to do. if my div doesn't contain anything a js file will write "no links check in the future."
my html file:
<div id="games" load="checknull(this)"></div>
my js file:
function checknull(id) {
gamelist = document.getElementById(id);
if (gamelist.innerHTML == null) {
gamelist.innerHTML = "No links check in the future"
}
}
But it doesn't work! I've linked the external js file correctly its name and the tag!
There is no load event on a div.
You can achieve the result you're looking for with the onload event of either body or window depending on the rest of your code:
<body onload="checknull(this)">
</body>
I tried this and works for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>empty div</title>
</head>
<body>
<div id="games"></div>
<script>
gameList = document.getElementById("games");
window.onload = function () {
if (!gameList.innerHTML) {
return (gameList.innerText = "No links check in the future");
}
};
</script>
</body>
</html>
There is two things that will not work. load handle doesn't exist on div so you could use window.onload and your condition "gamelist.innerHTML == null" will always be false you should use gamelist.innerHTML == "".
First of all, divs don't have event "load", so if you want to wait until the DOM is loaded use document.addEventListener("DOMContentLoaded", callback) instead.
Also, innerHTML and innerText either are strings, not null.
document.addEventListener("DOMContentLoaded", () => {
gamelist = document.getElementById("games");
if (!gamelist.innerHTML) {
gamelist.innerHTML = "No links check in the future"
}
});
<div id="games" load="checknull(this)"></div>
I want to modify a js script to be fired when the client is waiting for the server instead of fireing on loading. There you can see the script: FakeLoader.js, CSS
I found an ajax solution here, but I had no idea how to use it, as the script is inicialized in html. I think the key is at the end of the js file:
$(window).load(function(){
centerLoader();
$(window).resize(function(){
centerLoader();
});
});
On the html page, I have a text input field, which makes refresh on hitting enter, so I thought I could solve it by replacing the mentioned part with code from here :
$(document).keypress(function (e) {
if (e.which == 13) {
centerLoader();
$(window).resize(function(){
centerLoader();
});
}
});
This should fire the loader when enter was hit and show it while the server sends the new page, but instead it just does exatly the same thing before modifying the script, which is weird.
This is how it is initialized in html:
<div id="fakeLoader"></div>
<script type="text/javascript">
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
</script>
Could you give some idea? I am not good at js. Thank you.
I have a working sample with this:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<script src="http://joaopereirawd.github.io/fakeLoader.js/js/fakeLoader.js"></script>
<link rel="stylesheet" href="http://joaopereirawd.github.io/fakeLoader.js/demo/css/fakeLoader.css" />
<script>
window.onload = () => {
document.body.addEventListener('keydown', function (e) {
if (e.keyCode == 13) {
$("#fakeLoader").fadeIn();
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
}
});
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="fakeLoader"></div>
<script type="text/javascript">
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
</script>
</body>
</html>
Obviously that's not how you will want the end result to look. It'll be better to move the fake loader part to a function and make the keyCode stuff cross browser. That'll get you started though.
please don't duplicate me with: $(document).ready equivalent without jQuery
My question have a little difference. I will explain about this.
I has been put all my function on ready funtion like this.
$(document).ready(function () {
$("#liLanguage").find("a").click(function () {
ChangLanguage(this);
});
// orther a lot of function here
LoadDataToGrid();
}
It's done well
But, yesterday my PM said: "you don't need put your code in the ready function, you can run without ready function, put in ready function is very crazy and stupid."
I has been read more topic about ready function and window.onload() function. But no where say that we can't run a function in ready funtion. What's wrong with my code when i put all function in ready funtion?.
This is better
$(document).ready(function () {
$("#liLanguage").find("a").click(function () {
ChangLanguage(this);
});
}
Or this is better( without ready function)
$("#liLanguage").find("a").click(function () {
ChangLanguage(this);
});
Usually, PMs don't have an engineering background and they like to talk like they do. Try to watch for that.
Now to answer your question, you can simply add your script in the bottom of the HTML instead of in the head. That way your script will load after the DOM is ready each is basically what document.ready does.
I think, you put in ready function will better because it's independent where you put your code. For example:
Example 1:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
Test();
});
function Test() {
$("#test").click(function (){
console.log(2);
})
}
</script>
</head>
<body>
<input type = "button" id ="test" value = "Test">
</body>
</html>
But it will not run if you put code like this.
Example 2:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
Test();
function Test() {
$("#test").click(function (){
console.log(2);
})
}
</script>
</head>
<body>
<input type = "button" id ="test" value = "Test">
</body>
</html>
It will run ok if you put your script after html.
Example 3:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type = "button" id ="test" value = "Test">
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
Test();
function Test() {
$("#test").click(function (){
console.log(2);
})
}
</script>
It's mean: with example 1 you can put javascript any where, you don't need to care about it.
<script>
function clicky(e){
console.log(e) //the clicked element
}
</script>
<span onClick="clicky(this)">Clickable</span>
In the script above, the console.log(e) will give me the <span> that I clicked on.
Is there any way that I could omit the clicky(this) and still get the element?
It's because I don't want to put (this) all over the document.
Any answer are welcomed.
See this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div id="foo" style="background:blue; width:100px; height:100px">
<script>
function clicky(e){
console.log(e);
}
var foo = document.getElementById("foo");
foo.onclick = function(e){clicky((e || window.event).target);}
</script>
</body>
</html>
You could try this, not tested though.
var spans = document.getElementsByTagName('span');
spans.attachEvent('click'.'clicky');
function clicky(e){
console.log(e) //the clicked element
}
or
var spans = document.getElementsByTagName('span');
for (i in spans)
{
spans[i].attachEvent('click'.'clicky');
}
function clicky(e){
console.log(e) //the clicked element
}
function clicky(e, elem){
<span onClick="clicky(event, this)">Clickable</span>
Or you could use Prototype or jQuery or any other library. I would improve your life.