mootools - fx.scroll for horizontal website.

jmm0321 · 02-05-2009, 04:19 PM

I've been working on a portfolio website for myself and wanted to use a javascript smooth scroller to do so. I ran across a website yesterday that perfectly demonstrates exactly what I've been attempting to do (http://lucuma.com.ar/)

I ran across a post on another message board where a person recommended mootools (here is the js file and an example of it in use http://demos111.mootools.net/Fx.Scroll). I've been working on it off and on for days now and find myself rather frustrated with it because I can't get it to work. I really think that it's something small that I'm overlooking out of ignorance because I'm just not that familiar with javascript yet. I'm a novice to javascripting and just started taking a course on it in school this quarter.

I'm going to post ALL my code in hopes that some genius/badass can tell me what i'm doing wrong, because I'm really blank at this point. Any help at all would be GREATLY appreciated.

here is my site currently:
jmm0321.aisites.com/review/epic2.html
-------------
html:

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" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="joshuamcknight2.css" />
</style>

	<script type="text/javascript" src="mootools-1.2.1-core-jm.js">

<!-- this code calls on the java smooth scroll -->
	<script type="text/javascript" src="scroll.js"></script>






<!-- this code dims thumbnails until you roll over -->
	<script language="JavaScript1.2">

	//Highlight image script- By Dynamic Drive
	//For full source code and more DHTML scripts, visit 		

http://www.dynamicdrive.com
	//This credit MUST stay intact for use

	function makevisible(cur,which){
	strength=(which==0)? 1 : 0.2

	if (cur.style.MozOpacity)
	cur.style.MozOpacity=strength
	else if (cur.filters)
	cur.filters.alpha.opacity=strength*100
	}
	</script>



<!-- this code changes transparency of feilds for froms -->
	<style type="text/css">
	.field {
	border: 1px solid #006;
	color:black;
	-moz-opacity:0.5;
	filter:Alpha(Opacity=50);
	border:none;
	}
	</style>





<title>Joshua McKnight</title>
</head>
<body>







<div id="container">

	<div id="menu">
	<ul>
	<li>1.0<a href="javascript:ScrollWin.scroll('1')">HOME</a></li>
	<li>2.0<a href="javascript:ScrollWin.scroll('2')">ABOUT</a></li>
	<li>3.0<a href="javascript:ScrollWin.scroll('3')">GALLERY</a></li>
	<li>4.0<a href="javascript:ScrollWin.scroll('4')"">CONTACT</a></li>
	</ul>	
	<!-- ending menu div-->	
	</div>

<div id="siteout">
	<div id="site">
		<a name="epic1"></a>
		<div id="epic1">
		</div>

		<div id="epic2">
		</div>
		<a name="epic2"></a>
		<div id="epic3">
		</div>
		<div id="epic4">
		</div>
		<a name="epic3"></a>
			<!-- this is the gallery section -->
			<div id="epic5">
			<table>
			<tr>

			<td> <a href="gallery1.jpg" target"_self"><img 			

src="gallery1-thumb.jpg"style="filter:alpha(opacity=20);-moz-opacity:0.2" 		

	onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"> 	

</a></td>
			<td> <a href="gallery2.jpg" target"_self"><img 			

src="gallery2-thumb.jpg"style="filter:alpha(opacity=20);-moz-opacity:0.2" 		

	onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"> 

</a></td>
			<td> <a href="gallery3.jpg" target"_self"><img 			

src="gallery3-thumb.jpg"style="filter:alpha(opacity=20);-moz-opacity:0.2" 		

	onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"> 

</a></td>
			<td> <a href="gallery4.jpg" target"_self"><img 			

src="gallery4-thumb.jpg"style="filter:alpha(opacity=20);-moz-opacity:0.2" 		

	onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"> 

</a></td>
			<td> <a href="gallery5.jpg" target"_self"><img 			

src="gallery5-thumb.jpg"style="filter:alpha(opacity=20);-moz-opacity:0.2" 		

	onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"> 

</a></td>

			</tr>
			<tr>
			<td> <a href="gallery6.jpg" target"_self"><img 			

src="gallery6-thumb.jpg"style="filter:alpha(opacity=20);-moz-opacity:0.2" 		

	onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"> 

</a></td>
			<td> <a href="gallery7.jpg" target"_self"><img 			

src="gallery7-thumb.jpg"style="filter:alpha(opacity=20);-moz-opacity:0.2" 		

	onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"> 

</a></td>
                            <td> <a href="rubik.jpg" target"_self"><img 		

	src="rubik-thumb.jpg"style="filter:alpha(opacity=20);-moz-opacity:0.2" 		

	onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"> 

</a></td>
			<td> <a 

href="http://jmm0321.aisites.com/imd100/project4home.html" 			

target"_self" ><img 

src="gallery8-thumb.jpg"style="filter:alpha(opacity=20);-moz-opacity:0.2" 		

	onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"></a> 

</td>

			<td> <a 

href="http://jmm0321.aisites.com/zengarden/csszen.html" 			

target"_self"><img 

src="gallery5-thumb.jpg"style="filter:alpha(opacity=20);-moz-opacity:0.2" 		

	onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"> 

</a></td>
			</tr>
			</table>
			<!-- ending div for gallery section -->
			</div>
		<div id="epic6">
		</div>
		
		<div id="epic7">
		<form action="mail.php" method="POST" name="form">

		<p><label for="email"></label><input type="text" value="type your 

email" 		name="email" id="email" class="field"></p>
		<p><label for="userName"></label><input type="text" value="type 

your name" name="userName" id="userName" class="field"></p>
		<label for="misc"></label>
		<p>
		<textarea cols=30 rows=4 name="misc" id="misc" class="field" 

value="type message"></textarea>
		</p>
		<p><input type="submit" value="send"></p>
		</form>
		<!-- ending epic 7 div -->
		</div>


			<div id="epic8"><a name="epic4"></a>
			</div>
<!-- ending sitein div -->
	</div>


<div id=bottom>
	<div id="text1">
		<div id="section1">
		</div>
		<div id="word1">
		Welcome to the digital portfolio of Joshua McKnight
		</div>
	</div>

	<div id="text2">
		<div id="section2">
		</div>
		<div id="word1">
		This is the digital online portfolio of Joshua McKnight, an 

interactive digital experience<br /> intended to captivate as well as showcase 

artwork. I'am a highly creative<br /> and multitalented webdesigner with 

experience in graphic design and flash.
		</div>
	</div>

	<div id="text3">
		<div id="section3">
		</div> 
		<div id="word1">
		Here you can view graphic work, websites and flash animations 

that I've created.
		</div>
	</div>

	<div id="text4">
		<div id="section4">
		</div>
		<div id="word1">
		If your interested in working with me, please feel free to fill 

out<br /> this form and contact me directly!
		</div>
	</div>
<!-- ending bottom div -->
</div>

<!-- ending siteout div -->
</div>

<!-- ending container div -->
</div>

</body>
</html>

-----------------------
css:

Code:

body, html{
background-color: black; 
font-family: arial;
color:white;
font-size: 10px;
}

a:link { 
color:#96b5c5;
background-color: black;
text-decoration: none;
font-size: 15px;
font-weight: bolder;
font-family: times;
}
a:visited { 
color:#96b5c5; 
background-color: black;
text-decoration: none;
font-size: 15px;
font-weight: bolder;
font-family: times;
}

a:hover {
color:white;
background-color: #333333;
text-decoration: none;
font-size: 15px;
text-decoration: underline;
font-weight: bolder;
font-family: times;
} 

form{
position:relative;
top:310px;
left:100px;
}

ul{
margin:2px;
}
li{
display:inline;
padding:10px;
}


table{
width:700px;
position:relative;
top:205px;
left:75px;
}

input {border: 1px solid #006; 
-moz-opacity:0.5;
filter:Alpha(Opacity=50);
border:none;
} 

#table td {
margin:18px;
}

#container{
width:4421px;
height:514px;
margin:-10px;
border: 1px solid black;
}



