When I was building my portfolio page a few weeks ago, I came up with an idea for a side-scrolling page. The idea is basically, you click on an arrow and the content slides to the left or right. Cool idea, but I couldn’t wrap my head around how to get the CSS to work.

Shortly after I figured out how to get it all to work I learned that my unique idea wasn’t all that unique after all. Its still a great effect, and over the last few days I have seen a lot of people asking how to do it on various forums so it makes for a good tutorial.

When I originally started this article I was planning on using just the ASP.NET Ajax framework because that is what I was using for my latest project. However, once I got it up and running I was a bit disappointed in the performance of the animation. That is when I began hunting for another way to do it. By the end of my search I had delved in and created a side scroller using 3 different frameworks: ASP.NET Ajax, scriptaculous, and MooTools. All of them “get the job done”, but I learned that each have their own advantages and disadvantages.

Over the next few days I will be going over these different frameworks and explaining what I liked and didn’t like about each one. Each will have their own demo so you can see how the finished app looks and feels, and in the end I will include a link on where you can download all the pages I made for the demos.

So what is a side scrolling page effect anyways?
The first thing on the agenda is to get a feel for what we are building here. If you are a Mac person, then you have probably heard of Coda from Panic. I am not a Mac user so I found their site on a CSS gallery site. Ironically I ran into it shortly after I decided I was a genius for thinking up this design technique. Nice.

Ego aside, the Coda site is a wonderfully designed site with a great implementation of the “side scrolling page effect” (there has to be a better name for that). After creating my own version I learned that overall, this is pretty simple stuff. The only tricky part was getting the CSS working on all the major browsers. So if you aren’t up on your CSS skills, this may get a bit confusing. Implementing the various frameworks varies from ridiculously simple to downright frustrating, but I will get into that more in later articles.

Markup!
Regardless of which framework you use, you need some markup.

<div id="page">
    <div id="LeftArrow" runat="server">
         <img src="images/LeftArrow.jpg" alt="" class="arrow" />
    </div>
    <div id="RightArrow" runat="server">
         <img src="images/RightArrow.jpg" alt="" class="arrow" />
    </div>  
    <div id="ScrollBox" runat="server">
         <div id="BigBox" runat="server">
              <div class="block">Page 1</div>
              <div class="block">Page 2</div>
              <div class="block">Page 3</div>
              <div class="block">Page 4</div>
         </div>
    </div>
</div>

What you see here is basically a left arrow, a right arrow, and 4 different pages of content. There isn’t anything special about the markup except that you see A LOT of divs. The reason for this goes back to the CSS and what it takes to get our “Big Box” to behave in the various browsers.

CSS
Now to the tricky part. If you simply copy and paste the CSS, then this will be REALLY easy. However, I know a lot of you are into the “why” as well as the “how” so I will break down the various classes so you can get a feel for what is really going on.

body 
{
    font-size: small;
    background-color: #000;
    color: #000;
    text-align: center;
    margin-top: 5px;
    padding:0;
    font-family: Verdana;
}

