Skip to content
Responsive viewport management tool
JavaScript HTML
Failed to load latest commit information.
src Improve orientation change detection for Android/iOS Apr 13, 2016
tests Add manual triggering Jan 21, 2016
.gitignore
.npmignore switched ignore lines to reference gulpfile.js instead of Gruntfile.js Oct 5, 2015
LICENSE.txt
README.md Improve orientation change detection for Android/iOS Apr 13, 2016
W.js
W.min.js
bower.json
gulpfile.js Add manual triggering Jan 21, 2016
package.json

README.md

W 1.6.2

In responsive development with javascript, we often need to know the correct viewport size, without caring of the environment or the media orientation. Desktop browsers return correct values but mobiles are a big mess.

Moreover, we need to know when the text has been resized or the media orientation has changed, so we can adapt our layout accordingly.

W aims to solve this for you.

Install

You can pick the minified library or install it with :

npm install pyrsmk-w
bower install pyrsmk-w
jam install pyrsmk-w

Syntax

// Get the orientation of the device (return 'portrait' or 'landscape')
W.getOrientation();
// Get the current viewport width
W.getViewportWidth();
// Get the current viewport height
W.getViewportHeight();
// Get viewport dimensions; returns {width: integer, height: integer}
W.getViewportDimensions();
// Add a listener to catch responsive events (key is optional) (you can register several listeners with the same keyword)
W.addListener(function(){}, 'key');
// Remove a listener
W.removeListener('key');
// Clear all listeners
W.clearListeners();

For ease of use, when you register a listener W returns it, so you can reuse that very same callback :

$(window).listen('scroll', W.addListener(function() {
    console.log("Hi! I'm the one who detects scroll and responsive events!");
}));

You can retrieve viewport's width/height in absolute mode (eg. screen resolution) to unify JS and CSS behaviors :

W.getViewportWidth(true);
W.getViewportHeight(true);

If needed, you can trigger your listeners on demand :

// Trigger all listeners
W.trigger();
// Trigger all listeners registered with the 'key' keyword
W.trigger('key');

You can also manually trigger a listener directly by calling it, since the callback is returned by W :

W.addListener(function(){
    // Blah blah
})();

License

W is licensed under the MIT license.

Something went wrong with that request. Please try again.