Jun 6, 2009

Posted by in Tutorials | 46 Comments

Tutorial 3: Adding a scroller to your website that supports Ajax

 

The scrollbar in action

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.

  1. Thank you for the tutorial

  2. thanks for sharing,

    any chance i can add arrows?

    • Sure, it’s really easy to add arrows; you just need to add the following two lines to your stylesheet

      .vscrollerbasebeg {width: 12px;height: 10px !important;background: url(up_arrow.png) 0 0 no-repeat;}
      .vscrollerbaseend {height: 10px;width: 36px;background: url(down_arrow.png)  0 0 no-repeat;}
      
      .vscrollerbar {padding: 14px;z-index: 2;}

      You can modify the height and padding depending on the dimensions of your arrows.

      You know, it would have been better if I had added the arrows in the original attachment, so I’ll go ahead and modify the archive in a bit and reupload.

  3. awesome!

  4. bonnie_sinclair says:

    thanks for sharing, you’ve made it seem so easy.

    thanks again. :)

    • I can’t really take credit for much of it; fleXcroll is a pretty cool script that I found after looking through several other scripts. I then just added the dynamic loading and refreshing bit using my JS framework of choice and thought that sharing the results might prove useful to others. :)

  5. really it is very greate job it will useful for beginners.

    thank you for share

  6. cool, thanks for sharing….:D..
    i get what i search..:))…
    :-bd

Trackbacks/Pingbacks

  1. Top 20 Ajax Tutorials | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver - [...] This web slider will enhance your website and give it that extra something. This looks great, and is easy ...
  2. eagrapho » 35 Must Know AJAX Tutorials, Techniques and Resources - [...] Ajax Website Slider This web slider will enhance your website and give it that extra something. This looks great, ...
  3. Top Ajax Tutorials - Ninesixdesign - [...] 20. Adding a scroller to your website that supports Ajax [...]
  4. fleXcroll – A Custom Scrollbar Script | Cimuz a Holy Land of Web Designer and Web Developer - [...] it might just some script crashing with tabs script in content loading or something… Anyway here are the solution ...
  5. Xentience (Internal) Blog » Top 10 Powerful Ajax Tutorials For Web Designers - [...] 12) Adding a scroller to your website that supports Ajax [...]
  6. ?web??????10????Ajax?? | X?? - [...] 12) Adding a scroller to your website that supports Ajax [...]
  7. Top 10 Powerful Ajax Tutorials For Web Designers - [...] 12) Adding a scroller to your website that supports Ajax [...]
  8. Tutorial Ajax Web Designers Part1 | Perisai Labirin - [...] Adding a scroller to your website that supports Ajax ...
  9. Top 12 Ajax Tutorials For Web Designers | Top 10 Recent - [...] 12) Adding a scroller to your website that supports Ajax [...]
  10. 10 Useful Ajax Tutorials For Web Designers - [...] 6) Adding ascroller [...]
  11. Top 10 Ajax Tutorials For Web Designers | TechnoZeast - [...] 4. Adding a scroller to your website that supports Ajax [...]
  12. Creative Ajax Tutorials for Designers | codeManiac - Snippets, Templates, API and the best developer content - [...] View Tutorial [...]
  13. 120+ AJAX Tutorials | Pulse2 Technology and Social Media News - [...] Adding a scroller to your website that supports Ajax [...]
  14. 70 Best AJAX Tutorials | Web Development and Design Blog - [...] 8. Adding a scroller to your website that supports Ajax [...]
  15. Latest jQuery AJAX Tutorials And Techniques | Designs Madness - [...] Ajax Website Slider [...]
  16. 10 New jQuery AJAX Techniques with Source Code | Web Insight Lab - [...] 5) Adding a Scroller to your Website That Suports Ajax [...]
  17. Adding a jQuery scroller to your website that supports Ajax | Project M - [...] Sometimes, a nice and sharp design is ruined by the addition of a scroller. By default, the OS styles ...

Leave a Reply