Hello,

I have a couple of errors in my code which I have no idea how to fix.I have made the site one page so when the user scrolls to the about us section for example it will hover over the button in the menu. Now that all works but if I was thinking from a users point of view scrolling in between these sections it seems to glitch between the buttons.

 

if there is any other errors you see let me know.

 

http://www.matthewclaffey.com/updatesite/index.php live example

 

jquery code: (I have only a few months experience in jquery)

 

$(document).ready(function(){

$("html, body").animate({ scrollTop: 0 }, "slow");

$('.about-me').hide();

$('.work').hide();

$('.contact').hide();

$('.container2').hide();

$('.header').hide();

$('.container2').delay(400).fadeIn('fast');

$('.header').delay(600).fadeIn('fast');

$('#recent1').hide();

$('#recent2').hide();

$('#recent3').hide();

$('#recent4').hide();

$('#recent5').hide();

$('#recent6').hide();

// the function that changes the button when scrolling

$(window).scroll(function(){

if(($(window).scrollTop()>0)){

$('.header li').removeClass('hovered');

$('li#home').addClass('hovered');

}

if ($(window).scrollTop()>400){

$('.about-me').fadeIn('fast');

$('.header li').removeClass('hovered');

$('li#about').addClass('hovered');

}

if (($(window).scrollTop()>950)){

$('.work').fadeIn('fast');

$('.header li').removeClass('hovered');

$('li#work').addClass('hovered');

$('#recent1').delay(200).fadeIn('fast');

$('#recent2').delay(300).fadeIn('fast');

$('#recent3').delay(400).fadeIn('fast');

$('#recent4').delay(500).fadeIn('fast');

$('#recent5').delay(600).fadeIn('fast');

$('#recent6').delay(700).fadeIn('fast');

}

if (($(window).scrollTop()>1350)){

$('.contact').fadeIn('fast');

$('.header li').removeClass('hovered');

$('li#contact').addClass('hovered');

}

});

$('#home').click(function(){

$("html, body").animate({ scrollTop: 0 }, "slow");

$('.header li').removeClass('hovered');

$('li#home').addClass('hovered');

});

$('#about').click(function(){

$("html, body").animate({ scrollTop: 600 }, "slow");

$('.header li').removeClass('hovered');

$('li#about').addClass('hovered');

});

$('#work').click(function(){

$("html, body").animate({ scrollTop: 1050 }, "slow");

$('.header li').removeClass('hovered');

$('li#work').addClass('hovered');

});

$('#contact').click(function(){

$("html, body").animate({ scrollTop: 1850 }, "slow");

$('.header li').removeClass('hovered');

$('li#contact').addClass('hovered');

});

});

your help would be awesome thanks

try the folowing code

			 <script>


			 	$(document).ready(function(){

		 $("html, body").animate({ scrollTop: 0 }, "slow");

		 $('.about-me').hide();

		$('.work').hide();

		$('.contact').hide();

		$('.container2').hide();

		$('.header').hide();

		$('.container2').delay(400).fadeIn('fast');

		$('.header').delay(600).fadeIn('fast');


		$('#recent1').hide();

		$('#recent2').hide();

		$('#recent3').hide();

		$('#recent4').hide();

		$('#recent5').hide();

		$('#recent6').hide();			

		  $(window).scroll(function(){

					if(($(window).scrollTop()>0) && $(window).scrollTop()<399){

						$('.header li').removeClass('hovered');

						$('li#home').addClass('hovered');	

					} 

					if ($(window).scrollTop()>400 && $(window).scrollTop()<949){

						$('.about-me').fadeIn('fast');

						$('.header li').removeClass('hovered');

						$('li#about').addClass('hovered');


					}

					if (($(window).scrollTop()>950) && $(window).scrollTop()<1349){

						$('.work').fadeIn('fast');

						$('.header li').removeClass('hovered');

						$('li#work').addClass('hovered');

						$('#recent1').delay(200).fadeIn('fast');

						$('#recent2').delay(300).fadeIn('fast');

						$('#recent3').delay(400).fadeIn('fast');

						$('#recent4').delay(500).fadeIn('fast');

						$('#recent5').delay(600).fadeIn('fast');

						$('#recent6').delay(700).fadeIn('fast');

					}

					if (($(window).scrollTop()>1350)){

						$('.contact').fadeIn('fast');

						$('.header li').removeClass('hovered');

						$('li#contact').addClass('hovered');

					}

		});

		$('#home').click(function(){

			 $("html, body").animate({ scrollTop: 0 }, "slow");

			 $('.header li').removeClass('hovered');

						$('li#home').addClass('hovered');



		});

		$('#about').click(function(){

			 $("html, body").animate({ scrollTop: 600 }, "slow");

			 $('.header li').removeClass('hovered');

						$('li#about').addClass('hovered');



		});

		$('#work').click(function(){

			 $("html, body").animate({ scrollTop: 1050 }, "slow");

			 $('.header li').removeClass('hovered');

						$('li#work').addClass('hovered');


		});

		$('#contact').click(function(){

			 $("html, body").animate({ scrollTop: 1850 }, "slow");

			 $('.header li').removeClass('hovered');

						$('li#contact').addClass('hovered');

		});

	});

			</script>

