Lets learn Web Designing

html

HOW TO MAKE A SIMPLEST (IMAGE) SLIDER USING JQUERY IN 10 EASY STEPS

In this tutorial, I will show you how to make a simple image slider (carousel) using jQuery. I will guide you through the whole process of making the slider starting from the scratch without using any jQuery plugin. You can use this slider for sliding your images or div content as per your requirement.

Simplest Image Slider Image

Simplest Image Slider Image

Click the button below to see Simplest jQuery Slider Demo before we begin this tutorial.

How to make a simplest (image) slider using jQuery in 10 easy steps

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 3 separate folders inside Project

  1. js to store all javascript files
  2. css to store all stylesheet files
  3. images to store all image files

Step 3: First, Download the latest jQuery file (jquery-1.5.2.min.js) and save the file in js folder. Secondly, Make a blank js file, and name it as “main.js” and place it in js folder.

Step 4: First, download the “reset” css file (reset.css), and place it inside the css folder. Secondly, Make a blank css file, and name it as “main.css” and place it in css folder.

Step 5: Download and place some sample images inside the images folder. We will use these images for making the image slider.

Step 6: 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

Step 7: 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/reset.css" >
<link rel="stylesheet" type="text/css" href="css/main.css" >
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

Step 8: Write the following code between <body> and </body> tags of index.html

<div class="wrapper">
    <div class="visible-area">
        <div class="slider">
            <a href="#"><img src="images/Chrysanthemum.jpg" width="800" height="300" alt="1"/></a>
            <a href="#"><img src="images/Desert.jpg" width="800" height="300" alt="2"/></a>
            <a href="#"><img src="images/Hydrangeas.jpg" width="800" height="300" alt="3"/></a>
            <a href="#"><img src="images/Jellyfish.jpg" width="800" height="300" alt="4"/></a>
        </div>
    </div>
    <a href="#" class="previous">Previous</a>
    <a href="#" class="next">Next</a>
    <div class="clear"></div>
</div>

Step 9: Write the following code in “main.css” file.

.wrapper {
    width: 800px;
    position: relative;
    margin: 20px auto;
}

.visible-area {
    width: 800px;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
}

.slider img {
    float: left;
}

