Fade in effect on page load - javascript

I am trying to make my homepage consistently have a fade in effect when this loads. however, it only works part of the time. This is the current script I am using. I set it to html, since individual div elements didn't seem to work, but setting it to html does and doesn't.
$(document).ready(function () { $('html').hide().fadeIn(1500).delay(6000)});

set to priority before other scripts.
$(document).ready(function () { $('body').hide().fadeIn(1500).delay(6000)});

Try the below code. It will work:
Set ur body first:
<body>
This is my page
</body>
Now the jQuery:
$(document).ready(function(){$("body").hide().fadeIn(1000);});

Check out some Loading effect at CODROPS Article ..
u may find it useful
http://tympanus.net/codrops/2013/09/18/creative-loading-effects/

It won't work if the page loads too slow.
Maybe a lot of images(large photos), scripts etc.
Or just because the slow internet connection.

Related

Image slideshow at onload not working properly

I know this question has been asked before a lot but I checked most of those and didn't find solution to my problem so I'm asking here again.
So, question is:
I'm working on a cinema website project.
I added a few pictures as slide show in my home page but for some reason, slideshow is not working properly. It has some glitch in it like sometimes order is not correct and sometimes all pictures try to come up at one time or they change super fast etc.
I guessed maybe it's bcz somehow when I reload the website, the previous onlaod also keeps on working so it's like there are 2 slideshows going on or something like that, so from other solutions I guess I have to put onload=null somewhere maybe but I can't figure it out exactly.
Any help would be really appreciated.
This is my html code for slideshow:
<div class="bg-movies" style="top: 65%;">
<img src='images/slideshow/war.jpg' width='1000' height='300'
onload="setSlide();"/>
</div>
And this is my javascript code:
<script language='javascript'>
<!--
var toprated=new Array('sarkar.jpg','hajwala.jpg','96.jpg','war.jpg');
var pos=0,x;
document.images[1].src='images/slideshow/'+toprated[0];
function setSlide(){
x=setInterval('chgPic()',2000);
}
function chgPic(){
pos=(++pos)%toprated.length;
document.images[1].src="images/slideshow/"+toprated[pos];
}
-->
</script>
Your problem is recursion. You are calling the setSlide() method once your image is loaded. This will set up the interval to call the chgPic(), but when the chgPic() method is called and it updates the image src, the onload event on the img tag will be executed again (because an image has been loaded). Therefore setSlide() will be called again which will set up another interval to call the chgPic() method. And on and on etc. I'm surprised your browser hasn't crashed.
What you should do is set up the interval (i.e. call the setSlide() method) once the page has loaded, or even better yet, use jQuery's document ready if you're using jQuery:
$( document ).ready(function()
{
}
And call your setSlide() method in here.
Although, I wouldn't recommend doing it the way you are. You can use some simple jQuery and CSS to get this to work. Take a look at this link.

IE8 seems to execute js before css is rendered

I've got a weird problem. I'm using Bootstrap for a website that has to be optimized for IE8. When i test the html prototype in a real IE8 (no IE emulation) the javascript seems to be executed before the website is rendered.
To prevent this I placed the javascript at the bottom of the body and the script is surrounded by a window load function.
Do i miss something? I don't want to use a SetTimeout.
A short js code example.
$(window).load(function() {
// for example a function that resets the sliders offset
function reset_slider() {
$('.slider-main').css({'margin-top': '0px'});
}
reset_slider();
}
All Browsers beside IE8 execute this script after the site is rendered.
Thanks in advance
Marcus
Set your js function to load after the page has.
window.onload = yourfunction
or you could use:
<body onload="yourfunction();">

Going to a page anchor after load adding transition

I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()

jQuery slow reveal on page load

I am trying to do a slow reveal on a particular div with an id of 'contentblock' on page load. This is my first time trying to code something in jQuery and I continue to fail. The following is my latest attempt, but I'm a complete newbie to this and surprisingly google hasn't been a whole lot of help.
<script type='text/javascript'>
$(window).onload(function(){
$('#contentblock').slideDown('slow');
return false;
});
</script>
before that I also had the following instead of the window onload line above:
$(document).ready(function(){
But that didn't have any success either. Can someone help a jQuery newbie out?
First, you'll need to make sure the element is hidden (or it won't be shown, since it's already visible). You can do this in either CSS or JavaScript/jQuery:
#contentblock {
display: none;
}
Or:
$('#contentblock').hide();
If you use CSS to hide the element you need to be aware that the element will remain hidden in the event of JavaScript being disabled in the user's browser. If you use JavaScript there's the problem that the element will likely flicker as it's first shown and then hidden.
And then call:
$(window).load(function(){
$('#contentblock').slideDown('slow');
});
I've made two amendments to your jQuery, first I've changed onload to load and I've also removed the return false, since the load() method doesn't expect any value to be returned it serves no purpose herein.
For the above jQuery you can use instead:
$(document).ready(function(){
$('#contentblock').slideDown('slow');
});
$(document).ready(function(){
if($('#contentblock').is(':hidden'))
{
$('#contentblock').slideDown('slow');
}
});
if you have jquery added to your project and your div is display none ... something like this should work.

hide before load completed -jquery

I have tried this code to hide the body, and show when is loaded in totality. But I noticed that is not working well, because when the fade occurs, some images are not yet loaded.
How I can do this effect?
<script type="text/javascript">
$(document).ready(function(){
$('.nav').fadeIn(700);
});
</script>
<body class="nav" style="display: none">
Surely it's as simple as:
$(window).load(function() {
$('.nav').fadeIn(700);
});
If you want to wait for the images (questionable idea, but it's your site) you can just handle the "load" event instead:
$(document).load(function() { $('.nav').fadeIn(700); });
I say that that's a questionable idea because it may take some time to get the images, and that may be confusing. However, I don't have any clue what your site looks like, of course, so perhaps it's fine.
Oh, also: if you're really just targetting the body element, then you can just use
$('body').fadeIn(700);
Not that it matters at all in this context, but that's going to be more efficient.

Categories

Resources