Simple Accordian Example

You want to create an simple accordian?, just 3 lines code in JQuery. Below is the code, check it out:

HTML Structure

<div class="acoordian example1">
                <p>Example 1</p>
                <h3>abc</h3>
                <div class="accordContent"><p>Accordian Example<p></div>
               
                <h3>abc</h3>
                <div class="accordContent"><p>Accordian Example<p></div>

</div>

CSS Structure

*{padding:0;margin:0}
.acoordian{width:350px;padding:20px 0 0 20px;}
.acoordian h3{font-size:14px;color:#0000ff;width:350px;cursor:pointer;display:inline-block;border:1px
solid #ccc;}
.acoordian .accordContent{border:1px solid #666;width:340px;padding:5px;display:none;float:left}   

Jquery Code:

$(document).ready(function(){
                /*Simple Accordian onclick the content slides down*/
                $(".example1 h3").click(function(){
                    $(this).next().slideToggle();
                });

                /*OR*/

                /*Simple Accordian onclick the content slides down with siblings sliding up*/

               $(".example1 h3").click(function(){
                    $(this).next().slideDown().siblings('.accordContent').slideUp();
                });
});

See its simple!!!. Why to include the plugins which will increase load time :)

Here you can view the demo

Block vs Inline elements

characteristics of block elements include:

1. Always begin on a new line
2. Height, line-height and top and bottom margins can be manipulated
3. Width defaults to 100% of their containing element, unless a width is specified

Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. 

Inline elements on the other hand have the opposite characteristics:

1. Begin on the same line
2. Height, line-height and top and bottom margins can't be changed
3. Width is as long as the text/image and can't be manipulated.

Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>.

To change an element's status you can use display: inline or display: block.

Use class instead of giving style to Typography elements

One of the best way about creating better stylesheets is making unique classes for common properties.

The idea is, instead of setting global styles for typographic elements like p, ul, ol, h1, h2, etc, that you would instead apply those styles as a class, perhaps  .text...

There will be lot of places on a website where you want a clean slate to work from and not be worried about what global styles are doing. The classic example is lists, where when using them for things like navigation you likely don't want the same margin/padding/list-style as you would within an article.

So make different classes with whatever style properties you want to apply.

Instead of 

p{}

span{}

ul{}

ol{}

h1{}

h2{}

Make classes:

.font12size{font-size:12px}

.floatleft{float:left}...

and use it with the elements as <p class='font12size'> CSS technique </p>

Of course, the effectiveness of this depends on the website. What kind of site it is and what stage the project it's in. I suspect it would work better on websites that have a more "modular" architecture and that don't have a huge set of legacy content. I'd be interested in trying it on a fresh project.

Must Read HTML5 technique:

1. HTML for Icon Font Usage
2. Icon Font examples

how to enlarge the text ? Image on hover using animate function in JQuery

You have seen many websites, on hover of the image or text it enlarges.
In this tutorial, we will go with a simple example,
We will increase font size of a text on hover.

HTML Structure:
<div class="wrapper">
    <p><span>W</span></p>
    <p><span>E</span></p>
    <p><span>B</span></p>
    <p><span>B</span></p>
    <p><span>Y</span></p>
</div>

CSS:
.wrapper{width:500px;height:300px;margin:0 auto;padding:0 0 0 30px}
.wrapper p{font-family:Arial;font-size:40px;padding:20px;float:left;}

Jquery code:
Include the Jquery library first and then go with the below code.


$(document).ready(function(){
    $("p span").hover(function(){       
        $(this).animate({"font-size" : '+=20'});   
    },function(){
        $(this).animate({"font-size" : '-=20'});
    });
});

Explaination:
We have a set of alphabets, each wrapped in span, inside a p tag. You can have your own structure.
Now on hover of span, we are increasing the fontsize by 20 pixels, and on hover out, we are decreasing it by same number of pixels, so that it resets back to same original pixel size.

Click Here to view the demo

Scrolling to div smoothly using Jquery

Want to navigate to particular div / portion of html in the same page?
There are three ways to do this :-

1. Using anchor tag 
2. Using pure Javascript.
3. Using JQuery Scrolltop function.

Using anchor tag

This is the native method, giving id to the element that needs to be focussed and in href of anchor tag calling the id with hash.

eg: <a href="#abc">scrolltop</a>

This will jump to that element directly.

Using pure Javascript. 

Below is the function that will navigate to whichever element you want.
FUNCTION:
function scrolltoDiv(_id)

{

document.getElementById(_id).scrollIntoView(true);

}

CALLING THE ABOVE FUNCTION :-

You can call the above functions in following ways:

1. <a href="javascript:scrolltoDiv('abc')">scroll top </a>
2. <p onclick="scrolltoDiv('abc')">scrolltop</p>

  * where abc is the id of the element.

Using JQuery Scrolltop function.

Below is the function that will navigate to whichever element you want.
FUNCTION : 
function scrolltoDiv(_id)
{
    $('html, body').animate({
            scrollTop: $("#" + _id).offset().top
    },1000,'easeInOutCirc');
}    

CALLING THE ABOVE FUNCTION :-
You can call the above functions in following ways:

1. <a href="javascript:scrolltoDiv('abc')">scroll top </a>
2. <p onclick="scrolltoDiv('abc')">scrolltop</p>

  * where abc is the id of the element.

Customized Image Slider Using JQuery

Want to make a image gallery which has next previous and auto functionality. Its simple, go through the tutorial below ..

HTML code:

The html code is pretty much simple. Have a wrapper Div which has an unordered list.
list the images as much you  want.
Below is the example for the same,

<div id="imageslider"> 

    <ul>

      <li><img src="images/banner1.jpg" alt="banner1" width="908" height="313" /></li>

      <li><img src="images/banner2.jpg" alt="banner2" width="908" height="313" /></li>

      <li><img src="images/banner3.jpg" alt="banner3" width="908" height="313" /></li>

    </ul>

</div>

Css Style :

*{margin:0;padding:0}    /*Reset CSS*/
#imageslider{width:908px;height:313px;overflow:hidden} 
#imageslider ul{list-style:none}
#imageslider ul li{float:left}
a.prevlink,a.nextlink{float:left}
.prevlink{display:block;padding:0 25px 0 15px;}

Jquery Code  :

First include the Latest Jquery Library file, after that you can write the js code in page or make an external file say customslider, save it with extension 'js' which will look as "customslider.js" and include it in your HTML file.

Below is the include code example:

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

customslider.js

//Global Varaibles

var licount = 0; 

liwidth = 0; 

var timer; 

var index = 0;

//Main Ready function, called when entire html is ready

 $(document).ready(function() { 

  $("#imageslider ul li").eq(0).addClass("visible"); 

  licount = $("#imageslider ul li").size();

  liwidth = $("#imageslider ul li").outerWidth(); 

  $("#imageslider ul").css({ "width": liwidth * licount });

  timer = setTimeout("autoslider()", 2000); //called the slider function, to begin autoscrolling 

//Previous button click 

$(".prevlink").click(function() { 

   clearTimeout(timer); 

   index = $("#imageslider ul li.visible").index(); 

   if (index !== 0) { 

       index = index - 1; 

    } 

    else { 

      index = licount - 1; 

    } 

   slider(index);

}); 

//Next Button Click

 $(".nextlink").click(function() { 

    clearTimeout(timer); 

    index = $("#imageslider ul li.visible").index(); 

    if (index != licount - 1) { 

       index = index + 1; 

    } else { 

       index = 0;

    } 

    slider(index);  

}); 

}); 

 //Function which takes the index of the current visible image, makes the check if it is last or first image, and  increements the index and passing it as parameter calls the slider function

function autoslider() { 

    index = $("#imageslider ul li.visible").index(); 

    if (index != licount - 1) { 

        index = index + 1; 

    } 

    else { 

       index = 0; 

    }    

   slider(index); 

   clearTimeout(timer); 

   timer = setTimeout("autoslider()", 2000); 

}

//This function addclass to the element li with passed index, removing siblings class

After adding the class it animates the li and after specfied interval autoslider function is called

function slider(_index) {

 $("#imageslider ul li").eq(_index).addClass("visible").siblings("li").removeClass("visible"); 

 $("#imageslider ul").animate({ "margin-left": (-1) * (liwidth * _index) }); 

 timer = setTimeout("autoslider()", 3000); 

}

You can just copy the code, and check it in your local first.

Will be happy to know your suggestions and feedback at ragu556@gmail.com

Happy Blogging :)

Raghvendra