How to Create Coda(tm) like Scrolling Window using Mootools -2

August 9, 2007

As I promised earlier , here is the code to do it.

Look at the Final Output with some other Mootools Goodies at my website (http://www.lakkakula.com)

Assuming our html file is index.html and we have two folders names ‘js’ and ‘css’ to keep javascript and css files respectively. Download mootools.js and save in js/ folder.

Step 1:  Write HTML File ( I tookoff DOCTYPE and other header stuff to make it simple)

index.html

<html>
<head>
<script type=”text/javascript” src=”js/mootools.js” mce_src=”js/mootools.js”></script>
<script type=”text/javascript” src=”js/site.js” mce_src=”js/site.js”></script>
<link rel = “stylesheet” type=”text/css” href=” css/site.css” />
<link rel = “stylesheet” type=”text/css” href=” css/h.css” />
</head>
<body>
<ul>
<li id=”nav_about” class=”nav”> <span><a href=”#content_about”>About</a></span> </li>
<li id=”nav_portfolio” class=”nav”> <span><a href=”#content_portfolio”>Portfolio</a></span> </li>
<li id=”nav_projects” class=”nav”> <span><a href=”#content_projects”>Projects</a></span> </li>
<li id=”nav_blog” class=”nav”> <span><a href=”#content_blog”>Blog</a></span> </li>
</ul>
<div id=”demo-container”>
<div id=”demo-wrapper”>
<div id=”content_about” class=”scrolling-content”>
<div class=”box-content”>
<h1>About</h1>
<p> about about about about about about about about about about about
about </p>
</div>
</div>
<div id=”content_portfolio” class=”scrolling-content”>
<div class=”box-content”>
<h1>PortFolio</h1>
<p> portfolio portfolio portfolio portfolio portfolio portfolio portfolio
</p>
</div>
</div>
<div id=”content_projects” class=”scrolling-content”>
<div class=”box-content”>
<h1>Projects</h1>
<p> project project project project project project </p>
</div>
</div>
<div id=”content_blog” class=”scrolling-content”>
<div class=”box-content”>
<h1>Blog</h1>
<p> blog blog blog blog blog blog blog blog </p>
</div>
</div>
</div>
</div>
</body>
</html>

Step 2 :  Write Javascript to do Scroll Effect

js/site.js

window.addEvent(‘domready’, function(){
var scroll = new Fx.Scroll(‘demo-wrapper’, {
wait: false,
duration: 1500,
transition: Fx.Transitions.Quad.easeInOut
});

$(‘nav_about’).addEvent(‘click’, function(event) {
event = new Event(event).stop();
scroll.toElement(‘content_about’);
});

$(‘nav_projects’).addEvent(‘click’, function(event) {
event = new Event(event).stop();
scroll.toElement(‘content_projects’);
});

$(‘nav_portfolio’).addEvent(‘click’, function(event) {
event = new Event(event).stop();
scroll.toElement(‘content_portfolio’);
});

$(‘nav_blog’).addEvent(‘click’, function(event) {
event = new Event(event).stop();
scroll.toElement(‘content_blog’);
});
});

Step 3 :  Stylesheets

css/site.css

.nav {
float: left;
display: block;
width: 200px;
height: 50px;
text-align:center;
list-style-type: none;
}
.nav span
{
font: small-caps 900 14px arial;
color: blue;
}
#demo-container {
overflow: hidden;
width:800px;
height:600px;
}

#demo-wrapper {
width:800px;
position: relative;
height: 600px;
overflow: hidden;
}

.scrolling-content {
height: 600px;
}

css/h.css

.scrolling-content {
width:3200px;
position: absolute;
}

#content_about
{
left:0;top:0;
}

#content_portfolio
{
left:800px;top:0;
}
#content_projects
{
left:1600px;top:0;
}
#content_blog
{
left:2400px;top:0;
}

Thats It!

Optional

