Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Javascript with detect
// Manages changes in responsive layout
var layout = (function() {
var callbacks = [];
// Container for checking changes in layout width
var $container = $('#header .container');
// Container width: screen width
var steps = {
960: 960,
714: 768,
451: 480,
294: 320
};
var width = $container.width();
// On each step call all callbacks
$(window)
.on('resize', function() {
var current = $container.width();
if (current != width) {
width = current;
$.each(callbacks, function(id, callback) {
callback(steps[width]);
});
}
})
.trigger('resize');
// Interface
return {
// Returns current step
width: function() {
return steps[width];
},
// Register callback
change: function(callback) {
callback(steps[width]);
callbacks.push(callback);
}
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment