https://github.com/interactive-pioneers/iptools-jquery-expandable-box

jQuery plugin to cut and expand a box with content in various awesome ways.
https://github.com/interactive-pioneers/iptools-jquery-expandable-box

box expandable jquery

Last synced: 6 days ago
JSON representation

jQuery plugin to cut and expand a box with content in various awesome ways.

• Host: GitHub
• URL: https://github.com/interactive-pioneers/iptools-jquery-expandable-box
• Owner: interactive-pioneers
• License: gpl-3.0
• Created: 2015-07-01T11:59:13.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-05-09T13:17:38.000Z (over 7 years ago)
• Last Synced: 2024-11-11T18:45:48.900Z (about 2 months ago)
• Topics: box, expandable, jquery
• Language: JavaScript
• Homepage:
• Size: 85 KB
• Stars: 0
• Watchers: 15
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# iptools-jquery-expandable-box [![Build Status](http://img.shields.io/travis/interactive-pioneers/iptools-jquery-expandable-box.svg)](https://travis-ci.org/interactive-pioneers/iptools-jquery-expandable-box)

jQuery plugin to cut and expand a box with content in various awesome ways.

## Features

Cut and expand a box with content in various easy and awesome ways.

## Requirements

- jQuery 1.11.3 or greater

## Example

```html



  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!





  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!



  $(document).ready(function() {

    $('.box').iptExpandableBox({

      cutHeight: '100px',

      expandHeightTo: 'auto',

      expandWidthTo: '100%',

      expandEvent: 'mouseenter',

      expandEventTarget: null,

      shrinkEvent: 'mouseleave',

      shrinkEventTarget: null,

      animationDuration: 1000

    });

  });

```

## 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.

## Licence

Copyright © 2015-2017 Interactive Pioneers GmbH. Licenced under [GPL-3](LICENSE).