Jquery Animated Grid Plugin
What does this plugin ?
The Animated Grid Plugin is a simple bi-dimensional Grid. It was created to be the more flexible as possible to fit into your Html Structure easily without adding extra class. It allow you to manage easily the degradation if javascript is disable with two differents fields in the Css file.
Demo
This demo using only class / autoCloseCell = true / + funny jumping effect :
<script>
$(document).ready(function(){
$(document).ready(function(){
$('#wrapperGridUsingClass').animatedGrid({categorieClass:'mainCategorie', mainTitle: 'div.mainTitle', subSection:'div.subSection', subTitle:'div.subTitle', content:'div.content', autoCloseCell:true });
});
Main Categorie 1
Subtitle 01
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean mollis lobortis velit, eu dictum odio rhoncus eget. Nam iaculis vestibulum quam, at facilisis ligula viverra a.
Subtitle 02
Sed interdum pellentesque tellus, sit amet vehicula turpis laoreet ut. Aenean ante erat, dapibus ac lobortis id, posuere non eros. Nullam sed augue in ipsum aliquet porta sit amet sit amet metus. Nunc scelerisque metus id ipsum varius malesuada. Vivamus ullamcorper velit at ligula mattis ultrices.
Subtitle 03
Fusce in diam et purus ultrices lobortis. Vivamus pulvinar congue fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed mattis augue.
Main Categorie 2
Subtitle 01
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean mollis lobortis velit, eu dictum odio rhoncus eget. Nam iaculis vestibulum quam, at facilisis ligula viverra a.
Subtitle 02
Sed interdum pellentesque tellus, sit amet vehicula turpis laoreet ut. Aenean ante erat, dapibus ac lobortis id, posuere non eros. Nullam sed augue in ipsum aliquet porta sit amet sit amet metus. Nunc scelerisque metus id ipsum varius malesuada. Vivamus ullamcorper velit at ligula mattis ultrices.
Subtitle 03
Fusce in diam et purus ultrices lobortis. Vivamus pulvinar congue fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed mattis augue.
Main Categorie 3
Subtitle 01
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean mollis lobortis velit, eu dictum odio rhoncus eget. Nam iaculis vestibulum quam, at facilisis ligula viverra a.
Subtitle 02
Sed interdum pellentesque tellus, sit amet vehicula turpis laoreet ut. Aenean ante erat, dapibus ac lobortis id, posuere non eros. Nullam sed augue in ipsum aliquet porta sit amet sit amet metus. Nunc scelerisque metus id ipsum varius malesuada. Vivamus ullamcorper velit at ligula mattis ultrices.
Subtitle 03
Fusce in diam et purus ultrices lobortis. Vivamus pulvinar congue fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed mattis augue.
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.
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
Added by Denis P. at Fri, Apr 23rd 2010, 12:07
Comments (3)
ohgio said :
ty
Thu, Aug 19th 2010, 11:09
Alisk12 said :
Excellent,
this is really usefull for my project
Thanks
Sat, Aug 7th 2010, 05:28
Mark W. said :
Works fine. Well Done
Thanks.
Mon, Jul 26th 2010, 06:31