Lets learn Web Designing

Archive for June, 2010

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

Advertisements

How to solve Browser Compatibility issues

What are browser Compatibility issues?

I will try to explain it in the simplest possible way. Suppose you make any website and it looks perfectly alright in your default browser. Now you try opening the same website in some different browser, and you see some difference in its appearance. You again open the same website in a third browser and it again looks a bit different (as compared to the other two browsers). Now you start wondering, how to make the website appear same in all the browsers.

Yes.. You are now dealing with browser compatibility issues. It is the most common problem that every web-designer goes through. Every Website Developer / Designer spends most of his/ her time struggling to solve browser compatibility issues.

What Causes Browser Display Differences?

  • Different Browsers
  • Different Browser Versions
  • Different Computer Types
  • Different Screen Sizes
  • Different Font Sizes
  • HTML Errors
  • Browser Bugs

For a detailed description on each of the above listed topics, please visit this link.

How to solve browser Compatibility issues?

There are a set of rules and regulations that you need to follow in order to make your website look consistent across all the browsers, like using a correct DOC type, Validating your HTML and CSS etc. But here I am not going to discuss about all these rules.

Today I am going to share two major utilities with you which will solve almost all your browser compatibility issues. They are:

  1. Reset CSS
  2. CSS Browser Selector javascript

Reset CSS

Normally every browser assigns some default styles (like default line heights, margins, paddings, and font sizes, headings, and so on) to HTML elements. Because of this default styling adapted by the browsers, every html document appears to be a bit different in different browsers.


The use of Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a levelled baseline across all major browsers and providing a sound foundation upon which you can explicitly declare your styles.

There are many reset style-sheets available on the internet today. You can find a good collection of different reset CSS files here. You can download and use any reset CSS stylesheet depending on your choice and requirement. Alternatively you can download my choice of reset CSS as a separate stylesheet; or copy and paste the following stylesheet code on top of your default stylesheet.

@CHARSET "UTF-8";

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

fieldset,img { 
	border:0;
}

address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:normal;
}

ol,ul {
	list-style:none;
}

caption,th {
	text-align:left;
}

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
	position:relative;
}

q:before,q:after {
	content:'';
}

abbr,acronym { 
	border:0;
}

Go to this link for more information on reset CSS.

CSS Browser Selector Javascript

CSS Browser Selector is a very small javascript with just one line and less than 1kb which gives you the ability to write specific CSS code for each operating system and each browser.


By including this javascript file in your HTML document, you can assign a class for a specific browser, and you are free to use your own style rules for that particular browser.

Click here to see a demonstration of CSS Browser Selector Javascript.

Lets assume a situation that you have created a webpage with font size of 16px.This web page appears to be the same in all the browsers, but in safari browser, you feel that the font size appears to be a bit bigger. To solve this issue, you can include the CSS Browser selector javascript between your <head> and </head> tags like this:

<head>
    <script type="text/javascript" src="js/css_browser_selector.js">
</head>

After this, you can define the style rules for safari browser like this which will solve your issue.

.safari body{
	font-size: 15px;
}

As you can see the code above that we have defined a seperate class “.safari” for the safari browser. In the same way you can define the class “.ie” for Internet Explorer, and “.opera” for Opera browser. Following list shows you all the possible browser codes which you can use as classes for that particular browser.

  • ieInternet Explorer
  • ie8Internet Explorer 8.x
  • ie7Internet Explorer 7.x
  • ie6Internet Explorer 6.x
  • ie5Internet Explorer 5.x
  • geckoMozilla, Firefox (all versions), Camino
  • ff2Firefox 2
  • ff3Firefox 3
  • operaOpera (All versions)
  • opera8Opera 8.x
  • opera9Opera 9.x
  • opera10Opera 10.x
  • konquerorKonqueror
  • webkitSafari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safariSafari, NetNewsWire, OmniWeb, Shiira
  • safarii3Safari 3.x
  • chromeGoogle Chrome

Similar to this you can specify the class for different operating systems also. Following list shows you all the possible operating system codes which you can use as classes for that particular operating system.

  • winMicrosoft Windows
  • linuxLinux (x11 and linux)
  • macMac OS
  • freebsdFreeBSD
  • ipodiPod Touch
  • iphoneiPhone
  • webtvWebTV
  • mobileJ2ME Devices (ex: Opera mini)

For getting more information on CSS Browser Selector javascript, go to its homepage. To download Browser selector javascript click here


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