AngularJS Breakpoint
AngularJS directive that set breakpoints for responsive design websites.
- Add the
breakpointdirective to the body tag - Define as many breakpoints as you want in an object
- Current breakpoint class and window width available in scope
- Event broadcast when breakpoint changes
Demo
Resize the window to see the new breakpoints
- Current Class:
- {{breakpoint.class}}
- Current Window Width:
- {{breakpoint.windowSize}} (px)
Setup
Add the breakpoint attribute to the body tag and give it a value off an object defined as follows:
Set the key as the smallest value you want the breakpoint to start at and the value as the name of the class you want added to the body tag.
The values do not need to be in numerical order.
I recommend that the lowest value is 0
<body breakpoint="{0:'smallscreen', 750:'break750', 500:'break500', 1000:'break1000', 1500:'break1500'}">
...
</body>
The 'current class' and 'current window width' are available on the scope as {{breakpoint.class}} and {{breakpoint.windowSize}}
Events
You can set a listener on any scope within your app, by using the scope method $on.
The triggered event is called right after the class of the element has been changed.
$scope.$on('breakpointChange', function(event, breakpoint, oldClass) {
console.log('Entering:' + breakpoint.class);
console.log('Leaving:' + oldClass);
console.log('windowSize' + breakpoint.windowSize);
});
- Entering:
- {{eventsEnter}}
- Leaving:
- {{eventsLeave}}
Download on Github
Version 0.1Licence
This work is licensed under a Creative Commons Attribution 3.0 Unported License.
If you find this useful, please let me know @snapjay; Don't worry, I won't ask for anything!
Credit
Dan Shreim@snapjay
snapjay.com