MooBreakpoints v0.22

A Mootools Plugin for responsive javascript

Media queries are great and can go a long way in shifting your design around depending on the width of the browser window(among other things), but if you back your design up with specific javascript, you will need something to to alert your script that your design is different.



Details

Author
Kyle
Current version
v0.22
GitHub
stockholmux/MooBreakpoints
Downloads
1052
Category
Utilities
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: core/1.2.5

How to use

//create an instance of the plugin
myBreakpoints = new MooBreakpoints(/*your options here*/);

//add events - a few breakpoints are baked in, you can set your own in the optiopns
window.addEvents({
                'onWidthEnter480':function() { stuff(); },
                'onWidthLeave480':function() { otherStuff(); }
});

Backstory

A few months ago benbrown created breakpoints for jQuery. I was working on a MooTools project and I needed the breakpoint functionality. So, I took Ben's concept and wrote a moo flavored plugin.


Example

See it in action, take a look at the demo.


What Kind Of Options Do I Have

Four basic options exist - you can see them in action in the example.

breakPoints

Default value - [320, 480, 768, 1024]

This is an array of screen widths that you want to respond to - the number represents the upper end of a range. So, this array:

[100,200,300]

would respond in three different widths - 0-100 (onWidthEnter100), 101-200 (onWidthEnter200), 201-300 (onWidthEnter300). If you want to fire an event when it is great than a certian width you can use a onWidthLeaveXXX function and test with width in the event.

delay

Default value - 250ms

The events are fired on a self-cancelling timeout so we don't get bogged down in handling every pixel change in width. You can supply any number you want, although I would avoid extremely low numbers.

delayedResizeEvent

Default value - false

Sometimes you just want to know the width of the window. Since this plugin is already measuring it on a self-cancelling timeout, if you set this to true, it will fire onDelayedResize anytime the width of the window changes, even if it isn't a breakpoint. Just a little bonus.

measureAtDomReady

default value - true

This will control if the width of your window is measured after the dom is ready. If it is set to true, your resize events will fire after you have initalized the plugin or when the dom is ready, whichever is last. This gets a little tricky - you will want to setup your onWidthEnterXXX/onWidthLeaveXXX events before you create the instance of the plugin if you want them to immediately fire.


This Is Awesome Where Can I Find More Awesome Stuff

You can go to my website (http://stockholmux.com/)


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus