...

View Full Version : mootools - fx.scroll for horizontal website.



jmm0321
02-05-2009, 05: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:

<!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:


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:

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');
});



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum