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 or used with NiftyCorners in my startup website.

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.

Posted by Bob Lakkakula
Filed in CSS, HTML, JavaScript, mootools
19 Comments »

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

  2. LizharD Says:

    August 16, 2007 at 10:01 am

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

    Reply
  3. links for 2007-08-20 « napyfab:blog Says:

    August 20, 2007 at 5:29 pm

    [...] 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) [...]

    Reply
  4. James Says:

    September 6, 2007 at 7:50 pm

    I assume that this is a typo

    Step 3 : Stylesheets
    css/site.js

    should it read
    css/site.css

    ?

    Cheers

    Reply
  5. nlakkakula Says:

    September 6, 2007 at 8:47 pm

    Thanks James… I corrected it.

    Reply
  6. Paul Says:

    September 7, 2007 at 4:05 pm

    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.

    Reply
  7. nlakkakula Says:

    September 10, 2007 at 11:48 am

    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)

    Reply
  8. Paul Says:

    September 12, 2007 at 2:35 am

    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.

    Reply
  9. nlakkakula Says:

    September 12, 2007 at 9:21 am

    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.

    Reply
  10. Brian Says:

    October 10, 2007 at 2:29 pm

    It’s not working for me for some reason

    Reply
  12. nlakkakula Says:

    November 15, 2007 at 6:45 pm

    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.

    Reply
  13. Luke Says:

    December 28, 2007 at 7:14 pm

    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

    Reply
  14. Elisa Says:

    January 31, 2008 at 2:17 am

    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.

    Reply
  15. David Says:

    June 22, 2008 at 6:10 am

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

    Reply
  16. Josh Craddock Says:

    July 12, 2008 at 12:15 pm

    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

    Reply
  18. walter Says:

    August 19, 2008 at 5:46 am

    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

    Reply

Leave a Reply