Lets learn Web Designing

Latest

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

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

Simplest Image Slider Image

Simplest Image Slider Image

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

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

Step 1: Make a folder on your desktop, and give it a name. Lets say- “Project”. We will keep all our files inside this folder.

Step 2: To keep the structure organized, make 3 separate folders inside Project

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

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

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

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

Step 6: Now inside the main Project folder, create a blank html file. Name it as “index.html“. Now you should have a structure similar to this.

File Structure

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

<link rel="stylesheet" type="text/css" href="css/reset.css" >
<link rel="stylesheet" type="text/css" href="css/main.css" >
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

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

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

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

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

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

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

.slider img {
    float: left;
}

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

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

.clear {
    clear: both;
}

What are we doing here ?

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

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

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

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

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

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

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

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

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

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

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

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

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


7 Best Tutorials on CSS / HTML

7 Best Tutorials on CSS / HTML

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

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

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

CSS3 Gradients for all browsers

What are CSS3 Gradients ?

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

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

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

Why use CSS3 Gradients ?

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

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

How to use CSS3 Gradients ?

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

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

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

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

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

Mozilla Firefox Linear Gradient property

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

Webkit Linear Gradient property

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

Internet Explorer Linear Gradient property

The Final Outcome

DIV WITH LINEAR GRADIENT

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

How to make rounded corner images using CSS3

How make rounded corner images using CSS3

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

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

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

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

Car

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

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

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

Solution: The tricky part!!!

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

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

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

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

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

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

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

The Final Result

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

Car

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

Wallpapers (Funny Animals)

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:


A Great Collection of Wallpapers

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:

Follow

Get every new post delivered to your Inbox.