For a while now I have been writing about how to create a Side Scrolling Page Effect similar to the one that is seen on Panic’s Coda site. I have built the effect using 3 different frameworks and I have found that each framework has its own pluses and minuses, but in the end I decided to build a more robust solution using Scriptaculous (you can see why in the conclusion section of the MooTools article).

Today I am rounding out the series with the posting of that robust solution. Basically this is my take on that effect and what I implemented for my client. How the basic effect is achieved is covered in the other articles, so today’s goal is to explain what takes it from a simple demo to a fully functioning, cross-browser compatible website. At the end of the article I will, as usual, have a link to where you can download all the code used in the demo.

What is Robust Anyways?
A robust solution is basically one that will stand up to “real world punishment”. Practically this means a few things:

1. It won’t break. A solution that blows up on the user isn’t much of a solution at all. In the case of a page effect like this one, even a minor bug can make the page unnavigable which is for all intents and purposes a “critical error”.
2. It is cross-browser compatible. The easiest way to do this is to make sure it is XHTML compliant. Because the core of this effect is ASP.NET it is Transitional compliant rather than Strict. Hopefully someday they will make it so that ASP.NET can be strict. Outside of making sure it is compliant you need to test it on all the major browsers. The demo here has been tested and works on IE 7, Firefox 2, and Safari 3.
3. It works even when it shouldn’t. This entire site is built upon javascript…and lots of it. Without javascript it shouldn’t work. However, you can’t build a site that completely shuts down when javascript isn’t on. It might not work perfectly, but users should be able to do the basics with the effects off. There is one caveat to this. There are a couple of extra effects that I added “just cuz”, and since these effects are not critical to basic functionality they do not work when JS is off.

Now, does robust mean that it will stand up to any conditions? Absolutely not. If building such a thing is even possible, it would take enormous amounts of time and energy. Robust simply means it is gonna work for the vast majority (aim for 95 - 99%) of people and situations.

What Are We Building Again?
Before we get too far into all this, its probably good to take a look at the end result first…kinda like peeking at the last page of a book.

Here is our final destination for this trip

You will notice it looks a bit different than the earlier demos, but overall its the same effect I built earlier. As we get further along here, you will notice that I am not detailing every line of code and CSS this time. The reason is simple…there is just too much of it.

With that said, if you are looking through the code and you have some questions about one part or another, please feel free to drop a comment or an email and I will do my best to walk you through it.

On with the Robustness!
The biggest difference between the original demos and this one is the fact that this time we have a menu. Now a menu’s job is to help navigate, but this guy serves an even more important job. He saves our butt in case a visitor doesn’t have javascript enabled.

If javascript is off, then our little arrows won’t do a darn thing so we need some other form of navigation. A menu serves that purpose well. The markup looks something like this:

<div id="Menu">
    <ul>
        <li id="MenuPage1" class="Page1Over" style="color: #FBE97E;" onclick="clickPage1()">
            <a href="#Page1Block">Page 1</a>
        </li>
        <li id="MenuPage2" class="Page2" onclick="clickPage2()">
            <a href="#Page2Block">Page 2</a>
        </li>
        <li id="MenuPage3" class="Page3" onclick="clickPage3()">
            <a href="#Page3Block">Page 3</a>
        </li>
        <li id="MenuPage4" class="Page4" onclick="clickPage4()">
            <a href="#Page4Block">Page 4</a>
        </li>
    </ul>
</div>

See how I have a standard anchor tag around each of the pages? This is for “no javascript-land”. If a person comes in without JS, then the menu needs to act like a normal menu. So I accomplish this with inpage links. The problem is, this causes grief for the user who has javascript enabled. We fix this with…you guessed it…javascript.

function initialize()
{
    //the HTML is built to allow those without javascript to still function.
    //If the user has javascript, then we need to change that HTML so that it
    //will not interfere with the javascript
    document.getElementById("MenuPage1").innerHTML = "Page 1";
    document.getElementById("MenuPage2").innerHTML = "Page 2";
    document.getElementById("MenuPage3").innerHTML = "Page 3";
    document.getElementById("MenuPage4").innerHTML = "Page 4";
    //firefox keeps the saved page value after a refresh...we need it to reset.
    document.getElementById("hdnPage").value = 1;
    document.getElementById("hdnAnswer").value = 1;
}

This simple function is called onLoad and simply gets rid our anchors. Nothin’ fancy, but it does allow our main effect to work with or without javascript. Nice.

She Works Hard For The Money!
If you have looked ahead and peeked at the Javascript on our MoveLeft and MoveRight methods you will notice that they are a good deal bigger than they were before. Here is an overview of what is happening.

function MoveRight()
{
    var page = document.getElementById("hdnPage");
    var menu = document.getElementById("menuOver");
    
    //move the menu
    if (page.value == 1)
    {
         //Page1
         setFromPage("Page1");
         setToPage("Page2");
         
         menu.style.width = getMenuBoxSize("Page2");
         setMenuEffect(getX("right", "Page2"));
    }

    ...
    
    //move the big box
    if (page.value == 4)
    {
        var box = document.getElementById("BigBox");
        setBoxEffect(2628)
        page.value = 1;
    }
    else
    {
        setBoxEffect(-876)
        var val = parseInt(page.value) + 1;
        page.value = val;
    }
}

