Javascript

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

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

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

April 3, 2011 | Categories: CSS, CSS3, html, Javascript, jQuery Tutorials | Tags: content slider, content slider tutorial in 10 easy steps, content slider tutorial step by step, content slider using jquery, content slider without using jquery plugin, easiest content slider, easiest image slider, how to make a content slider in jquery, how to make an image slider in jquery, image slider, image slider tutorial in 10 easy steps, image slider tutorial step by step, image slider using jquery, image slider without using jquery plugin, make your own content slider, make your own image slider, simplest content slider, simplest content slider tutorial, simplest image slider, simplest image slider tutorial, simplest image slider using jquery | 56 Comments

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

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

June 27, 2010 | Categories: html, Javascript, jQuery Plugins, Web Design | Tags: customize scrollbar, customize scrollbar using jquery, customize vertical scrollbar, how to customize a browser default scrollbar, how to customize a scrollbar, jquery jscrollpane, jscrollpane, scrollbar customization, scrollbar customization tutorial, scrollbar styling, simplest way to customize a scrollbar, step by step tutorial on customizing a scrollbar, vertical scrollbar customization | 16 Comments

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:

Reset CSS
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.

ie — Internet Explorer
ie8 — Internet Explorer 8.x
ie7 — Internet Explorer 7.x
ie6 — Internet Explorer 6.x
ie5 — Internet Explorer 5.x
gecko — Mozilla, Firefox (all versions), Camino
ff2 — Firefox 2
ff3 — Firefox 3
opera — Opera (All versions)
opera8 — Opera 8.x
opera9 — Opera 9.x
opera10 — Opera 10.x
konqueror — Konqueror
webkit — Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari — Safari, NetNewsWire, OmniWeb, Shiira
safarii3 — Safari 3.x
chrome — Google 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.

win — Microsoft Windows
linux — Linux (x11 and linux)
mac — Mac OS
freebsd — FreeBSD
ipod — iPod Touch
iphone — iPhone
webtv — WebTV
mobile — J2ME Devices (ex: Opera mini)

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

June 26, 2010 | Categories: CSS, Javascript, Web Design | Tags: 2 great tools to solve browser compatibility issues, 2 great utilities to solve browser compatibility issues, browser compatibility, browser compatibility issues, cross browser compatibility issues, css browser selector javascript, easiest way to resolve browser compatibility issues, how to solve browser compatibility issues, how to solve browser incompatibility using browser selector javascript, how to solve browser incompatibility using reset css, reset css, simplest way to resolve browser compatibility issues | 26 Comments

M	T	W	T	F	S	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Vikram Mehta's Blog Lets learn Web Designing

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

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

What are we doing here ?

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

What is jScrollPane?

How to use jScrollPane

What are we doing here ?

How to solve Browser Compatibility issues

What are browser Compatibility issues?

What Causes Browser Display Differences?

How to solve browser Compatibility issues?

Reset CSS

CSS Browser Selector Javascript

Calender

Recent Posts

Categories

Email Subscription

Archives

Meta

Vikram Mehta's Blog Lets learn Web Designing

Javascript

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

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

What are we doing here ?

Rate this:

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

What is jScrollPane?

How to use jScrollPane

What are we doing here ?

Rate this:

How to solve Browser Compatibility issues

What are browser Compatibility issues?

What Causes Browser Display Differences?

How to solve browser Compatibility issues?

Reset CSS

CSS Browser Selector Javascript

Rate this:

Calender

Recent Posts

Categories

Email Subscription

Archives

Meta