For some reason, after I refresh website, code in .on('load', function()) doesn't want to work. First load is working fine, as intended.
That behaviour started to happen when I introduced loader (animation before page full loads). Before that everything worked just fine.
/* Before page loads */
$( function() {
$('#intro').hide();
});
/* After page loads */
$(window).on('load', function() {
$('.loader').hide();
$('#intro').fadeIn(3200);
includePartials();
slideOutLandingPage();
});
To be specific, problem is that $('#intro').fadeIn(3200); doesn't happen and $('#intro') still has attribute display: none;
Any idea what might be the reason for that? Any idea how to bypass this?
HTML:
<body>
<div class="loader"></div>
<div id="intro">
<div class="title">
<div class="title-block">
<h1>Pretty website</h1>
<h2>Click anywhere!</h2>
</div>
</div>
</div>
<div id="container">
...
</div>
</body>
</html>
There are no errors in console.
To your advice, I have added console.log in several places to check order in which they are called, but everything looks like it should.
When I delete /* Before page loads */ part it works on refresh just fine, but loader is (obviously) still there after loads. Not to mention that my whole structure (formatting) of page goes bad.
Here's how I put console.logs:
$( function() {
$('#intro').hide();
console.log('Before load');
});
/* After page loads */
$(window).on('load', function() {
console.log('After load 1');
$('.loader').hide();
$('#intro').fadeIn(3200);
console.log('After load 2');
includePartials();
slideOutLandingPage();
});
Since many people wrote in here about document ready - it's not the solution. It must specifically work on load.
I had the same problem with my loader.
I only used this to make all my container appear after window is loaded (this was my first test)
$(window).on('load',function() {
// Animate container
$(".container").animate({opacity:1}, 1500);
});
But it worked the when i reload the page, not when I refresh the page.
I was asking to myself why, but I think I might have the answer...
It's simply because I have this function inside my ready function.
$( document ).ready(function() { }
If I separate the two, everything work even when I refresh or reload the page.
The problem is because $("#intro").hide() is called after $("#intro").fadeIn() method. You need to remove calling hide method and append display:none property to the #intro element.
Something like this.
<body>
<div class="loader"></div>
<div id="intro">
<div class="title">
<div class="title-block">
<h1>Pretty website</h1>
<h2>Click anywhere!</h2>
</div>
</div>
</div>
<div id="container">
</div>
</body>
<style>
#intro {
display: none;
}
</style>
<script>
$(window).on('load', function() {
$('.loader').hide();
$('#intro').fadeIn(3200);
includePartials();
slideOutLandingPage();
});
</script>
Then this will be working.
I mean, it seems to work fine, no?
$(function() {
$('#intro').hide();
console.log('Before load');
});
/* After page loads */
$(window).on('load', function() {
console.log('After load 1');
$('.loader').hide();
$('#intro').fadeIn(3200);
console.log('After load 2');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader"></div>
<div id="intro">
<div class="title">
<div class="title-block">
<h1>Pretty website</h1>
<h2>Click anywhere!</h2>
</div>
</div>
</div>
Solution was to set intial display: none in css then remove "before load" actions and add few lines to on.load
/* After page loads */
$(window).on('load', function() {
console.log('After load 1');
$('.loader').hide();
$('#intro').css('display','flex').hide().fadeIn(3200);
console.log('After load 2');
includePartials();
slideOutLandingPage();
});
Little crude but works.
$( function() { is document ready event it is triggered after $(window).on('load'.
http://jsbin.com/siduyovaxi/edit?html,js,console,output
Related
The following script is the most common I found to be used for managing the preloader but does this actually work or is it just some stuff we display for few seconds and assume the content of the site would have been loaded by then?
Here is that script.
$(document).ready(function() {
$(window).on('load', function() {
$('.loader').fadeOut(); // will first fade out the loading animation
$('.preloader').delay(1000).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(1500).css({'overflow':'visible'});
});
});
and then the HTML
<body>
<div class="preloader">
<div class="loader"> .... </div>
</div>
<div class="content">...</div>
Another thing i would like to ask is if we can have a simple preloader that actually works with just JavaScript instead of jQuery.... there seems to be some problem displayed in console when using the latest version of jQuery
Thanks in advance
So, Im trying to get this id to fade in on the load of the page. I've seen the posts about fade in. However, I haven't found any related to an onLoad function. Could anyone help me out with this?
HTML:
<div id="intro"> HELLO, I AM </div>
Javascript:
$( "#intro" ).onLoad(function() {
$( "#intro" ).fadeIn( "slow")
});
There's no such jQuery function as onLoad. Also, you'll probably want to set the default display of your element to "none" using CSS. And, as #Andreas commented, you would then put the $.fadeIn() call in a $(document).ready() callback, so it only executes once the DOM is loaded. So, all together now:
HTML:
<div id="intro"> HELLO, I AM </div>
CSS:
#intro {
display: none;
}
JS:
$(document).ready(function() {
$("#intro").fadeIn("slow");
});
Below is my code. i want - when the page is loading then the header class will not visible but after loading the page it will slide down. How can I do it? thank you.
HTML:
<div class="header" style="width:100%;height:300px;background-color:#999">
</div>
JS:
$(document).ready(function() {
$('.header').slideDown();
});
You need to make the header display: none; with CSS first like this:
<div class="header" style="width:100%;height:300px;background-color:#999; display: none;">
</div>
Then your JS will show it and perform the animation like in this fiddle:
http://jsfiddle.net/S8XjL/
If you mean after everything on the page has loaded you might want to change your JS to:
$(window).on("load", function(){
$('.header').slideDown();
});
Using jQuery's ready function will cause the header to drop once the DOM is ready but not necessarily when the page has finished loading:
$(document).on("ready", function(){
$('.header').slideDown();
});
Just mention display:none in your CSS
<div class="header" style="width:100%;height:300px;background-color:#999; display:none">
</div>
In the dashboard from my project, the follow code handle all clicks in hyperlinks:
$('document').ready(function(){
$('#box').draggable();
$('#box').hide();
$('#button').click(function(){
$('#box').hide();
$('a').unbind();
});
$('a').click(function(e){
if($(this).attr('href') != 'logout.html') {
e.preventDefault();
$.get($(this).attr('href'), function(data){
var $temp = $('<div/>', {html:data});
$('#title').text($temp.find('title').text());
$('#text').html($temp.remove('head').html());
$('#box').show();
});
}
});
});
The content of the pages is opened in this <div>:
<div id="box">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
My problem is: after I "close" the <div> by clicking in 'button', I can't access the other options anymore, because all of them stay blocked. When I refresh the page all back to work.
Someone knows how to solve this?
Ok, after more tryouts I managed to find the problem: happens that the pages I open in the <div> have some included scripts on them. When I remove this scripts, the behaviour in the parent window back to normal. Probably some type of conflict between the two scripts are happening.
Using jQuery Mobile, I want an alert to display when the user opens a page
<div data-role="page" id="page3">
<div data-role="header">
<h1>Page Three</h1>
</div>
<div data-role="content">
<script>alert('How are you');</script>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
But the above code shows the alert on the startup of the app and when I open the page it does nothing. Thanks in advance for your help.
With jQueryMobile there are specific events to know when the page loads.
You should instead try the following (put this in your head element, before the body):
<script>
$('#page3').live('pageshow', function() {
alert('Page ' + $(this).attr('id') + ' about to be shown');
});
</script>
You could also handle instead the 'pagebeforeshow'/'pagecreate' events.
Try this
<script>
$("div[data-role=content]").eq(0).ready(function() {
alert('How are you');
});
</script>
Do it like this. It is assumed this div is loaded after page load.
Accessed with div Id.
$('#page3').load(function() {
alert("loaded....");
});
Accessed with div class.
$('.page').load(function() {
alert("loaded....");
});
In the <head> portion of your page place the following:
<script>
$(document).on('pageshow','#page3',function(){
alert('How are you');
});
</script>
Note: the .live() method has been deprecated. See the docs for more details about why. Also the .on() method is preferred but does require that you are using jQuery 1.7+. If you are pre jQuery 1.7 use delegate instead.
<script>
$(document).delegate('#page3','pageshow',function(){
alert('How are you');
});
</script>