Delay with slow fade in after rest of page is loaded - Javascript - javascript

Basically, what I want to do is make it so that a Div with an image fade in after a delay, after the rest of the page has loaded. So all of the page would load, then there would be a delay, then the image would fade in. Here is my code. It doesn't seem to be working.
$(window).load(function() { // $(document).ready shorthand
$('.contentrightCopy').delay(i * 400).fadeIn(2000);
});

Fixed the problem. Works fine now.
I added...
display: none;
To the CSS of the .contentrightCopy then added this javascript.
$(window).load(function() {
$('.contentrightCopy').delay(2000).fadeIn(2000)
})

Related

jQuery .onload Function to Remove Scrollbar Until Page Load Not Working

I want a jQuery function that removes the vertical scrollbar until the page has fully loaded but it doesn't seem to be working. Any insight on the problem would be great. Thanks!
$(window).on('load', function () {
$('body').addClass('stop-scrolling');
$('body').removeClass('stop-scrolling');
});
.stop-scrolling {
height: 100%;
overflow: hidden;
}
The issue here is that your JS doesn't run until after the page has finished loading. This means the scroll bar is visible the entire time the page is loading. Then, once the page loads, you add the stop scrolling class and then, milliseconds later, you remove it again. The net result of this is that nothing appears to happen.
To achieve what you need, put the .stop-scrolling class directly in the HTML source of your page on the <body> element and then only remove it in the window.load event handler.

How to fade in page content after refresh?

I've built a fairly simple site that utilizes pjax to load content. My problem is: once a user scrolls to say... the middle of any given page and performs a refresh, the page reloads starting at the top, then jumps down to whatever distance from the top the user was at when they refreshed.
My question is: how can I hide ALL document content after a refresh, then fade everything in after a short timeout (half a second, for instance) to avoid the jarring page jump?
Any help/advice is much appreciated!
You can set the content to display: none; in your CSS initially and have an onready handler call .fadeIn(): https://jsfiddle.net/19e14sev/
$(function() {
var secondsToWait = 2;
setTimeout(function() {
$('#content-selector').fadeIn();
}, secondsToWait * 1000);
});

jquery add opacity while scrolling and loading the page

So I have a page that is loaded through pjax (non-pjax in IE) where a you have a bunch of links at the bottom.
Everytime you click on the hyperlinks , I make it scroll to the top of the page.
What's happening is that it scrolls to the top of the page while the page is still loading.
I am fine with that, but I was wondering is there a way to add some opacity while the page is loading?
Note: I am not sure of a solution that would work in both pjax and non-pjax enabled browsers.
$(document).on('click', 'my-link a', function() {
$('html, body').animate({ scrollTop: 0 }, 'fast');
})
;
I personally find your question really hard to understand, but I made an example for you:
DEMO
HTML:
<body>
<div class="loader"></div>
<div id="content">
<img src="http://0.tqn.com/d/studenttravel/1/0/i/T/Silleteros-1.jpg" />
</div>
</body>
JS:
$(window).load(function() {
$("body").css({ opacity: 1.0 });
})
CSS:
body {
opacity: 0.5;
}
While page is loading, body is set to opacity 0.5, after page is finished loading, opacity will be set to 1.0.
Also added code to example fiddle that will not load image from cache, so that effect will always shown when fiddle is run (if effect is not shown when running it first time, try running it again). Hope this helps you.
depending on what content is beeing loaded you can add event listeners for onload then scroll / change opacity to lower value on 'onclick' event and revert on 'onload'.

Smoothly Fade In Entire Web Page With MooTools

I want to fade in an entire web page after all its elements finished loading. The web page includes the background image repeated left to right, and the main content area with some text and pictures. I assume I should set body opacity to 0 in CSS, and use JavaScript code to fade in the page.
I have to use MooTools, more specifically, version 1.2.6, because that library is already linked to the page (and shouldn't be upgraded to a more recent version, for a number of reasons).
One of the StackOverflow experts suggested this MooTools snippet as a solution:
window.addEvent('load', function() {
$$('body').set('morph', {duration: 300}).morph({'opacity': '1'});
});
PROBLEM: for some reason, instead of smoothly fading in the page, the snippet makes the background appear right away, and then, a second or so later, the page pops up, without any fade-in effect. Most likely it's me who's not doing things right.
I'd appreciate a bit of advice from a knowledgeable person.
The answer to your question is to do the following.
Remove the CSS opacity:0; in the stylesheet and use this code adjusted from yours
I increased from 300 to 3000 which in seconds is from .3seconds to 3seconds.
chained:
window.addEvent('load', function () {
$$('body').fade('hide').set('morph', {
duration: 3000
}).morph({
'opacity': '1'
});
});
expanded:
window.addEvent('load', function () {
var el = $$('body');
el.fade('hide'); // hide body tag
el.set('morph', {duration: 3000});
$$('body').morph({'opacity': '1'});
});
Notice:
I do agree with LifeInTheGrey about bad practice, but i said i would answer your question.

auto slidedown div not working when page fully loads

i want to make so when the page full loads the div content slides down once but not working here is code
$(document).ready(function() {
$('#slidercontent').delay(1000).slideDown(100);
});
no result ;( hot to fix it ?
html
<div id="slidercontent">(here goes my Slideshow)</div>
css
#slidercontent {width:1101px; height:195px; margin:0 auto;}
You just need to add display:none; in the CSS. Also I hope that you are including the jQuery library before your javascript:
Here's the working fiddle: http://jsfiddle.net/gopi1410/Sjarv/1/
(have increased the slideDown time to 1000 to make it more visible)
There is no default effect named slideLeft so you have to use:
$(document).ready(function(){
$("#selector").delay(1000).animate({width:0},500);
});
or you can use setTimeout() method
$(document).ready(function(){
setTimeout(function(){
$('#slidercontent').animate({width:0},100,function(){
// do some other stuff after the animation is complete
});
},1000);
});

Categories

Resources