.previous {
    width: 100px;
    float: left;
    color: #fff;
    height: 30px;
    margin-top: 10px;
    background: #f00;
    line-height: 28px;
    text-align: center;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.next {
    width: 100px;
    float: right;
    color: #fff;
    height: 30px;
    margin-top: 10px;
    background: #f00;
    line-height: 28px;
    text-align: center;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.clear {
    clear: both;
}

What are we doing here ?

Here we are creating a box (div) named as “visible-area” with fixed dimensions (Fixed height and width). As the name suggests, only the content that will come inside the dimension of this box will be visible; and the content that flows out of the bounds of this box will not be visible to anyone. For this reason, we have given the style “overflow: hidden” to this div.

We are creating another box (div) named as “slider”. As the name suggests, this will be the box that will actually slide (left and right) inside the “visible-area” div. Since this box will slide (left and right) inside the “visible-area” div, hence its pretty obvious that the width of this box will be more than its parent div. We have not defined the width of this box in main.css file, because its width will be calculated dynamically using jQuery (which we will see later).

We have 2 anchor tags in our mark up “next” and “previous”. These anchor tags will act as the “next” button and “previous” button respectively. We have given the float property to these anchor tags (which makes them the block level element, which in turn helps us in setting the width and height for the buttons). And in the last clear div is used to clear the float.

And at last, we have a “wrapper” div to wrap everything up in the mark up, and keep everything in the center of the page.

Visible Area— height: 300px; width: 800px; overflow: hidden;
Slider— height: 300px; width: (Generated Dynamically)

Your actual content (images) will go inside the slider box. All the images are floated left so as to make them all come in one single line. All the images inside “slider” div are assigned an attribute “alt” in ascending order numerically. For example: The first image is given “alt=1”, The second image is given “alt=2”, and so on.

Till here we are done with our markup and styling. Now we have to use the jQuery code (which is infact the most important part) which will bring our slider into life.

Step 10: Write the following code in main.js file (which is inside the js folder).

$(document).ready(function(){
    $('.slider img:first').addClass('active');                    // Here we are assigning a class "active" to the first image in the "slider" div.
	
    var imagewidth = $('.visible-area').width();                  // Width of 1 image (should be equal to the width of "visible-area" box)
    var totalimages = $('.slider img').size();                    // Total Number of images inside "slider" div.
    var sliderwidth = imagewidth * totalimages;                   // Total width of "slider" div.
    $('.slider').css({'width': sliderwidth});                     // Here we are assigning the width to the slider div (using the css method in jquery)
	
    $('.next').click(function(){                                  // This following function will be executed on click of "next" button
        $active = $('.slider img.active').next();                 // On click of next button, we are saving the image (next to "active" image) in a jQuery variable $active
        if ($active.length==0){                                   // If this is the last image inside the "slider" div, and there is no image after that, then go back to the first image in "slider" div and save it in a variable $active. 
	        $active = $('.slider img:first');
        }
        $('.slider img').removeClass('active');                   // Remove class active from the images inside slider div.
        $active.addClass('active');                               // Add the class active to the $active (next image).

        var count = $active.attr('alt') -1;                       
        var sliderposition = count * imagewidth;                  // Here we are calculating, how much "slider" div will slide on click of next button, and we are saving it in a variable "sliderposition".
        $('.slider').animate({'left': -sliderposition}, 500);     // Here we are using the jQuery animate method to slide the "slider" div.
    }); 
	
    $('.previous').click(function(){                              // This following function will be executed on click of "previous" button
        $active = $('.slider img.active').prev();                 // On click of previous button, we are saving the image (previous to "active" image) in a jQuery variable $active.
        if ($active.length==0){                                   // If this is the first image inside the "slider" div, and there is no image before that, then go back to the last image in "slider" div and save it in a variable $active. 
	        $active = $('.slider img:last');
        }
        $('.slider img').removeClass('active');                   // Remove class active from the images inside slider div.
        $active.addClass('active');                               // Add the class active to the $active (next image).

        var count = $active.attr('alt') -1;                       
        var sliderposition = count * imagewidth;                  // Here we are calculating, how much "slider" div will slide on click of next button, and we are saving it in a variable "sliderposition".
        $('.slider').animate({'left': -sliderposition}, 500);     // Here we are using the jQuery animate method to slide the "slider" div.
    }); 	
});   

That’s it. We are done. Just save your file, and see your image slider come alive. Now you can edit the main.css file to customize it as per your requirement.

Please visit the following link for adding more options (pagination and auto scroll feature) to your slider:


Advertisements

7 Best Tutorials on CSS / HTML

7 Best Tutorials on CSS / HTML

Yesterday, One of my friend asked me to help him find some good tutorial / presentation on basics of HTML and CSS.

While surfing on the internet, I found some very good presentations on HTML and CSS, which covers the basics of Web Designing (HTML / CSS), in a concise, precise, and accurate manner. Though there were many others available but these are the ones I liked the most.

These are the ideal tutorials for the Beginners, Intermediate Users, and Advanced Users of CSS. I personally recommend these tutorials to everyone. I hope you will like them.


CSS3 Gradients for all browsers

What are CSS3 Gradients ?

Well, A Gradient can have many different dictionary meanings, but in terms of Web Design, we can define gradient as “A fill consisting of two or more colors blending together”. So If one color blends with the other color in a straight line, then this is called a simple Linear Gradient.

In earlier days of web design, The gradient effect on a website was possible only with the use of images (A sliced image getting repeated along the x-axis or y-axis). But now, when all the major browsers are in a race to expand their functionality, and support for the CSS3 properties, almost all of them have started providing the support for CSS3 gradient.

None of them have started supporting them fully, but a partial support is provided by most of them including webkit browsers ,gecko browsers, and internet explorer also. Since the partial support is provided by the browsers, we need to use the vendor specific prefix (-moz
for Mozilla Firefox, -webkit
for Webkit browsers) with the CSS3 property. Also all the browsers have a different syntax for this property. We will see that later.

Why use CSS3 Gradients ?

CSS3 gradients are partially supported by the browsers; and on top of that the image technique (A sliced image getting repeated along the x-axis or y-axis) for generating the gradient effect on a website works perfectly well in all the browsers. So the question is why do we care about using the CSS3 gradient property?

Before answering this question, let me tell you that CSS3 gradients fall into a category where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead. That’s right, so if we use the CSS3 gradient property (with fallback image or background), then the browsers which support the CSS3 gradient will not load the image fallback; which will result in 1 less HTTP request – Thus making your website load faster .

How to use CSS3 Gradients ?

Alright, Now lets come to the point, and see (and understand) how this property is used in different browsers. Gradient is a replacement for an image. So gradient is used with the background-image property.

<style type="text/css">
div.testing {
    background-image: url("images/background-image.png") repeat-x 0 0;                                   /* Fallback Image - For all other browsers not supporting linear gradient property */
    background-image: -moz-linear-gradient(top, #0c2f08 0%, #0cff06 100%);                               /* For Mozilla Firefox */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#0c2f08), to(#0cff06));       /* For Webkit browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c2f08', endColorstr='#0cff06');  /* For Internet Explorer */
}
</style>

As you can see in the above code snippet, we have used 4 different lines of code. These 4 lines are for different browsers, to make sure that this is supported by all the browsers. We will see and understand the meaning of each line one by one.

The first line in the code is a simple background-image
property. This is actually the traditional way of using the gradients on web pages. This is a fallback property; which means It is supposed to be used by only those browsers that dont support the css3 gradients (like opera).

The second line in the code is used by the gecko browsers like Mozilla Firefox. The picture given below explains the property in detail.

Mozilla Firefox Linear Gradient property

The third line in the code is used by the webkit browsers like Chrome and Safari. The picture given below explains the property in detail.

Webkit Linear Gradient property

The third line in the code is used by Internet Explorer. The picture given below explains the property in detail. Internet Explorer gradient filter doesn’t support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.

Internet Explorer Linear Gradient property

The Final Outcome

DIV WITH LINEAR GRADIENT

For more information on CSS3 Linear Gradients, please visit the following links:


How to make rounded corner images using CSS3

How make rounded corner images using CSS3

Rounded corners in Website design has been a trend for a long time. Almost every project involves some or the other kind of rounded corner boxes. Designers and developers have used different techniques for developing rounded corner boxes. Many of these techniques involve css, javascript, jQuery plugins, and images.

Now looking at the extensive use of the rounded corners in Web Design, W3C has also come up with a new property in CSS3, which will make the rounded corners much easier to use and implement. This property is the “border-radius” property. Almost all the major browsers (except Internet Explorer) have started using this property, with their vendor specific prefixes (-moz-border-radius, and -webkit-border-radius). This property is very easy to use; And using this property will give a rounded corner to almost any element in the html document.

Problem: “border-radius” property doesnot work on images

With the use of “border-radius” property, the rounded corners are easily achievable on div tags, spans, and other html elements. Now, the problem is when you use the border-radius with an img element, the border of the image gets rounded, and the image is drawn above the border, so it is not rounded (look at the example below).

Car

To the image displayed above (img tag), we have given the following styles:

<style type="text/css">
img{
    border: 4px solid #fff;
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    border-radius: 30px;
}
</style>

Here we observe one thing that by giving the “border-radius” property to the <img> tag the borders get rounded, but the image does not. The image flows out of the border.

Solution: The tricky part!!!

To solve this above discussed issue, we should do the following steps:

  1. Wrap the <img> element with a div tag which should be having the same dimensions (height and weight) as the <img> tag.
  2. To this wrapping div tag, specify the same original image as the background image.
  3. To the original image <img> tag, give the property “opacity: 0“.

Now, after following the steps as mentioned above, we have the following html markup:

<div>                                             /* DIV TAG STARTS HERE WITH SAME DIMENSIONS AS IMAGE */
    <img src="images/test.jpg" alt="testing" />   /* IMAGE TAG */
</div>                                            /* END DIV TAG */

Now, we are going to give the following styles to the img and div tag.

<style type="text/css">
div{
    width: 550px;                                          /* Width same as the image width */
    height: 350px;                                         /* Height same as image height */ 
    background: url("images/test.jpg") no-repeat 0 0;      /* Background Image same as the Original image being wrapped by the div tag */
    border: 4px solid #fff;
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    border-radius: 30px;
}

img{
    opacity: 0;                                            /* Hide the original image being wrapped by the div tag */
}
</style>

The Final Result

After giving the above mentioned markup, and the styles, we will achieve that looks something like this:

Car

The rounded corners shown in the examples above will not appear in Internet explorer. The “border-radius” property is not supported by Internet Explorer as of now.

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:



How to use any font on your website

How to use any font on your website

This question might sound very simple to answer. Just download the font of your choice, install it, and include it (using font-family CSS property) in your website. But in reality it is not as simple as it sounds. What happens if your visitors (website visitors) dont have the same font installed on their system? If you use a font that is not installed on your website visitor’s computer then his or her browser will show some other font that is present on their computer.

So, What is the easiest way of using fonts of your choice on your website? The answer is “Font Squirrel“. This is one website which provides @Font-Face Kits, which is a tool that allows you to easily use any font in your web sites. Font Squirrel uses a technique called “font embedding“. Font-Embedding is a technique which allows fonts to be temporarily installed on a user’s computer so that a Web page is displayed exactly as the Web designer intended. To know more about the “font-embedding technique” go to this link.

Demo of Font Embedding- Use any font on a webpage

Click here to go to the demonstration page, where I have used some uncommon fonts to explain the usage of “Font Squirrel” @font-face kit generators.

Now Step by Step we will see how to use custom fonts on our webpage/ website.

Step 1: Download a font of your choice (which you want to use in your webpage/ website). Save it on your desktop.

Step 2: Go to the following link “http://www.fontsquirrel.com/fontface/generator“.You should now see something like this:

Font Face Generator Kit on Font Squirrel

Step 3: Click on “Add Fonts” button on the top. Select the font that we have downloaded (to be used on our website/ webpage). And click on “Open” button, which will upload that font.

Step 4: Check the box as shown in the figure (Marked in red border). Before you check the box, make sure that the fonts you are uploading are legally eligible for web embedding.

Font Face Kit Generator - Font Squirrel

Font Face Kit Generator - Font Squirrel

Once you check the box, you will see that a button appears on the bottom of the screen which says “Download your kit“. (See the picture above- Marked with blue border).

Step 5: Click on the button, and save the zipped file on your desktop. Extract the contents of the zipped file in the folder where you have saved your html files. In the extracted content, you will find a file called “stylesheet.css“. This file contains the style rules for the font that we are going to embedd in our website. Its content will look something like this:

@font-face {
	font-family: 'ArcanumRegular';
	src: url('arcanum-webfont.eot');
	src: local('☺'), url('arcanum-webfont.woff') format('woff'), url('arcanum-webfont.ttf') format('truetype'), url('arcanum-webfont.svg#webfonta1BeegY1') format('svg');
	font-weight: normal;
	font-style: normal;
}

Step 6: Copy and paste the content of your “stylesheet.css” file on top of your main css file. Now the section of your webpage where you want to use your own downloaded font, just use the style rule- font-family: “Your-font-name”;.

That’s it. Now you see how easy it is to use the custom fonts on your website using “Font Squirrel”. Click here to go to the demonstration page, where I have used some uncommon fonts to explain the usage of “Font Squirrel” @font-face kit generators.

For more information on font-embedding and “How to use custom fonts on a webpage”, please visit the following links:



How to customize browser default Vertical Scrollbar: jScrollPane (Step by Step)

What is jScrollPane?

jScrollPane is a jQuery Plugin that gives you the liberty to replace the browsers default “Vertical Scrollbars” with your own customized ones. This means that if you dont want the browsers default vertical scrollbars to appear on a webpage, then you can create your own customized scrollbars, and use it in place of browsers default vertical scrollbars with the help of this plugin.

With the use of this jQuery Plugin, you can easily control the apperance of the custom scrollbars using simple CSS.

Image of Customized Scrollbar using jScrollPane

Image of Customized Scrollbar using jScrollPane

Click here to see jScrollPane demo.

How to use jScrollPane

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 jScrollPane file (jScrollPane.js). Save both the files in js folder.

Step 4: Download the css file that comes with jScrollPane (jScrollPane.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“.

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/jScrollPane.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>

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

<div class="container" id="section-scroll">
    <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.

<style type="text/css">
    .container{
        width:400px;
        height:300px;
        overflow: auto;
    }
	
    .content{
        width:360px;
        height: 1000px;
        margin:10px auto;
    }
</style>

By assigning these styles, you will find that the vertical 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 (300px) and width (400px) 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 width (350px) which is less than the container box. We are doing this to avoid the appearence of horizontal scroll bar on the container box. Instead we are giving a height (1000px) 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: 300px; width: 400px; overflow: auto;
Content— height: 1000px; width: 350px; margin: 10px auto;

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:400px;
    height:300px;
    overflow: auto;
    }
	
.content{
    width:360px;
    height: 1000px;
    margin:10px auto;
    }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<link rel="stylesheet" type="text/css" href="jScrollPane.css" />

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

<div class="container" id="section-scroll">
    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore.
        </p>
    </div>
</div>

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

<script type="text/javascript">
    $(function(){
        $('#section-scroll').jScrollPane();
    }); 
</script>

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

<style type="text/css">
.container{
    width:400px;
    height:300px;
    overflow: auto;
    }
	
.content{
    width:360px;
    height: 1000px;
    margin:10px auto;
    }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<link rel="stylesheet" type="text/css" href="jScrollPane.css" />
<script type="text/javascript">
$(function(){
    $('#section-scroll').jScrollPane();
}); 
</script>

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


Search tags:
, , , , , , , , , , , ,