Lets learn Web Designing

How to customize browser default Horizontal Scrollbar: jScrollHorizontalPane (Step by Step)

What is jScrollHorizontalPane?

In a recent project I was working on, I had to customize a browser default horizontal scrollbar as per the project requirements. I was already aware of a jquery plugin “jScrollPane” using which we can customize a scrollbar. I have already posted an article on how to use jScrollPane — “How to customize browser default Vertical Scrollbar: jScrollPane (Step by Step)“.But the limitation of this plugin is that it can customize only Vertical Scrollbars, not the Horizontal ones.

So I started searching for a jquery plugin which can customize a horizontal scrollbar. After spending some time in browsing the internet, I got hold of a great plugin “jScrollHorizontalPane” using which you can style your browser default horizontal scrollbar as per your requirement. With the use of this jQuery Plugin, you can easily control the apperance of the custom scrollbars using simple CSS.

jScrollHorizontalPane Demo Picture

jScrollHorizontalPane Demo Picture

Click here to see jScrollHorizontalPane demo.

How to use jScrollHorizontalPane?

Step 1: Make a folder on your desktop, and give it a name. Lets say- “Project”. We will keep all our files inside this folder.

Step 2: To keep the structure organized, make 2 separate folders inside Project -

  1. js to store all javascript files
  2. css to store all stylesheet files

Step 3: Download the latest jQuery file (jquery-1.3.2.js), and the jScrollHorizontalPane file (jScrollHorizontalPane.js). Save both the files in js folder.

Step 4: Download the css file that comes with jScrollHorizontalPane (jScrollHorizontalPane.css) and save it in css folder.

Step 5: Now inside the main Project folder, create a blank html file. Name it as “index.html“. Now you should have a structure similar to this.

File Structure

File Structure

Step 6: Write the following lines of code between <head> and </head> tags of “index.html” to include the js files and css files.

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/jScrollHorizontalPane.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jScrollHorizontalPane.js"></script>

Step 7: Now we need a horizontal scrollbar (which can then be replaced with a customized Horizontal Scrollbar). To create a horizontal scrollbar, write the following code between <body> and </body> tags of index.html.

<div class="scroll-pane" id="container"">
    <div class="content">
    </div>
</div>

Here we are creating a box named container, which contains another box named content. Give the following styles to container box and content box. You can define these styles in a separate stylesheet styles.css or include them inside <style type=”text/css> and </style> tags like this. Keep the following code between the <head> and </head> tags.

<style type="text/css">
    #container{
        width: 562px;
        height: 393px;
        margin:0 auto;
        overflow:auto;
    }
    
    .content{
        width: 1235px;
        height: 366px;
    }
</style>

By assigning these styles, you will find that the horizontal scrollbar appears on the page.

What are we doing here ?

First, we created 2 boxes. we named them “container” and “content“.
Content” box goes inside the “Container” box. This we have already seen and understood.

Now lets see what we are doing in the styling part. We are giving a fixed height (393px) and width (562px) to the container box. Just remember one thing that the scroll bar will appear on the container box.

To the content box we are giving a height (366px) which is less than the container box. We are doing this to avoid the appearence of vertical scroll bar on the container box. Instead we are giving a width of (1235px) to the content box, because we want the vertical scroll bar to appear on container box.

After all this is done, just assign a property “overflow: auto” to the container box, which will make the vertical scrollbar appear on your web page. Please see the figure below for clear understanding.

Container– height: 393px; width: 562px; overflow: auto;
Content– height: 366px; width: 1235px;

Your actual content will go inside the content box. The scroll bar will appear on container box.

Step 8: Now our code inside the <head> and </head> should look something like this.

<style type="text/css">
    #container{
        width: 562px;
        height: 393px;
        margin:0 auto;
        overflow:auto;
        }
        
    .content{
        width: 1235px;
        height: 366px;
        }
        
    .content-data{
        width: 100px;
        height: 80px;
        border: 1px solid #00CC33;
        float: left;
        margin: 5px;
		}    
</style>
<link rel="stylesheet" type="text/css" href="css/jScrollHorizontalPane.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jScrollHorizontalPane.js"></script>

Step 9: Now our code inside the <body> and </body> should look something like this.

<div class="scroll-pane" id="container"><!--BEGIN SCROLLPANE (CONTAINER) DIV-->
    <div class="content"><!--BEGIN INNER (CONTENT) DIV-->
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
        <div class="content-data"> </div>
    </div><!--END INNER (CONTENT) DIV-->	
</div><!--END SCROLLPANE (CONTAINER) DIV-->

Step 10: Now the last step is to apply the following script between the <head> and </head> tags to get the customized horizontal scrollbar.

<script type="text/javascript">
    $(document).ready(function(){
	$('.scroll-pane').jScrollHorizontalPane();
    });    
</script>

Step 11: Now our code inside the <head> and </head> should look something like this.

<style type="text/css">
    #container{
        width: 562px;
        height: 393px;
        margin:0 auto;
        overflow:auto;
        }
        
    .content{
        width: 1235px;
        height: 366px;
        }
        
    .content-data{
        width: 100px;
        height: 80px;
        border: 1px solid #00CC33;
        float: left;
        margin: 5px;
		}    
</style>
<link rel="stylesheet" type="text/css" href="css/jScrollHorizontalPane.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jScrollHorizontalPane.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
	$('.scroll-pane').jScrollHorizontalPane();
    });    
</script>

Step 12: That’s it. We are done. Just save your html file, and see your customized horizontal scrollbar come alive. Now you can edit the jScrollHorizontalPane.css file to customize it as per your requirement. Click here to see the demo of jScrollHorizontalPane. For a complete list of options and detailed description, please visit the jScrollHorizontalPane homepage.

Please visit the following links for jScrollHorizontalPane related content:


About these ads

One response

  1. My developer is trying to convince me to move to .net from PHP.
    I have always disliked the idea because of the costs.

    But he’s tryiong none the less. I’ve been using Movable-type on
    a variety of websites for about a year and am nervous about switching to another platform.
    I have heard very good things about blogengine.net. Is there a way
    I can import all my wordpress posts into it? Any help would be
    greatly appreciated!

    March 10, 2014 at 4:17 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.