Help with MooTools js scroll

mmm84 · 05-27-2008, 02:32 AM

Hey All, :-)

I'm trying to reproducen the scrolling effect that can be seen at http://www.melissahie.com/. However, I must say I am stuck at the very base - my buttons won't scroll anything anywhere. LOL

I thought I'd paste my code and hopefully you guys can see the error...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Adobe GoLive" />
		<title>scrollpage</title>
		<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
		<script type="text/javascript" src="js/mootools.r420.js"></script>
	</head>

	<body>
<!-- begin MENU -->
<div id="navmenu">
<div id="gotohome"></div>
<div id="gotoconcept"></div>
<div id="gotop5"></div>
<div id="gotop4"></div>
<div id="gotop3"></div>
<div id="gotop2"></div>
<div id="gotop1"></div>
<div id="gototerms"></div>
<div id="gotoprivacy"></div>
<div id="gotonews"></div>
<div id="gotocontact"></div>
<div id="gotocustomerservice"></div>
</div>
<!-- end MENU -->

<!-- begin CONTAINER --> 
<div id="container">

	<div id="home" class="positionning"></div>
	
	<div id="concept" class="positionning"></div>
	
	<div id="customer_service" class="positionning"></div>
	
	<div id="terms" class="positionning"></div>
	
	<div id="privacy" class="positionning"></div>
	
	<div id="contact" class="positionning"></div>
	
	<div id="news" class="positionning"></div>
	
	<div id="product_1" class="positionning"></div>
	
	<div id="product_2" class="positionning"></div>
	
	<div id="product_3" class="positionning"></div>
	
	<div id="product_4" class="positionning"></div>
	
	<div id="product_5" class="positionning"></div>

</div>
<!-- end CONTAINER -->

<!-- javascript -->
<script type="text/javascript">

	// navigations
	
	var skroll = new Fx.Scroll(window, {duration: 1500, wait: false, transition: Fx.Transitions.quadInOut});
	
	// website layouts
	
	$('gotohome').addEvent('click', function(){ skroll.toElement('home'); });
	$('gotoconcept').addEvent('click', function(){ skroll.toElement('concept'); });
	$('gotop1').addEvent('click', function(){  skroll.toElement('product_1'); 
	$('gotop2').addEvent('click', function(){ skroll.toElement('product_2'); });
	$('gotop3').addEvent('click', function(){ skroll.toElement('product_3'); });
	$('gotop4').addEvent('click', function(){ skroll.toElement('product_4'); });
	$('gotop5').addEvent('click', function(){ skroll.toElement('product_5'); });
	$('gotonews').addEvent('click', function(){ skroll.toElement('news'); });
	$('gotocontact').addEvent('click', function(){  skroll.toElement('contact'); 
	$('gotocustomerservice').addEvent('click', function(){ skroll.toElement('customer_service'); });
	$('gotoprivacy').addEvent('click', function(){ skroll.toElement('privacy'); });
	$('gototerms').addEvent('click', function(){ skroll.toElement('terms'); });
	</script> 
	</body>

</html>

As for the js file I tried to use the one at http://www.melissahie.com/js/mootools.r420.js, naturally.

And my css, just in case...

Code:

html { overflow: hidden; }
body { margin: 0; padding: 0; background-color: #080808; }

#container { background-color: #828906; width: 11600px; height: 2500px; }

/** PAGE POSITIONNING **/
.positionning { position: absolute; width: 1920px; height: 1200px; }
#home { background-color: #c99; top: 0; left: 0; height: 0; }
#concept { background-color: #cf3; top: 0; left: 1920px; }
#product_1 { background-color: #39c5bc; top: 1200px; left: 1920px; }
#product_2 { background-color: #e1ddd9; top: 1200px; left: 3840px; }
#product_3 { background-color: #49c1c1; top: 1200px; left: 5760px; }
#product_4 { background-color: #f0f; top: 1200px; left: 7680px; }
#product_5 { background-color: #c08e55; top: 1200px; left: 9600px; }
#customer_service { background-color: #418c83; top: 0; left: 5760px; }
#terms { background-color: #80727d; top: 0; left: 7680px; }
#privacy { background-color: #923253; top: 0; left: 9600px; }
#contact { background-color: #c17e00; top: 1200px; left: 0; }
#news { background-color: #346855; top: 0; left: 3840px; }

#navmenu { background-color: #e75375; position: absolute; top: 0; left: 0; width: 100%; height: 80px; }
#gotohome { background-color: #ffb4bf; position: absolute; top: 10px; left: 10px; width: 40px; height: 60px; }
#gotoconcept { background-color: #78d2e6; position: absolute; top: 10px; left: 60px; width: 40px; height: 60px; }
#gotop1 { background-color: #d8d9c5; position: absolute; top: 10px; left: 110px; width: 40px; height: 60px; }
#gotop2 { background-color: #f1dbdd; position: absolute; top: 10px; left: 160px; width: 40px; height: 60px; }
#gotop3 { background-color: #cce3e7; position: absolute; top: 10px; left: 210px; width: 40px; height: 60px; }
#gotop4 { background-color: #e7d4c7; position: absolute; top: 10px; left: 260px; width: 40px; height: 60px; }
#gotop5 { background-color: #6dd2e9; position: absolute; top: 10px; left: 310px; width: 40px; height: 60px; }
#gototerms { background-color: #ffb982; position: absolute; top: 10px; left: 460px; width: 40px; height: 60px; }
#gotoprivacy { background-color: #7f2d6b; position: absolute; top: 10px; left: 510px; width: 40px; height: 60px; }
#gotonews { background-color: #ffb0ba; position: absolute; top: 10px; left: 560px; width: 40px; height: 60px; }
#gotocontact { background-color: #ffe100; position: absolute; top: 10px; left: 610px; width: 40px; height: 60px; }
#gotocustomerservice { background-color: #842c38; position: absolute; top: 10px; left: 660px; width: 40px; height: 60px; }