Our Weblog

The scroller in action

Introduction

Sometimes, a nice and sharp design is ruined by the addition of a scroller.  By default, the OS styles the scroller and that (arguably) makes it look ugly. For this tutorial, I’ll be using a nice little script called fleXcroll and then adding some code to add  support for loading content via Ajax.  I’ll also be using jQuery, but of course, you can use any other JavaScript framework or just plain old JavaScript.

What you’ll need
1. fleXcroll
2. jQuery

Here we go
1. Include your JavaScript files and Style Sheets

<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/global.js" type="text/javascript"></script>
<script src="js/flexcroll.js" type="text/javascript"></script>

2. Create your scrollable pane

<div id="scrollPane" class="flexcroll">
<div id="scrollPaneContent"></div></div>

Since our div will be dynamically populated with content, we will use two divs: one to contain the scroller, and one to contain the content.

3. Set the contents of your scrollable pane when your page first loads by adding it in your global.js file, which we included above, as follows

$(document).ready(function() {
    settifyAndUpdatifyScrollablePane("home_content.html");
}};

…or by adding it just before your page’s closing body tag.

settifyAndUpdatifyScrollablePane() is in turn defined in global.js.  It simply replaces the content of the inner div with the contents of the specified page (home_content.html in this case)

function settifyAndUpdatifyScrollablePane(page) {
    $.get(page, '',function(data, textStatus) {
        $("#scrollPaneContent").html(data);

        var myDiv=document.getElementById("scrollPane");
        if(myDiv!=null && myDiv.scrollUpdate)
            myDiv.scrollUpdate();
    },"html");
}

We manually call scrollUpdate() on our div since the scroller’s size is determined and thereafter generated when the webpage first loads, before the content has had a chance to load into the div.

4. For all other links that load content into our div, we need to do the same thing.  Modify your links so that they call settifyAndUpdatifyScrollablePane() as follows, while making sure that the content in the specified HTML pages is valid XML.

<a onclick="settifyAndUpdatifyScrollablePane('home_content.html')" href="#"></a>

That’s it.  I’ve put together a demo with all of the files that you need; you can download it from here.

Tags: ajax scroller, flexcroll, scroller, scrollpane