#page
{
    width: 982px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#LeftArrow
{
    position: relative;
    top: 270px;
    left: 10px;
    width: 25px;
}

#RightArrow
{
    position: relative;
    top: 227px;
    left: 945px;
    width: 25px;
}

.arrow
{
    cursor: pointer;
}

/* Side Scroller */

#ScrollBox 
{
    margin-left: 60px;
    margin-top: -75px;
    width: 870px;
    height: 553px;
    position:  absolute;
    overflow: hidden;
    border: solid 1px #000;
    background-color:#fff;
}

#BigBox
{
    width: 3800px;
}

.block
{
    width: 866px;
    float: left;
    height: 551px;
    margin-right: 10px;
}

So there you have it, lets take a look at what does what.

The #Body and #Page classes are nothing special…they basically make the page centered and 1000 pixels.

After that we have the #LeftArrow and the #RightArrow…again, nothing too tricky. I have them relatively positioned so they appear in the middle of our big box. The .arrow is simply to make the little hand appear when you hover over either arrow.

The next three classes are what make the scroller work. If you compare this to the Coda implementation, you will notice that mine is just a bit simpler…they use 4 classes to my 3. Now that doesn’t make mine better, just different. Their 4th class probably has something to do with the rest of their design, but I never studied it enough to see why.

First we have the #ScrollBox. This class’s job is to define where our content lives. First I make sure it appears in the right place by setting the margins. After this I set some visual properties…width, height, border, etc. What is important about this class are two things:

• overflow: hidden - As you might expect, this is what hides the parts of the Big Box that go outside of our scroll box.
• position: absolute - This is a bit unexpected, but like the overflow it is required to make the Big Box hide correctly. The side-effects of what happens depends on the framework you are using, but none of the effects are what you would called “desired”. (can’t tell you how long it took me to figure that one out)

Next is our #BigBox. This class exists solely to hold our “blocks”. The only thing you need to remember is to make sure it is wide enough. Make it too small and things start to get ugly.

Finally, we have our .block. This class is where each page of content goes. Have 4 pages? Then you need 4 blocks. Most of the properties are for appearances, but it is important to note that the blocks must float. If they don’t, then you will scroll and see nothing which kinda defeats the purpose.

A Word of Warning
One of the things I tried to do initially was allow the “block” to have a scrollbar by setting the overflow property to auto. Boy was that a mistake. There is an…ahem…undocumented feature of Firefox that causes all sorts of layout problems when you do this (both IE 7 and Safari 3 are fine). Basically the result is that the Big Box does not stay hidden after you animate it. You will notice on Panic’s site that none of the blocks scrolls. This either means that they ran into this problem as well, or they just decided to design the page such that a scroll isn’t necessary.

Bottom line…this effect is probably not the best to use on very content heavy sites. On my project I plan to work around this “feature” by using accordian effects and the like to make my content scroll without a standard scrollbar. However you decide to get around it, just don’t forget the problem is there before you get too far along in your design.

ASP.NET - Extra Chunky
The first framework I am going to tackle is ASP.NET Ajax - Demo Page.

First the good. Its really easy to get rockin’…no custom javascript and there is a very shallow learning curve.
Now the bad. The animation is a bit chunky…especially when compared to the other frameworks.

If you are moving a small number of pixels, moving the text quickly, or you are just frightened of Javascript, then the chunkiness probably won’t matter. In my case, it was just too noticable which is why I went hunting for other frameworks to begin with.

To get setup, you need to make sure your page is ready for the ASP.NET Ajax framework.

Register the toolkit.
Get the dll loaded.
Setup your scriptmanager.

If all of this is greek to you might want to start at the beginning.

Once you have that setup and the Markup and CSS laid down, you are about 90% done. The last part is simply to create the AnimationExtender which looks like so:

<ajaxToolkit:AnimationExtender id="aex1" runat="server" 
TargetControlID="RightArrow" >
<Animations>
    <OnClick>
            <Move Duration=".4"  horizontal="-876" 
            relative="true" Unit="px" AnimationTarget="BigBox"  />
    </OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>

<ajaxToolkit:AnimationExtender id="aex2" runat="server" 
TargetControlID="LeftArrow" >
<Animations>
    <OnClick>
            <Move Duration=".4"  horizontal="876" 
            relative="true" Unit="px" AnimationTarget="BigBox"  />
    </OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>

You see we have 2 extenders for our little demo. If you were gonna make it more polished you will need several more, but this should be enough to get you started. I have been over the AnimationExtender in detail in other articles so I will just go over the basics here.

Each extender has a single animation in it…Move. You will notice that it has several properties.

• Duration: How many seconds the animation takes
• Horizontal: How many pixels the div is going to move on the X-plane. There is also a Vertical property that can be used to move up and down. If you are getting fancier there are HorizontalScript and VerticalScript properties that allow you to set a Javascript function to calculate dynamic values.
• Relative: Whether or not the animation is relative or absolute (default is false).
• Unit: The unit of measurement you want to use. In this case I use px for pixel.
• AnimationTarget: The control that is being animated

So that is all there is to it. Kudos to Microsoft guys for the implementation. Unfortunately, its the execution that leaves a bit to be desired.

Tomorrow I will go over how to get this to work using scriptaculous.