If you prefer vertical Scrolling rather than Horizontal……. its easy….. use this css instead of h.css

css/v.css

.scrolling-content {
width:800px;
float:left;
}

Let me know, If you like it.

Advertisements

20 Responses to “How to Create Coda(tm) like Scrolling Window using Mootools -2”

  1. LizharD Says:

    Cool!
    I’m trying to use it.
    One question: it is possible add a class like .current or .on to current selected?
    Thanks


  2. […] How to Create Coda(tm) like Scrolling Window using Mootools -2 « N Rao Lakkakula’s Blog (tags: coda scroll scrolling window mootools framework javascript web development tutorial) […]

  3. James Says:

    I assume that this is a typo

    Step 3 : Stylesheets
    css/site.js

    should it read
    css/site.css

    ?

    Cheers

  4. nlakkakula Says:

    Thanks James… I corrected it.

  5. Paul Says:

    Although I commend your effort, there is one fundamental flaw in your approach to this. The fact that if one turns off scripts, you no longer have site navigation.

    I suggest using links to div ID’s as one approach that could fix this.

  6. nlakkakula Says:

    Thanks Paul…. Thats a valid point. While I concentrated more on getting scrolling effect using mootools, I skipped these… but failover option is always required when publishing your site to world….
    (I updated “Menu” part of index.html to make it work when javascript is disabled)

  7. Paul Says:

    Good stuff, that looks much better. I trialled it with CSS off, JS off and normal on FF2, Vista and at 1280×1024 – just so you have a record that it works on those details.

    One problem though, it didn’t work at first and after checking your source, it’s the frame that is hurting it. If you run it from http://69.2.35.72/bob/lakkakula/, it works fine. But not from lakkakula.info.

    Oh and don’t look at my website for non-java working navigation. I’ve been so busy working on clients that I’ve had no time for my own website, dammit.

  8. nlakkakula Says:

    I think that IFRAME is a problem with “godaddy”, my domain registar. I am forwarding my domain to a linux box and with masking which creating an iframe to hide actual site. I might take off the mask. Thanks for obeservation though.

  9. Brian Says:

    It’s not working for me for some reason

  10. nlakkakula Says:

    Ed…
    I had a quick look at your site. Try moving your added Javascript code (for accordion) from html page to inside “Window.addEvent” call in site.js.

  11. Luke Says:

    Have any of you run into the mouse-scrolling issue?

    If you scroll your mouse, it pauses the scrolling animation.

    Know of any solutions for this?

    – Thanks

  12. Elisa Says:

    I would like to create the horizontal scrolling effect like the gucci website (http://www.gucci.com/us/catalog/fine-jewelry/) using mootools. The features are:
    1. other slides didn’t clipped away when out of the screen
    2. links control are not moving when scrolling the slides using horizontal scroll bar, such as the gucci logo at the bottom.

    Do you know how to achieve this effect?
    I was thinking using frameset or iframe. That means, navigation control on one frame, and the slides on the other frame. Unfortunately, I don’t know how to deal with the iframe/frame elements on mootools. Do you have any tutorial on this issue?

    Many thanks.

  13. David Says:

    @Luke: Add “var scroll = new Fx.Scroll(’demo-wrapper’, { wheelStops : false, ….”


  14. Hey,
    How do i make it so it scrolls vertically?
    http://69.2.35.72/bob/lakkakula/index.php?color=w&align=v

    Like that,

    Josh


  15. Mine doesn’t seem to be working neither…

  16. walter Says:

    I Have the mouse-scrolling issue too

    If you scroll your mouse, it pauses the scrolling animation.

    and

    var scroll = new Fx.Scroll(’demo-wrapper’, {
    wheelStops : false,

    }
    didn’t work for me

    any idea

  17. Priya Says:

    Hi,
    its a great tutorial..

    could you please mail me the mootools.js file used in this example..

    it doesnt seem to work properly with the file tht i have.

    Thanks.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: