Vikram Mehta's Blog

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

how2designweb — Sun, 03 Apr 2011 10:39:44 +0000

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

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

VIEW DEMO

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 -

js to store all javascript files
css to store all stylesheet files
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.

Step 7: Write the following lines of code between and tags of “index.html” to include the js files and css files.

Step 8: Write the following code between and tags of index.html

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.

VIEW DEMO

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

Automatic Image Slider (with pagination)using jQuery

7 Best Tutorials on CSS / HTML

how2designweb — Mon, 03 Jan 2011 16:57:24 +0000

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.

Slideshare

CSS3 Gradients for all browsers

how2designweb — Sat, 01 Jan 2011 16:20:31 +0000

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.

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.

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.

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.

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

how2designweb — Sun, 19 Dec 2010 16:41:26 +0000

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).

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

Here we observe one thing that by giving the “border-radius” property to the 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:

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

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

                                             /* DIV TAG STARTS HERE WITH SAME DIMENSIONS AS IMAGE */
       /* IMAGE TAG */
                                            /* END DIV TAG */

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

The Final Result

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

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.

Wallpapers (Funny Animals)

how2designweb — Fri, 30 Jul 2010 17:59:03 +0000

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

how2designweb — Sat, 24 Jul 2010 19:16:32 +0000

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

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 -

js to store all javascript files
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

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

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 and tags of index.html.

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 tags like this. Keep the following code between the and tags.

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 and should look something like this.

Step 9: Now our code inside the and should look something like this.

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

Step 11: Now our code inside the and should look something like this.

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:

A Great Collection of Wallpapers

how2designweb — Sat, 24 Jul 2010 13:13:15 +0000

Hello All, Here I am sharing a random collection of beautiful wallpapers which I downloaded from internet.. I hope you will like them too..

Source:

SocWall

How to use any font on your website

how2designweb — Sat, 10 Jul 2010 21:38:58 +0000

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.

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:

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

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:

2 Great jQuery Plugins for making rounded corners

how2designweb — Sat, 03 Jul 2010 14:56:12 +0000

Simplest way to create rounded corners

There are many different ways to create rounded corner boxes on a web page. Web designers employ many different techniques to create rounded corners, most of which make use of background images and CSS. This technique is good but is tedious, time consuming and adds extra markup in your html document with no structural value.

Today I will discuss about 2 great jQuery plugins which will help you in creating rounded corner boxes for your website in less than a minute. Believe me they are the easiest and simplest way to create rounded corner boxes. They are:

jQuery Corner Plugin

jQuery Corner Plugin is simple and one of my favourite plugin for creating rounded (or other styled) corners on html elements. Lets see how to use this plugin to create rounded corner boxes.

Click here to see jQuery Corner Plugin demo

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 a separate folder "js" inside Project folder. We will store the jQuery files in js folder.

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

Step 4: Now inside the main Project folder, create a blank html file. Name it as “index.html“.

Step 5: Write the following lines of code between and tags of “index.html” to include the js files.

Step 6: Write the following line of code between the and tag of “index.html“. This will create a div tag with an id of "box" with some text content.


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 te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Step 7: Write the following line of code between the and tag of “index.html“. This will apply the following styles to the div tag with an id of "box".

Here we are assigning the following styles to the box:

background color — #ff9900
border — 8px
width — 300px
padding — 15px
margin: 0 auto — To make the box appear in the center of the page.

Step 8: Now write the following line of code between and tag which will make the rounded corners appear.

Now lets review the complete code once again. Your html page should look something like this:




Untitled Document











    
    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.

Step 9: That’s it. We are done now. Click here to go to the demo page to see some more examples.

The best part about jQuery Corner Plugin is that it is very light weight. Not only you can create rounded corners, using this plugin, but also you can create bitten corners, dodge corners and many more. Above all, it exempts you from the trouble of creating rounded corners using background images and CSS. For a complete list of options and detailed description, please visit the jQuery Corners Demo homepage.

DD_Roundies

DD_Roundies is just another jQuery plugin which can be used for making the rounded corners. Here you might be thinking why do we need this plugin, when we already have jQuery Corner Plugin which also does the same task.

One problem with jQuery Corner plugin is that you cannot use it with the inline elements (like anchor tags and spans). This problem is resolved by DD_Roundies plugin. DD_Roundies was mainly focussed to be used in Internet explorer browser. DD_roundies uses IE’s proprietary VML drawing language to create small images representing each corner of an element to be rounded. For more information about this plugin click here.

Click here to see DD_Roundies Plugin demo

Lets see how to use this plugin to create rounded corner boxes.

Step 1: Repeat the steps 1 to 7 as described above (in explaination for jQuery Corners Plugin). Just make sure that you copy the following two files in the js folder: (a) jQuery file (jquery-1.3.2.js), and (b) DD_Roundies plugin file (DD_roundies.js). Save both the files in js folder.

By now, the header section between and of your index.html should look something like this:

And the code between and of your index.html should look something like this:


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 te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Step 2: Now write the following line of code between and tag of index.html which will make the rounded corners appear.

By the end of this step, your index.html should look something like this:




Untitled Document










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.

Step 3: That’s the end of the lesson. Click here to go to the demo page to see some more examples. If you want to know more details about this plugin, feel free to visit the homepage of DD_Roundies.

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

how2designweb — Sun, 27 Jun 2010 16:27:09 +0000

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

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 -

js to store all javascript files
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 and tags of “index.html” to include the js files and css files.

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 and tags of index.html.

Here we are creating a box named container, which contains another box named content. Give the following styles to container box and content box.

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.

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 and should look something like this.

Step 9: Now our code inside the and should look something like this.


    
        
            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.

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

Step 11: Now our code inside the and should look something like this.

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.