Recommend this page to a friend! |
Download .zip |
Info | View files (9) | Download .zip | Reputation | Support forum | Blog | Links |
Last Updated | Ratings | Unique User Downloads | Download Rankings | |||||
2012-11-13 (3 years ago) | Not enough user ratings | Total: 213 | All time: 210 This week: 19 |
Version | License | JavaScript version | Categories | |||
growshrink 1.0.0 | MIT/X Consortium ... | 1.0 | Animation, HTML, jQuery |
Description | Author | |
This is a jQuery plug-in that can grow or shrink HTML page elements inside the respective parents elements. |
# growshrink.js Growshrink.js is a jQuery Plugin for scaling divs from zero size to the same size as the parent and back again. I used similar code on [this site](https://sequoiaheritage.com/) because I found the jQuery UI wasn't satisfactory for what I wanted to do - especially when using size/scale from the bottom right to top left or bottom left to top right. You can see a live demo of this plugin here -> http://greglane.me/demos/growshrink/ ## Quick start See the source of the enclosed index.html for details. All that is required is to include the plugin and then call growshrink on an element. The element must be nested inside a div with a specific height and width. The nested element will grow to the same size as the parent div. ## Options When calling growshrink on your divs, you have the following parameters and options. (defaults are shown) ###type: 'grow' options are 'grow' or 'shrink'. ###direction: 'bottomright' options are topleft, topright, bottomleft, bottomright This is the direction in which the animation is heading and it always begins from the opposite corner. So a 'grow' with direction set as 'topleft' will begin in the bottom right corner. Likewise, a 'shrink' with direction set to 'bottomright' will begin in the top left corner. ###growspeed: 1000 This is the speed of the animation in milliseconds. So 1000 is equal to one second. ## License and acknowledgements This plugin is released under an MIT style license. However, it does include HTML5 Boilerplate which has its own license. |
Files |
File | Role | Description | ||
---|---|---|---|---|
css (1 file) | ||||
lib (5 files) | ||||
index.html | Example | Sample index | ||
LICENSE.md | Data | License | ||
README.md | Doc. | Readme and instructions for use. |
Files | / | lib |
File | Role | Description |
---|---|---|
growshrink.js | Class | plugin file |
growshrink.min.js | Class | Minified plugin file |
jquery-1.8.2.min.js | Aux. | jQUery |
main.js | Example | Contains examples of use |
modernizr-2.6.2.min.js | Aux. | of HTML5 bolierplate) |
Version Control | Unique User Downloads | Download Rankings | |||||||||||||||
100% |
|
|
Applications that use this package |
If you know an application of this package, send a message to the author to add a link here.
Related pages |
Example Usage Live demo of the plugin in use. |