peterwilsoncc · December 12, 2011 04:22
diff --git a/index.html b/index.html
 <html>
 <head>
  <title>blah</title>
 </head>
 <body>

 <header> ... </header>
 <section>... </section>
 <footer> ... </footer>

 <div id="responsiveChecks"></div>

 </body>
 </html>
diff --git a/javascript.js b/javascript.js

 $(window).ready(function(){
 	$(window).trigger('resize');
 }).resize(function(){
 	checkSize();
 });


 function checkSize() {
 	var $check = $('#responsiveChecks'),
 		screenSize = $check.position().left * -1;
 	
 	if (screenSize == 960) {
 		//setup fancybox
 		$('a.lightbox').fancybox({});
 	}
 	else {
 		$('a.lightbox').unbind('click.fb');
 	}	
 }
diff --git a/style.css b/style.css
 /*

 allows size checking to be based on what the css reckons.
 
 */

 #responsiveChecks {
  position: absolute;
  width: 1px;
  height:1px;
  top:0;
  left: -320px;
 }


 @media all and (min-width:480px) {
  #responsiveChecks {
    left: -480px;
  }
 }


 @media all and (min-width:760px) {
  #responsiveChecks {
    left: -760px;
  }
 }

	$(window).ready(function(){
	$(window).trigger('resize');
	}).resize(function(){
	checkSize();
	});


	function checkSize() {
	var $check = $('#responsiveChecks'),
	screenSize = $check.position().left * -1;

	if (screenSize == 960) {
	//setup fancybox
	$('a.lightbox').fancybox({});
	}
	else {
	$('a.lightbox').unbind('click.fb');
	}
	}
	/*

	allows size checking to be based on what the css reckons.

	*/

	#responsiveChecks {
	position: absolute;
	width: 1px;
	height:1px;
	top:0;
	left: -320px;
	}


	@media all and (min-width:480px) {
	#responsiveChecks {
	left: -480px;
	}
	}


	@media all and (min-width:760px) {
	#responsiveChecks {
	left: -760px;
	}
	}