Skip to content

Instantly share code, notes, and snippets.

@jbennett

jbennett/SizeWatch.html

Created August 27, 2012 13:10
Show Gist options
  • Save jbennett/3488296 to your computer and use it in GitHub Desktop.
Save jbennett/3488296 to your computer and use it in GitHub Desktop.
Download ZIP
Watches for screen size to change and triggers named events are specified sizes
Raw
SizeWatch.html
<!DOCTYPE html>
<html>
<head>
<title>Size Watch</title>
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script src="file:///Users/jbennett/Desktop/SizeWatch.js"></script>
</head>
<body>
<p id="tablet"></p>
<p id="phone"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac viverra nisi. In rutrum tortor nec quam rutrum mattis in et dolor. Sed orci orci, dignissim a semper sed, tincidunt id risus. Aliquam imperdiet mollis scelerisque. Nullam lacinia rutrum nunc vel consectetur.</p>
<p>Ut laoreet velit non purus iaculis porttitor. Aenean id dapibus metus. Nulla auctor tellus a nibh rutrum vel pharetra quam dictum. Nam euismod iaculis nulla, non pellentesque massa commodo ut. Phasellus fermentum vulputate fringilla. In faucibus purus mi. Nulla nunc ligula, iaculis a fringilla ac, mattis quis enim. Suspendisse non tortor ac nunc feugiat viverra. Ut dignissim, elit a hendrerit venenatis, metus mauris tristique nisi, vehicula tincidunt metus velit ut elit.</p>
<p>Duis imperdiet laoreet massa et mattis. Praesent ac nibh nec sapien elementum aliquet id eget nibh.</p>
<script>
SizeWatch.watch(500, 900, 'tablet');
SizeWatch.watch(000, 499, 'phone');
window.addEvent('swEnterTablet', function() {
$('tablet').textContent = 'tablets rock';
});
window.addEvent('swLeaveTablet', function() {
$('tablet').textContent = '';
});
window.addEvent('swEnterPhone', function() {
$('phone').textContent = 'phones rock';
});
window.addEvent('swLeavePhone', function() {
$('phone').textContent = '';
});
$$('.menu').addEvent('click', function() {
$$('.nav-container').toggleClass('open');
})
</script>
</body>
</html>
Raw
SizeWatch.js
SizeWatch = new Class({});
SizeWatch.current_width = 0;
SizeWatch.watchList = [];
SizeWatch._boundWatcher = null;
SizeWatch.watch = function(min, max, name) {
SizeWatch.watchList.push({ min: min, max: max, name: name });
};
SizeWatch.start = function() {
SizeWatch.current_width = window.getSize().x;
if (!this._boundWatcher) {
this._boundWatcher = this._watch.bind(this);
window.addEvent('resize', this._boundWatcher);
}
};
SizeWatch.stop = function() {
window.removeEvent('resize', this._boundWatcher);
this._boundWatcher = null;
};
SizeWatch._watch = function() {
var new_width = window.getSize().x,
current = SizeWatch.current_width,
count = SizeWatch.watchList.length,
i = 0;
if (new_width == current) {
return;
}
for (; i < count; i++) {
watch = SizeWatch.watchList[i];
if (current <= watch.min && new_width >= watch.min) {
window.fireEvent('swEnter' + watch.name.capitalize());
} else if (current > watch.min && new_width < watch.min) {
window.fireEvent('swLeave' + watch.name.capitalize());
} else if (current < watch.max && new_width > watch.max) {
window.fireEvent('swLeave' + watch.name.capitalize());
} else if (current >= watch.max && new_width <= watch.max) {
window.fireEvent('swEnter' + watch.name.capitalize());
}
}
SizeWatch.current_width = new_width;
};
SizeWatch.start();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment