MooScroll a simple comprehensive tutorial
March 2nd, 2008 by kip0130MooScroll is a script that uses the mootools framework. mootools is a light-weight take what you need framework its aimed at intermediate + JavaScript users. But in this tutorial I’m going to make it so easy a complete amateur can use it and use it correctly. Now to the scroller. MooScrool Allows a developer to set Id anchors in a particularly long page and scroll to them when linked fast or slow. It works in Internet explorer 6 and above. Mozilla and its friends along with Opera and Camino oh and we can’t forget Safari (which is also for Windows too!). ( View Demo)
The needed Scripts.
Mootools.js
Mooscroll.js
declarations.txt
Get them here( View Demo)
Once you have downloaded the scripts and the text file open them in your Code editor of your choice. Ideally would use Notepad++ or just plain notepad. But since this is aimed at amateurs and i want to show highlighted syntax the way they would see it I’m going to use Adobe’s Dreamweaver . we are going to be making a layout like my Flex free template (coming soon for download) Flex is a one page website that is ideal for a portfolio.
The Setup
I’m not going to go over how to setup a layout via Css and Divs if you really don’t know how to do that (you should by now). Head over to W3C Schools and indulge yourself for free
So open up your template in Dreamweaver and go to “code view” we are not going to be using design mode at all.Ever. So now you have your layout and you need to first link the code sources in your document head so the browser can find them and pull the needed information from the source files. I organize my site into folders one for Css one for JavaScript and one for images. So do the same and make your life easier ( I digress back on topic)
Your head of your document should look like this in Dreamweaver (below)
<!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″ />
<title>Site Title Here</title>
<link href=”css/mainstyles.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”js/mootools.js”></script>
<script type=”text/javascript” src=”js/mooscroll.js”></script>
</head>
The Navigation
In this case i will be using images for the navigation.It’s very important that you have not used any of the same id’s twice or it will *NOT* work. Your using Id’s because thats what this script calls for in this case. So heres my navigation code.
<div class="header"><!--Navigation Images --><a href='#hello'><img src="images/hello1.gif" alt="hello" id="button1"/></a><a href='#logodesign'><img src="images/Logodesign.gif" alt="logo" id="button2"/></a><a href='#webdesign'><img src="images/webdesign.gif" alt="web" id="button3"/></a><a href='#contact'><img src="images/contact.gif" alt="contact" id="button4" /></a><!--end navigation -->
</div>
Note the Ids used the are as follows. Id=”button1″ ,Id=”button2″, Id=”button3″ ,Id=”button4″
so now open up the file “declarations.txt” that you should have downloaded earlier. Open it and copy and pase the code into the bottom of your document near the </html> tag.
You want to edit the following to reflect what you just named that first id=”button1″
$('button1').addEvent('click', function(){
skroll.toElement('Element name next');
});
The Skroll.toElement line makes it so that when you click the button it goes to that element.
so to scroll to that section all you do is name an element for example <div id=”section 1″></div>
and add section one to that second line and it will scroll there. its as simple as that.
Files needed
Mootools.js
Mooscroll.js
declarations.txt
Get them here( View Demo)
Time needed
10-15 minutes (amateur) 2 minutes everyone else.
Popularity: 100% [?]
March 13th, 2008 at 5:54 am
Hi
Just used your tutorial, great stuff.
Im also trying to incorporate a the lightbox2 script by Lokesh Dhakar on the same page.
When I link the file prototype.js it stops the scrolling from working. Just wondering if you knew a fix for this or another lighbox script that will work with mooscroll.
thanks
Troy
March 14th, 2008 at 8:47 pm
Well Troy I would suggest mixing the two frameworks as it will add increased load time to your pages.
The solution is a bit out of the way but it is definitely worth the time
AlwaysBETA has a great tutorial on the solution
I hope you find this helpful!
March 21st, 2008 at 6:58 pm
[...] while ago I wrote a tutorial on using mooscroll to make one large page easier to navigate. Well I have done it again (or not?) I have made a [...]
April 12th, 2008 at 6:20 pm
Just wanted to say; Great tutorial