Forums

CameronDuthie

Hi there,

I'm currently trying to get a website to load and i'm having a spot of difficulty and i was hoping someone could help me out with it.

The effect that i'm going for is that i'd like to have a gif file looping through as the website loads in the background and then once loaded the gif file to fadeaway and then i'd like the whole website to fade in.

This is what i have so far,


$(window).load(function() {
  $('#loader').fadeOut(2000)
});

$(function(){  
  $('body').fadeIn(2000);
});

This basically works fine apart from that they both run at the same time, instead i was hoping to run the .load script first then once completed the .fadeIn script to run.

Would anyone be able to nudge me in the right direction as i'm a total noob when it comes to jQuery?

Many Thanks,

Cameron

Johnnyb

Hey Cameron,

You could just trigger the fadeIn via a callback function on the fadeOut:


$(window).load(function() {
  $('#loader').fadeOut(2000, function(){
    $('body').fadeIn(2000);
  });
});

The fadeIn will run only when the fadeOut animation has completed.

John

CameronDuthie

@Johnnyb thanks for the tip, that's a much cleaner way of doing it than i did but unfortunately it causes parts of the script to stop working, the $('#loader').fadeOut(2000 doesn't run at all but the $('body').fadeIn works as expected though.

any other thoughts?

Thank you.

Cameron

Johnnyb

No worries, here's an example of it working for you: http://jsfiddle.net/jXGnT/2/

CameronDuthie

@JohnnyB Thanks for taking the time to write that fiddle.

It still wasn't working which was odd, giving me the error, unexpected token illegal because i foolishly copy and pasted it straight from your fiddle. After re-writing the code it all seemed to work!!

Thanks for again dude.

Cameron

CameronDuthie

@Johnnyb sorry to come back at you but it appears to have had strange effect on some of my scripts, it's not putting out any errors but my google maps and gallery section are now not loading fully.

I was wondering if you had any thoughts or work arounds on the matter? If not then no worries dude, i've appreciated the help so far.

Johnnyb

Hey Cameron,

Can you link to your site so I can take a look?

John

CameronDuthie

Hey @Johnnyb sorry i've taken a while to respond, i've had a tone of other errors and issues that i've been trying to work through.

I've decided to put the loading part on ice for now as i'm currently having difficulty with some other scripting issues which i was hoping you could maybe point me in the right direction, i'm trying to add keyboard navigation to the whole site and i've been following this tutorial by Remy Sharp but i can't seem to adapt it to my needs.

I'd like to add this code to the scrollTo plugin so when the user clicks the up or down keys the page will scroll to the next or previous section.


$('body').keyup(function (event) { 
	  		
  if(event.keyCode == 40) { //down key
  $('#nav-bar #nav li.current').parent().prev().find('a').click();	
  } else if (event.keyCode == 38) { //up key
  $('#nav-bar #nav li.current').parent().next().find('a').click();
  }

});

I'm not really having much luck on where or how to add this to the plugin and i was wondering if you had any insight on this one?

Thanks for you time,

Cameron

treehouse : what would you like to learn today?

Forums

[Solved] Loading...