Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    mootools - fx.scroll for horizontal website.

    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');
    });
    Last edited by jmm0321; 02-05-2009 at 05:28 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •