jQuery Animated Grid Plugin
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
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 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.
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.
- 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.
Licence
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>
<-- 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>
<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(){
</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;} });
});// 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 */
/* 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>
<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.
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 :
- Bug Reports
- Feedback
- Features requests