jbennett/SizeWatch.html

## 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>

## 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();
	<!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>
	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();