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.

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 nlakkakula Filed in CSS, HTML, JavaScript, mootools
14 Comments »