IE 8 Responsive

by nijinvinodan

HTML

<div class="outerFrame">
    <div class="rightLayout layout">
	    <!-- Right Layout -->
    </div>
	<div class="leftLayout layout">
	    <!-- Left layout -->
    </div>
</div>

CSS

.outerFrame{
	width:960px;
	margin:0px auto;
	overflow:hidden;
}
.layout{
	height:300px;
	margin-bottom:10px;
}
.leftLayout{
	width:630px;
	background: #CCFF99;
	float:left;
}
.rightLayout{
	width:320px;
	background: #99CCFF;
	float:right;
}

JavaScript

$(document).ready(function(){
	var dev_width = $(window).width();				       
	makeResponsive(dev_width);

	$(window).resize(function(){                            
		var dev_width = $(window).width();
		makeResponsive(dev_width);
	});

	/* Responsive Layout */
	function makeResponsive(dev_width){
		if(dev_width < 767){								
			applyMediaQuery('100%','100%','100%');
		}
		else if(dev_width > 767 && dev_width < 979){		
			applyMediaQuery('90%','100%','100%');
		}
		else if(dev_width >= 979 && dev_width < 1300){		
			applyMediaQuery('960px','630px','320px');
		}
		else if(dev_width >= 1300){							
			applyMediaQuery('1280px','950px','320px');
		}
	}

	/* Dynamically applying css */
	function applyMediaQuery(outerFrame, leftLayout, rightLayout){
		$(".outerFrame").css("width",outerFrame);
		$(".leftLayout").css("width",leftLayout);
		$(".rightLayout").css("width",rightLayout);
	}
});