also you are using

 <script src="js/js.js" type="text/javascript"</script>

<script>

</script>

what should be

 <script src="js/js.js" type="text/javascript"></script>

Edited July 11, 201313 yr by D4Y0

 

try the folowing code

			 <script>
			 
			 	$(document).ready(function(){
		 $("html, body").animate({ scrollTop: 0 }, "slow");
		 $('.about-me').hide();
		$('.work').hide();
		$('.contact').hide();
		$('.container2').hide();
		$('.header').hide();
		$('.container2').delay(400).fadeIn('fast');
		$('.header').delay(600).fadeIn('fast');
		
		$('#recent1').hide();
		$('#recent2').hide();
		$('#recent3').hide();
		$('#recent4').hide();
		$('#recent5').hide();
		$('#recent6').hide();			
		  $(window).scroll(function(){
					if(($(window).scrollTop()>0) && $(window).scrollTop()<399){
						$('.header li').removeClass('hovered');
						$('li#home').addClass('hovered');	
					} 
					if ($(window).scrollTop()>400 && $(window).scrollTop()<949){
						$('.about-me').fadeIn('fast');
						$('.header li').removeClass('hovered');
						$('li#about').addClass('hovered');
							
					}
					if (($(window).scrollTop()>950) && $(window).scrollTop()<1349){
						$('.work').fadeIn('fast');
						$('.header li').removeClass('hovered');
						$('li#work').addClass('hovered');
						$('#recent1').delay(200).fadeIn('fast');
						$('#recent2').delay(300).fadeIn('fast');
						$('#recent3').delay(400).fadeIn('fast');
						$('#recent4').delay(500).fadeIn('fast');
						$('#recent5').delay(600).fadeIn('fast');
						$('#recent6').delay(700).fadeIn('fast');
					}
					if (($(window).scrollTop()>1350)){
						$('.contact').fadeIn('fast');
						$('.header li').removeClass('hovered');
						$('li#contact').addClass('hovered');
					}
		});
		$('#home').click(function(){
			 $("html, body").animate({ scrollTop: 0 }, "slow");
			 $('.header li').removeClass('hovered');
						$('li#home').addClass('hovered');
		
						
		});
		$('#about').click(function(){
			 $("html, body").animate({ scrollTop: 600 }, "slow");
			 $('.header li').removeClass('hovered');
						$('li#about').addClass('hovered');
						
					
		});
		$('#work').click(function(){
			 $("html, body").animate({ scrollTop: 1050 }, "slow");
			 $('.header li').removeClass('hovered');
						$('li#work').addClass('hovered');
		
		});
		$('#contact').click(function(){
			 $("html, body").animate({ scrollTop: 1850 }, "slow");
			 $('.header li').removeClass('hovered');
						$('li#contact').addClass('hovered');
		});
	});
			</script>

also you are using

 <script src="js/js.js" type="text/javascript"</script>
<script>
</script>

what should be

 <script src="js/js.js" type="text/javascript"></script>

 

Thankyou it worked however we have no discovered a new error if you go to the web address and click the work link and then refresh the page the work link is still hovered when it should be home (home should be default) so what i did was before any scrolling functions ive just added the class to home automatically but nope it doesn't do it i have to refresh twice for it to work.

If you have to refresh it twice to work, then clear your cache

It works now I didnt have to do anything it was just a cache problem.