#sitein{
width:100%;
overflow:hidden;
}

#site{
width:4422px;
height:514px;
margin:auto;
}



#epic1{
background:url(epic1.jpg);
width:360px;
height:514px;
float:left;
}

#epic2{
background:url(epic2.jpg);
width:720px;
height:514px;
float:left;
}

#epic3{
background:url(epic3.jpg);
width:720px;
height:514px;
float:left;
}

#epic4{
background:url(epic4.jpg);
width:600px;
height:514px;
float:left;
}

#epic5{
background:url(epic5.jpg);
width:822px;
height:514px;
float:left;
}

#epic6{
background:url(epic6.jpg);
width:456px;
height:514px;
float:left;
}

#epic7{
background:url(epic7.jpg);
width:372px;
height:514px;
float:left;
}

#epic8{
background:url(epic8.jpg);
width:372px;
height:514px;
float:left;
}

#menu{
position:fixed;
background-color: black;
width:100%;
height:50px;
letter-spacing: 2px;
margin:0px 0px 0px 1px;
}


#bottom{
background-color: black;
width:4425;
height:75px;
float:left;
}


#text1{
background-color: black; 
margin: 10px 1px 1px 50px;
font-family: arial;
color:white;
font-size: 10px;
width:980px;
height:48px;
float:left;

}

#text2{
background-color: black; 
margin: 10px 1px 1px 50px;
font-family: arial;
color:white;
font-size: 10px;
width:1265px;
height:48px;
float:left;
}

#text3{
background-color: black; 
margin: 10px 1px 1px 50px;
font-family: arial;
color:white;
font-size: 10px;
width:1250px;
height:48px;
float:left;
}

#text4{
background-color: black; 
margin: 10px 1px 1px 50px;
font-family: arial;
color:white;
font-size: 10px;
width:572px;
height:48px;
float:left;
}

#section1{
background:url(section1.jpg);
width:118px;
height:50px;
float:left;
}

#section2{
background:url(section2.jpg);
width:125px;
height:50px;
float:left;
}

#section3{
background:url(section3.jpg);
width:164px;
height:50px;
float:left;
}

#section4{
background:url(section4.jpg);
width:164px;
height:50px;
float:left;
}

#word1{
font-family: arial;
color:#999999;
font-size: 12px;
float:left;
margin:5px 0px 0px 0px;
}

----------------------
javascript:

Code:

var scroll = new Fx.Scroll('sitein', {
	wait: false,
	duration: 2500,
	offset: {'x': -200, 'y': -50},
	transition: Fx.Transitions.Quad.easeInOut
});
 
$('link1').addEvent('click', function(event) {
	event = new Event(event).stop();
	scroll.toElement('epic1');
});
 
$('link2').addEvent('click', function(event) {
	event = new Event(event).stop();
	scroll.toElement('epic3');
});
 
$('link3').addEvent('click', function(event) {
	event = new Event(event).stop();
	scroll.toElement('epic5');
});
 
$('link4').addEvent('click', function(event) {
	event = new Event(event).stop();
	scroll.toElement('epic8');
});