Lets learn Web Designing

jQuery Plugins

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:


Advertisements

2 Great jQuery Plugins for making rounded corners

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:

  1. jQuery Corner Plugin
  2. DD_roundies

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.

jquery-corner demonstration picture

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 <head> and </head> tags of “index.html” to include the js files.

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>

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

<div id="box">
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.
</div>

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

<style type="text/css">
	#box{
		background: #FF9900;
		border: 2px solid #660033;
		width: 300px;
		margin: 0 auto;
		padding: 15px;
	}
</style>

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 <head> and </head> tag which will make the rounded corners appear.

<script type="text/javascript">
	$(document).ready(function(){
		$('#box').corner();
	});
</script>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
	#box{
		background: #FF9900;
		border: 2px solid #660033;
		width: 300px;
		margin: 0 auto;
		padding: 15px;
	}
</style>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#box').corner();
	});
</script>

</head>

<body>

    <div id="box">
    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.
    </div>

</body>
</html>

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.

DD Roundies demonstration image

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 <head> and </head> of your index.html should look something like this:

<style type="text/css">
.roundbox  {
    background-color:#FF0066;
    border:8px solid #FFCCCC;
    color:white;
    font-weight:bold;
    padding:10px;
    width:400px;
}  
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/DD_roundies.js"></script>

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

<div class="roundbox">
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.
</div>

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

<script type="text/javascript">
	DD_roundies.addRule('.roundbox', '10px', true);
</script>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.roundbox{
	background-color: #FF0066; 
	color: white; 
	width: 300px; 
	padding:10px;
	border:8px solid #FFCCCC;
	font-weight: bold;
}
</style>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/DD_roundies.js"></script>
<script type="text/javascript">
	DD_roundies.addRule('.roundbox', '10px', true);
</script>
</head>

<body>

<div class="roundbox">
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. 
</div>

</body>
</html>

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)

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:
, , , , , , , , , , , ,


How to use jQuery Colorbox

What is jquery Colorbox

Colorbox is a light-weight, customizable jquery plugin which can be used to display photos, photo groups, slideshows, ajax, inline, and iframed content in a pop up.

It is one of my favorite jquery plugins, which I use to create pop ups on a web page. You can create any kind of customizable pop ups to display the content of a div tag, any picture, or any html.

Example of colorbox pop up

Click here to see Colorbox demo

How to use jquery Colorbox

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 picture files

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

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

Step 5: Download all images that come with the colorbox plugin. You can also download all these images from here. Save all the images in images folder.

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

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

Step 8: Now we need 2 main elements inside the html file.

  1. A link that can be clicked to bring the popup
  2. Some content that can be shown in the pop-up

Step 9: Write the following line of code between the <body> and </body> tag of “index.html” to create a link.

<a href="#" id="test-link">Click Me</a>

Step 10: Write the following lines of code between the <body> and </body> tag of “index.html” to create some test content that can be displayed in the popup when the link is clicked.

<div id="test-content">
    <h1>Test Heading</h1>
    <p>
        This is just a test content that does not make any sense. This is just a test content that does not make any sense. This is just a test content that does not make any sense. This is just a test content that does not make any sense. This is just a test content that does not make any sense.
    </p>
</div>

Step 10: Now wrap the content div inside <div style=”display: none”> and </div>. By doing this we are wrapping our content inside a hidden div so that our content is not visible. It is because we want the content to be displayed only on clicking a link. Now our code inside the <body> and </body> should look something like this.

<a href="#" id="test-link">Click Me</a>

<div style="display: none;">
       <div id="test-content">
        <h1>Test Heading</h1>
        <p>
            This is just a test content that does not make any sense. This is just a test content that does not make any sense. This is just a test content that does not make any sense. This is just a test content that does not make any sense. This is just a test content that does not make any sense.
        </p>
    </div>
</div>

Step 11: Now write the following line of code between <head> and </head> tag to bring the colorbox in action.

<script>
    $("#test-link").colorbox({width:"60%", height:"300px", inline:true, href:"#test-content"});
</script>

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

<link rel="stylesheet" type="text/css" href="css/colorbox.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
    $("#test-link").colorbox({width:"60%", height:"300px", inline:true, href:"#test-content"});
</script>

Step 12: That’s it. We are done. Just save your html file, and click on the link to see the colorbox popup in action.

The best part about colorbox is that it is extremely light weight. It is less than 9kb in size and is highly customizable. You can change anything and everything from appearence to functionality. You can also use a lot of options with it. For a complete list of options and detailed description, please visit the Colorbox homepage.


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