example.html

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script  type="text/javascript" src="http://xoxco.com/projects/code/breakpoints/breakpoints.js"></script>
	<script>
	
		$(function() { 
		

			$(window).bind('exitBreakpoint320',function() {
				$('#log').append('<p>Exiting 320 breakpoint</p>');
			});
			$(window).bind('enterBreakpoint320',function() {
				$('#log').append('<p>Entering 320 breakpoint</p>');
			});

			$(window).bind('exitBreakpoint480',function() {
				$('#log').append('<p>Exiting 480 breakpoint</p>');
			});
			$(window).bind('enterBreakpoint480',function() {
				$('#log').append('<p>Entering 480 breakpoint</p>');
			});
			$(window).bind('exitBreakpoint768',function() {
				$('#log').append('<p>Exiting 768 breakpoint</p>');
			});
			$(window).bind('enterBreakpoint768',function() {
				$('#log').append('<p>Entering 768 breakpoint</p>');
			});

			$(window).bind('exitBreakpoint1024',function() {
				$('#log').append('<p>Exiting 1024 breakpoint</p>');
			});
			$(window).bind('enterBreakpoint1024',function() {
				$('#log').append('<p>Entering 1024 breakpoint</p>');
			});

			$(window).setBreakpoints();

			$('#distinct').bind('click',function() {
				$(window).resetBreakpoints();
				$(window).setBreakpoints({distinct: $('#distinct').is(":checked")});
				$(window).resize();
			});

		});
		
		
	</script>
	<style>


		#log p {
			font-size: 12px;
			padding: 5px 10px;
		}

		#status {
			border:1px solid #000;
			margin-bottom:20px;
		}
		#status p { color: #CCC;  margin:0px; padding:10px;}

		.breakpoint-1024 #status p.breakpoint1024 { color: #000; font-weight:bold; background: #F0F0F0; }
		.breakpoint-768 #status p.breakpoint768 { color: #000; font-weight:bold; background: #F0F0F0;}
		.breakpoint-480 #status p.breakpoint480 { color: #000; font-weight:bold; background: #F0F0F0; }

		.breakpoint-320 #status p.breakpoint320 { color: #000; font-weight:bold; background: #F0F0F0; }


	</style>
</head>
<body>
	<div id="instructions">

		<h3>Demo</h3>

		<p>
			<strong>Resize your browser window now and watch events in the box below.</strong>
		</p>
		
		<p>
			<input name="distinct" type="checkbox" id="distinct" checked /> <label for="distinct">Use only largest available breakpoint</label>
		</p>
	</div>
	<div id="log">
	
			
		<h3>Active Breakpoints</h3>
		<div id="status">
		<p class="breakpoint1024">1024</p>
		<p class="breakpoint768">768</p>
		<p class="breakpoint480">480</p>
		<p class="breakpoint320">320</p>
		</div>
		
		<h3>Event Log:</h3>
		
	</div>


	<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
	</script>
	<script type="text/javascript">
	try {
	var pageTracker = _gat._getTracker("UA-84020-8");
	pageTracker._trackPageview();
	} catch(err) {}</script>
</body>