iptools-jquery-expandable-box 
jQuery expandable box plugin
Features
Cut and expand a box with content in various easy and awesome ways.
Requirements
- jQuery 1.11.3 or greater
Example
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio vel placeat explicabo in porro. Amet laborum nam, eius ut. Odio veritatis nostrum totam molestiae itaque vel similique, perferendis a consequatur!
</div>
<div class="othercontent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio vel placeat explicabo in porro. Amet laborum nam, eius ut. Odio veritatis nostrum totam molestiae itaque vel similique, perferendis a consequatur!
</div>
<script src="src/iptools-jquery-expandable-box.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.box').iptExpandableBox({
cutHeight: '100px',
expandHeightTo: 'auto',
expandWidthTo: '100%',
expandEvent: 'mouseenter',
expandEventTarget: null,
shrinkEvent: 'mouseleave',
shrinkEventTarget: null,
animationDuration: 1000
});
});
</script>Options
| Name | Default | Type | Description |
|---|---|---|---|
| cutHeight | 100px |
string | Height at which the container should be cut initially, in px or % (relative to parent) |
| expandHeightTo | auto |
string | Height the countainer should be expanded to, in px, % (relative to cutHeight) or 'auto' |
| expandWidthTo | 100% |
string | Width the countainer should be expanded to, in px, % (relative to parent) |
| expandEvent | mouseenter |
string | Event that triggers expansion. |
| expandEventTrigger | null |
string | Event target, null = this |
| shrinkEvent | mouseleave |
string | Event that triggers collapsing to initial size. |
| shrinkEventTrigger | null |
string | Event target, null = this |
| expandedClass | expanded |
string | Class added to expanded element |
| initializedClass | initialized |
string | Class added to element after plugin initialization |
| animationDuration | 1000 |
int | Animation duration in miliseconds. |
Contributions
Bug reports, suggestions
- File all your issues, feature requests here
- If filing a bug report, follow the convention of Steps to reproduce / What happens? / What should happen?
- If you're a developer, write a failing test instead of a bug report and send a Pull Request
Code
- Fork it ( https://github.com/[my-github-username]/iptools-jquery-expandable-box/fork )
- Create your feature branch (
git checkout -b my-new-feature) - Develop your feature by concepts of TDD, see Tips
- Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create a new Pull Request
Tips
Following tasks are there to help with development:
-
grunt watch:bddlistens to tests and source, reruns tests -
grunt qarun QA task that includes tests and JSHint -
grunt buildminify source to dist/
Licence
Copyright © 2015 Interactive Pioneers GmbH. Licenced under GPLv3.
