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.
Related
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>
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.
Hi Teams from all around,
I am most stumped on this issue.
I am attempting to use color box to create a pop up of a url through an iframe. (please not that the creative and source I have are the test pages, not actual subject). I am looking to have the iframe close after 12 seconds unless someone click within the iframe on the images within.
Basically it is a floater that will be for things such as group newsletters. I want to be able to just switch out the source page and have it available when the page first loads.
So, the page loads, starts the iframe floater, closes after (x) seconds unless someone clicks anywhere on the iframe, at that point they have to hit the close button.
I have been working on this for 2 days, and I either have it where the floater does not close at all or the floater refuses to stay open.
Please help.
And Much thanks in advance.
Preview Page:
http://matthewsallansdesign.com/Scripps/TestPageSETUP.html
Code on Parent Page:
<link rel="stylesheet" href="http://matthewsallansdesign.com/Scripps/images/colorbox.css">
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.min.js"></script>
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.colorbox-min.js"></script>
<script>
Var t;
window.onload = $(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"95%", height:"95%", open:true, opacity:.2, overlayClose:false, escKey:false, closeButton:true, reposition:true});
});
</script><script>
window.onload = $(document).bind('cbox_complete', function(){
t = setTimeout($.colorbox.close, 12000);
});
</script><script>
$(".iframe").click(function(){
alert("click");
clearTimeout(t);
};
</script>
<a class='iframe' href="http://matthewsallansdesign.com/Scripps/testPageA.html"></a>
Code on Child Page:
<script type="text/javascript">
$('body').click(function(){
parent.postMessage('alert','moooo');
});
</script>
<img src="http://matthewsallansdesign.com/imgCreativeContent/imgExpanded/creative/grassSet3.png" />
Thanks,
I actually was semi close before.
Here is how I did it. I am leaving this here for future people to learn from and have a very easy time.
Allowing the future web developers to learn.
Parent:
<link rel="stylesheet" href="http://matthewsallansdesign.com/Scripps/images/colorbox.css">
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.min.js"></script>
<script src="http://matthewsallansdesign.com/Scripps/images/jquery.colorbox-min.js"></script>
<script>
var t;
var iframeHost = "http://matthewsallansdesign.com"
if(typeof window.postMessage != 'undefined'){
var iframeListener = function (event) {
console.log(event);
if(iframeHost == event.origin){
clearTimeout(t);
}
}
if (window.addEventListener) {
addEventListener("message", iframeListener, false);
}
else {
attachEvent("onmessage", iframeListener);
}
}
window.onload = $(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"95%", height:"95%", open:true, opacity:.2, overlayClose:false, escKey:false, closeButton:true, reposition:true});
});
window.onload = $(document).bind('cbox_complete', function(){
t = setTimeout($.colorbox.close, 6000);
});
</script>
<a class='iframe' href="http://matthewsallansdesign.com/Scripps/testPageA.html"></a>
Child:
<script type="text/javascript">
$('body').click(function(){
parent.postMessage("HAMPSTERS",'*');
});
</script>
<img src="http://matthewsallansdesign.com/imgCreativeContent/imgExpanded/creative/grassSet3.png">
The only thing anyone needs to actually do with this is replace the urls above.
I recommend everyone download the js and css on their own servers.
I will leave it up so others can find it.
Thanks,
Matthew
It seems that i cannot call focus() on a textarea of my chrome extensions popup when it gets opened / after ondomready.
i have something like that in popup.js :
$(document).ready(function () {
console.log($("#moped-text"));
$('textarea').focus();
$('.container').css("color", "red");
});
i reference it in popup.html like that:
<html>
<head>
<link rel="stylesheet" href="css/content.css" type="text/css">
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</head>
<body>
<div class="container">
<textarea name="newText"></textarea>
</div>
</body>
The css-change works, the focus() does not!
When i debug the popup and type $('textarea').focus(); in the console, it works.
Also events added inside the ready-callback are bound successfully.
Any help highly appreciated!
i still don't know, why the focus is not set at the first place, but a simple timeout does the job :)
setTimeout(function() {
$('#moped-text').focus();
}, 500);
Workaround for Chrome 18 (found here)
if(location.search !== "?foo")
{
location.search = "?foo";
throw new Error; // load everything on the next page;
// stop execution on this page
}
Works for me!
You have div with class "container" not id. So use this instead:
$('.container').css("color", "red");
I use this to focus.
My element has "autofocus" as an attribute. When the form is loaded, the element with the attribute "autofocus" gets the focus.
.directive('autofocus', ['$timeout', function($timeout) {
return {
restrict: 'A',
link : function($scope, $element) {
$timeout(function() {
$element[0].focus();
});
}
}
}])
You can simply use <textarea name="newText" autofocus></textarea>.
I have an external JS file that I load into my HTML
<script type="text/javascript" src="../js/busy.js"></script>
The script file itself looks like this:
window.onload = setupFunc;
function setupFunc() {
document.getElementsByTagName('body')[0].onclick = clickFunc;
hideBusysign();
Wicket.Ajax.registerPreCallHandler(showBusysign);
Wicket.Ajax.registerPostCallHandler(hideBusysign);
Wicket.Ajax.registerFailureHandler(hideBusysign);
}
function hideBusysign() {
document.getElementById('busy').style.display ='none';
}
function showBusysign() {
document.getElementById('busy').style.display ='block';
}
function clickFunc(eventData) {
var clickedElement = (window.event) ? event.srcElement : eventData.target;
if (clickedElement.type.toUpperCase() == 'BUTTON' || clickedElement.type.toUpperCase() == 'SUBMIT') {
showBusysign();
}
}
Basically, it shows a little busy indicator within my website.
I also have an onload function in my body tag, this is new and helps me focus on the username text field when the page loads.
<body lang="de" class="fade-in one" onLoad="document.forms.login.username.focus();">
However, since I added this last functionality, the busy indicator stopped working because it also uses the onload function. What can I do to make it work again?
it's not the most elegant way .. but it will work
<body lang="de" class="fade-in one" onLoad="document.forms.login.username.focus();setupFunc();">
Remove your body onload tag and put:
<script type="text/javascript">
window.onload = function() {
document.forms.login.username.focus();
setupFunc();
};
</script>
After your external Javascript (make sure it's still in the <head> tag). That should change window.onLoad to your custom function, which does what you need and then calls setupFunc.