https://github.com/simonsmith/mootools-mqshowhide
Simple class to aid in toggling of content based on a Media Query
https://github.com/simonsmith/mootools-mqshowhide
Last synced: 7 months ago
JSON representation
Simple class to aid in toggling of content based on a Media Query
- Host: GitHub
- URL: https://github.com/simonsmith/mootools-mqshowhide
- Owner: simonsmith
- Created: 2012-03-29T15:45:07.000Z (about 14 years ago)
- Default Branch: master
- Last Pushed: 2012-10-07T09:39:30.000Z (over 13 years ago)
- Last Synced: 2024-10-18T08:37:31.162Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 117 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MooTools MqShowHide
This simple class for [MooTools](http://mootools.net) allows a block of content to be hidden based on a [media query](http://webdesignerwall.com/tutorials/css3-media-queries) and then provide a button to show/hide the content. Useful on smaller devices when vertical space is a premium.
jsfiddle demo: http://jsfiddle.net/Blink/m7dXH/
**HTML:**
```html
Some content
More content
```
**JS:**
```js
new MqShowHide('.container', 'p').mq('(max-width: 480px)');
```
**Result:**
```html
Show
```
## Usage
### Arguments
- - -
```js
new MqShowHide(container, targetElems, options);
```
1. **container** - _(mixed)_ String selector or an Element referencing the container
2. **targetElems** - _(mixed)_ String selector or Element referencing the elements to be hidden
3. **options** - _(object, optional)_ A key/value object for options
### Options
- - -
* **trigger** - _(object)_ Options for the element that will toggle the state of the content
* **type** - _(string)_ Element type _default_ `button`
* **text** - _(string)_ Initial button text _default_ `Show`
* **altText** - _(string)_ Text used when state of content changes _default_ `Hide`
* **injectPos** - _(string)_ Where the button is injected in relation to the `container` _default_ 'bottom'
* **attr** - _(object)_ Attributes applied to the trigger element
* **wrapper** - _(object)_ Options for the element wraps the content
* **type** - _(string)_ Element type _default_ `div`
* **attr** - _(object)_ Attributes applied to the wrapper element
### Events
- - -
* **matched** - _(function)_ Media query passed to the `mq()` method has matched
* **notMatched** - _(function)_ Media query passed to the `mq()` method has not matched
* **reset** - _(function)_ Elements returned to their initial state
* **hide** - _(function)_ Elements hidden
* **show** - _(function)_ Elements visible
* **trigger** - _(function)_ Trigger element clicked
### Methods
- - -
#### mq
Runs a media query using `matchMedia` and if true, hides the content and shows the trigger element
```js
MqShowHide.mq(mediaQuery);
```
* **mediaQuery** - _(string)_ e.g. `'(max-width: 480px)'`
#### show
Shows the elements
```js
MqShowHide.show();
```
#### hide
Hides the elements
```js
MqShowHide.hide();
```
#### reset
Resets elements to initial state
```js
MqShowHide.reset();
```