Jump to content
Please Use CODE Tags

Why doesn't it work? [Web-Dev]

Jeroen1322
By Jeroen1322
in Programming
 Share
Go to solution Solved by Jeroen1322,

I FOUND IT! the <div> that would be activated shouldn't have a class like 'slideRight'! :D

Posted

Hi guys!

 

I'm working on a presentation about myself in the form of a website and i got all the contect but the website was very boring and now i want to make it more like a presentation and when you scroll down the new text apairs. I have found a way to do it frome here but now it activates when i'm not close to the object when scrolling, even when i refresh it activates. There is some script to activate it when you're scrolling but that doesn't even work.. You can set the amount of pixels above the object for activation but that doesn't help. 

<!DOCTYPE HTML><html>	<head>		<title>TEST</title>		<link rel="stylesheet" href="animations.css">		<link href="style.css" rel="stylesheet" type="text/css"  media="all" />		<link href='http://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>		<script type="text/javascript">		jQuery(document).ready(function($) {			$(".scroll").click(function(event){						event.preventDefault();				$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);			});		});		</script>		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>		<link rel="stylesheet" href="css/animations.css">				<style type="text/css">		#object{			visibility: hidden;		};		</style>	</head><body><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><div id="object" class="slideRight"><h3>TEST</h3><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><script>	$(window).scroll(function() {		$('#object').each(function(){		var imagePos = $(this).offset().top;		var topOfWindow = $(window).scrollTop();			if (imagePos < topOfWindow+10) {					$(this).addClass("slideRight");			}		});	});</script></body></html>

Sorry for all the <br />'s :P

 

(The 10 after 'topOfWindow+' is the amount of pixels about to object to activate')

 

 

Thanks!

 

This is how it works

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
  • Solution

I FOUND IT! the <div> that would be activated shouldn't have a class like 'slideRight'! :D

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

This is a lonely topic, but congrats lol.

 

Also

 

you seem to like <br />'s alot :P

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×