jQuery Animated Grid Plugin

Download now

This animated Grid Plugin is compatible with Mozilla Firefox, Safari, IE8 / IE7, Google Chrome and allow you to control completely the degradation if javascript is disable.

Demo

Main Categorie 1

Sub Section 1
Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.
Sub Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.
Sub Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.

Test

Main Categorie 2

Sub Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.

Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.
Sub Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.
Sub Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.

Main Categorie 3

Sub Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.
Sub Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.

Test
Sub Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.

see more demos

Licence

Creative Commons License
Jquery Animated Grid Plugin by Denis Pissoort is shared under the terms of the licence Creative Commons Paternité-Partage des Conditions Initiales à l'Identique 2.0 Belgique.

How to ?

The HTML Structure

The structure of your Animated Grid needs to be like this :

<div id="wrapGrid">
<-- Start of a categorie -->. <div class="wrapCategorie">// Trigger the categorie's selection. //Here you can add what you want if you need to. <mainTitle></mainTitle>
//Here you can add what you want if you need to. <subSection>
//Here you can add what you want if you need to. <subTitle></subTitle>// Trigger the Cell's opening. //Never add something between subTitle and content. <content></content>
//Here you can add what you want if you need to. </subSection>
//Here you can add what you want if you need to. </div>
<-- End of a categorie -->. ...etc...
</div>

Add Jquery and the plugin to your page

In the <head></head> of your html code add these lines :

<link rel="stylesheet" type="text/css" href="myPath/animatedGrid.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="myPath/jquery.animatedGrid.js" type="text/javascript"></script>

Activation

to activate the plugin:

<script>
$(document).ready(function(){
$('#wrapGrid').animatedGrid({ categorieClass: 'wrapCategorie',// default = 'wrapCategorie' // Don't use '.wrapCategorie', 'div.wrapCategorie', etc...
// for these 4 next parameters you can specify an html tag and his class. Use a class if you have same html tag for different parameters. // ex : <h2>MAIN TITLE</h2> NO CLASS => 'h2' // ex : <h2 class"test">MAIN TITLE</h2> WITH CLASS => 'h2.test'Don't use '.test' // Also, be carefull with the "native" condition of the html Tag too (inline, block). It can produce bad result. (ex : th and td) mainTitle: 'h2',// default = 'h2' subSection: 'dl',// default = 'dl' subTitle: 'dt',// default = 'dt' content: 'dd',// default = 'dd'
autoCloseCell: Boolean// default = false speedAnimeWidth: 'fast' / 'slow' / numerical value (ex: 300),// default = 300 speedSlide: 'fast' / 'slow' / numerical value (ex: 300),// default = 'fast' activeCell: true / numerical value in pixel (ex= '330px')// default = true // You have to insert a numerical value only if you don't have add the "activeGrid" class on a Main Categorie => <HtmlTag class="wrapCategorie activeGrid">. This numercial value represent the width value of an active Main Categorie. ( see css:div.wrapCategorie.wrapCategorieGridActive{width:330px; cursor:default;} });
});
</script>

CSS

the css file contains 2 différents parts to easily set the design for a nice degradation.

/* Start Style if JS disable Here you can style your Grid for visitors who have javascript disable You can add 'classes' or 'id' for any element. */ #wrapperGrid{margin:0;} /* Wrap for the grid */ div.wrapCategorie{} /* div containing a Main Categorie */ h2{} /* title of the Main Categorie */ dl{} /* contains all sub Sections */ dt{} /* title of the Sub Section */ dd{} /* content of the sub Section */
/* End Style if JS Disable */
/* Start Style if JS Enable
Here you can style your Grid for visitors who have javascript enable These classes are automatically created following this rule : classname = "<Html Tag>+Grid" ex : h2Grid. If your mainTitle is an <h5>My Title</h5> then : .h5Grid is the class.*/ If your mainTitle is an <h5 class="myClass">My Title</h5> then : .h5myClassGrid is the class.*/
/* Be carefull this two next classes need a width for the animated transition ! In the wrapCategorieGrid (categories unselected) set a width. then in the wrapCategorieGridActive (categories selected) set a width of your choice. On click event the transition is automatic. For now, there is only the width that can be animate. All other changes in the css are update when the animation is finished. */
div.wrapCategorie.wrapCategorieGrid{width:250px; cursor:pointer;} div.wrapCategorie.wrapCategorieGridActive{width:330px; cursor:default;} h2.h2Grid{} dl.dlGrid{} dt.dtGrid{cursor:pointer;} dd.ddGrid{} img.imgGrid{width:100%;} /* This is needed only if you use images in your Grid. Set the width of images to 100% to prevent bad dimension and strange effect. Don't forget to set the height directly in the html tag with the height attribut. see html */
.dtGrid.activeGrid{} /* add class="activeGrid" on one wrapCategorie only to open it at the begining. add this class on several subTitles to open them at the begining. If you have autoCloseCell: true, add this class on one subTitle only. If you don't add this class on one wrapCategorie, don't forget the parameter "activeCell" see activation*/
/* End Style if JS Enable */

Image in the content

To correctly insert an image in your content :

<content>
<img src="yourImage.jpg" alt="your description" height="xxx" />
// ex: <img src="yourImage.jpg" alt="your description" height="250" /> </content>

Dependencies

jQuery 1.4.2

Download the package

animatedGrid full package 1.0a// The complete package with comments for each files and a simple demo.
animatedGrid.min.js 1.0a (3,82kb)// The minified version of the Animated Grid Plugin.

Bug Report / Contact / Feedback / Features requests

There is a Google Group for you. You can post :

Visit the group