I would like to show a loading spinner before any of the page elements load, and then load the page elements while the loading overlay is still on. Is this possible? I am using this code but the page still loads elements before the spinner shows up.
$(document).ready(function () {
setTimeout(function () {
$.loader.close();
// Do something after 5 seconds
}, 3000);
});
Add the below div right below the opening <body> tag.
<div class="loader"></div>
Add some .css
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
And jquery in header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
At the end, look after a loading gif image. Google is full :)
Related
I need some help. So there is this page that is using an iframe, for that reason the Cumulative Layout shift is pretty noticeable. So we wanted to use a preloader so that you cant see that. But the preloader code only shows the preloader for like 100ms. I wanted to change this is so I added this code in between the script tag. But now the preloader isn't going away at all. Just spinning on forever
This is the code:
jQuery(document).ready(function($) {
$(window).load(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {});
}, 200); // set the time here
});
});
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://example.com/example.svg') 50% 50% no-repeat #aa9767;
/* Change the #fff here to your background color of choice for the preloader fullscreen section */
}
.elementor-editor-active .loader {
display: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div class="loader"></div>
Two things seems wrong:
Your selector seems wrong, I am assuming its meant to be .loader
The function parameter in document.ready doesn't take parameters
jQuery(document).ready(function() {
$(window).load(function() {
setTimeout(function() {
$('.loader').fadeOut('slow');
}, 200); // set the time here
});
});
Situation:
I am looking for a jquery/ajax loader and found this thread helpful.
Now I am using this fiddle as my loader.
Everything works fine but I only have one concern.
Below the js code, 'responseTime' is fixed to 2.5 secs.
$.mockjax({ url: "/mockjax", responseTime: 2500 });
So if my page loads more than 5 secs, the loader only runs at 2.5 secs.
Question:
How am I going to depend the loader's time to my page's unpredictable loading time?
Your help is very much appreciated. Thanks!
You can show loader gif until window loads completely by
$(window).load(function(){
}
And do it like:
$(window).load(function(){
$('#cover').fadeOut(1000);
});
#cover {
background: url("http://www.aveva.com/Images/ajax-loader.gif") no-repeat scroll center center #FFF;
position: absolute;
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cover"></div>
<img src="https://i.ytimg.com/vi/lklDJ5VRQao/maxresdefault.jpg" />
It will start with showing gif and will be faded out once content gets loaded completely.
I found what I'm looking for from this site.
Below is the code I use.
$(document).ready(function(){
$("#spinner").bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxStop", function() {
$(this).hide();
}).bind("ajaxError", function() {
$(this).hide();
});
$('#button-upload').click(function() {
$('#spinner').show();
});
});
.spinner {
position: fixed;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
text-align:center;
z-index:1234;
overflow: auto;
width: 100px;
height: 102px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="spinner" class="spinner" style="display:none;">
<img id="img-spinner" src="http://sampsonresume.com/labs/pIkfp.gif" alt="Loading"/>
</div>
<input type = "submit" value = "Upload" id="button-upload" />
The loader is indefinite in this snippet, but it runs perfectly on my site.
Thanks guys for the help anyway =)
I just created my own loading screen with this code:
HTML CODE: <div class="loader"></div>
CSS CODE: .loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../Images/page-loader.gif) 50% 50% no-repeat rgb(249,249,249);}
jQuery CODE: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
AND
$(window).load(function() {
$(".loader").fadeOut("slow");})
Each time the page loads, the loading screen only displays for a fraction of a second. Im trying to display the loading screen at least 3 seconds. What jQuery code should I add?
use setInterval
$(window).load(function() {
setInterval(function() {
$(".loader").fadeOut("slow")
}, 3000);
});
To delay the fadeOut action you can use the delay() function in jQuery
https://api.jquery.com/delay/
This will delay your fadeout by 3s (3000ms).
$(window).load(function() {
$(".loader").delay(3000).fadeOut("slow");
})
I know that this is a frequent question but I can't find an answer that matches my requirements.
In short, I want to horizontal slide a box from the right-side (insivisible) part of the screen to the left and then from the left back to the right.
The html/css/js below demonstrates what I want:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style type="text/css">
#box-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80em;
background-color: #f00;
}
#box-2 {
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 4em;
background-color: #0f0;
}
#viewport {
overflow: hidden;
position: relative;
height: 100em;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="viewport">
<div id="container">
<div style="position: relative">
<div id="box-1">
</div>
<div id="box-2">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
});
</script>
</body>
</html>
Now, everything might seem fine except for two important things:
I do not want to specify a height for the outer viewport. I would like this viewport to adopt automatically the height of the highest item in the container
this code does not do what I want if you scroll down at the bottom of the page when the red box is visible and click on it: the green box comes within the viewport but it is scrolled at the bottom. I would like the green box to come in view directly. As a bonus, it would be nice if once the green box is in view, if I click on it, the red box came back in view at its previous scroll position.
Of course, this example has lots of other limitations (the default animation function provided by jquery sucks, etc...) but I believe I can fix them later.
Given the limitations of the solution I have posted here, I suspect that I did not chose the right approach but I have no idea on where I should start.
You need to scroll to the top of the div when you click on the box.
Here's the code:
$(function() {
var vheight = Math.max($("#box-1").height(), $("#box-2").height());
$("#viewport").height(vheight)
});
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
$('html,body').animate({
scrollTop: $("#box-1").offset().top
});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
$('html,body').animate({
scrollTop: $("#box-2").offset().top
});
});
I also updated the JS Fiddle: http://jsfiddle.net/Av7P3/1/
i use this script to open a modal:
<script type="text/javascript">
$(function(){
$('.compose').click(function() {
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissModalClass: 'close',
});
return false;
});
}); </script>
But when i'm at the bottom of the page and click the link, the modal opens at the top of the page.
So it looks like nothing happends, but i have to scroll to the top to see the modal opened.
Is it possible to send the user automatically to the top when the modal is opened?
use below code to move to top of page:
$('html, body').animate({scrollTop: '0px'}, 0);
Instead of 0, you can have some other value like 500 (its in milliseconds) to make it move to top slowly
You can add position: fixed and for example top: 30px to styles for #popup_bestanden_edit_name. If you do that, modal will appear always in the same place, no matter where the user is on the page. But then you must be careful, because if modal is higher than viewport, you won't be able to see the remaining part of modal.
If you still want to scroll to top (without animation), using JavaScript you can put
$('body').scrollTop(0);
right before your return false;
BTW, if you want to prevent default action of a link to fire, it's a better practice to do it that way:
$('.compose').click(function(event) {
// your code here
event.preventDefault();
}
I would suggest not to scroll to the top of the page. It is not good UX Design! We can have overflow hidden on the body. So, user can not scroll once popup comes to screen. We need to give position fixed to the main element of the popup.
I would suggest to check below snippet.
<html>
<head>
<title>Example</title>
<style type="text/css">
.nooverflow {overflow: hidden;}
.popup {position: fixed; z-index: 99;}
.cover {position: fixed; background: #000; opacity: .5; filter: alpha(opacity=50); top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
.popup-conteiner {overflow-y: auto; position: fixed; height: 100%; width: 100%; left: 0; top: 0; z-index: 101;}
.popup-block {position: relative; top: 100px; z-index: 101;}
</style>
</head>
<body>
<div id="popup">
<div class="cover"></div>
<div class="popup-conteiner">
<div class="popup-block">
<!-- POPUP's HTML GOES HERE -->
</div>
</div>
</div>
</body>
</html>
But, if it does not work then you can scroll page to the top of the page. You can use solution given by Rajesh as well. I would like to add a condition that if page is already animated then stop before doing new animation.
var htmlBody = $("html,body"),
top = 0;
if (htmlBody.is(':animated')) {
htmlBody.stop(true, true); //Need to stop if it is already being animated
}
htmlBody.animate({ scrollTop: top }, 1000); //Scroll to the top of the page by animating for 1 sec.