I have cut out some of the redundant parts, but above you can see what is happening. First I need to see what page we are on. I store that in a hidden variable that is initialized to 1. I do the same thing with the menu which is what I move first. Using some handy dandy helper methods I simply tell the page that I am going from Page 1 to Page 2.

The helper methods set the CSS classes to make it look pretty, and change the font color. Now this seems like overkill in the demo, but it was designed to allow different background images to come into play (basically a normal and selected state). Even though I am not using them in this demo, I figured it would be helpful to those of you adapt it for your own needs.

The helpers also tell the menu how far to move to the right. Again, this seems like overkill here, but in my application each menu item was a different size so it would change depending on which page I was moving to.

After the menu is moved, we move the “BigBox” which is where all of our content lives. This is easy…we move it by the same amount (except on the ends where it has to wrap around), and then we set the hidden value to keep track of what page we are showing.

So that is basically what happens when you click on one of the arrows, what happens if you click directly on a link? Lets see…

function clickPage1()
{
    var page = document.getElementById("hdnPage").value;
    var menu = document.getElementById("menuOver");
    menu.style.width = getMenuBoxSize("Page1");
    
    if (page == 1)
    {
        //nothin' to do here
        return;
    }
    else if (page == 2)
    {
        setFromPage("Page2"); 
        
        setMenuEffect(-135);
        setBoxEffect(876);
    }
    else if (page == 3)
    {
        setFromPage("Page3");
        
        setMenuEffect(-270);
        setBoxEffect(1752);
    }

    ...
       
    setToPage("Page1");
    
    document.getElementById("hdnPage").value = 1;
}

Unlike the Move methods, we can’t set it to move the exact same every time. Sometimes we move Left, sometimes we move right. For instance, the method shown above is called whenever a visitor clicks on the Page 1 link. If we are already on page one, then there is nothing to do. However, if you are on page 2 we need to move the menu to the left and we need to move the BigBox “1 page” (i.e. the amount of pixels that equate to the width of one of our blocks). If you are on page 3, the we need to move to the left the equivalent of 2 pages.

Once the menu and box are moved I set the hidden value to the page that was clicked on.

That is basically it…when you boil it down, it isn’t really all that difficult. To apply it to your own site all you would need to do is change the widths and movements to correspond to the sizes of your menu items.

Extra Effects
There are a couple of effects that I employed on my client’s page that I figured I would just leave in there in case you wanted something similar. The first is an accordion effect. One small problem with scriptaculous is that it does not have its own prebuilt accordion effect.

No worries…Kevin Miller of Stickman Labs has filled the need with his own extension that works with just about any language. You can see an example of it on “Page 2″ of the demo.

To get it to work is pretty simple. First you need a javascript method like this to initialize everything:

Event.observe(window, 'load', loadAccordions, false);

function loadAccordions()
{
    var bottomAccordion = new accordion('#divPage2');
    bottomAccordion.activate($$('#divPage2 .accordion_toggle')[0]);
}

and then you need to make the markup of each part look like this:

<div class="accordion_toggle">
    <div class="toggle_text">Item 1</div>
</div>
<div class="accordion_content">
    <div class="content_text">Detail text</div>
</div>

Now the “toggle_text” and “content_text” are CSS classes of my design just so I could get my stuff looking the way I wanted, but the “accordion_toggle”, and “accordion_content” are required.

Its a solid implementation that has a lot of bells and whistles (including horizontal accordions), so if you need this effect, it is definitely worth checking out.

The other extra is a home-grown Question/Answer effect. The reason I needed this is because you cannot have any internal scrolling (due to a Firefox issue) inside of any of our pages. A Q&A by its very nature is pretty long so I created a scrolling effect.

To get it to work you need two things:

Some javascript

function MoveToAnswer(number)
{
    var currentAnswer = document.getElementById("hdnAnswer").value;
    var value = number - parseInt(currentAnswer);
    var y = parseInt(value) * -100;
    new Effect.MoveBy('Answers', y, 0 , 
          {duration: 0.4,  transition: Effect.Transitions.sinoidal, queue: 'end'});
    
    //change the current answer
    document.getElementById("hdnAnswer").value = number;
}

(the 100 can be anything…that is just what I have each answer’s height set at)

and some markup

<div onclick="MoveToAnswer(1)" class="question">Question 1</div>
<div id="answer1" class="answer">Answer 1</div>

The only trick is that the Questions and Answers must be “in order” meaning you can’t go 1,2,4,5…otherwise the scrolling will break.

Conclusion
So there you have it…a robust side scrolling page effect. Its been a long journey, but the end result has been a great learning experience for me and I hope it was for you as well. Again, if you run into any issues, or have any questions about what I did, or why I did it, please feel free to drop a comment. Heck, if you have suggestions to make it better, I am all ears.

When you are ready to get your hands dirty, feel free to download the demo code and get crackin’!