amitabhaghosh197
1/28/2015 - 10:15 AM
window resize latest
window resize latest
<script>
function resize_viewport(){
function viewport()
//Code taken from : http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
{
var e = window
, a = 'inner';
if ( !( 'innerWidth' in window ) )
{
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}//viewport()
$(window).resize( function(){
if( viewport().width < 767 ){
$('body').addClass('new-body');
alert("Hi your window resolution is : " + window.innerWidth);
}
});//window.resize
}//resize_viewport()
$(document).ready(function(){
resize_viewport();
});//doc.ready
</script><!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">@-ms-viewport{width:device-width}</style>
<title>Untitled Document</title>
<style>
.new-body{
background:#0C9;
}
.lg-body{ background:#9F0;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="viewportSize.js"></script>
<script>
function resize_viewport(){
var width = viewportSize.getWidth();
var height = viewportSize.getHeight();
if( width < 767 ){
$('body').addClass('new-body');
alert("Hi your window resolution is : " + window.innerWidth + " , height :" + window.innerHeight);
}
if( width > 767 ){
$('body').addClass('lg-body');
alert("Hi your window resolution is : " + window.innerWidth + " , height :" + window.innerHeight);
}
}//resize_viewport()
$(document).ready(function(){
resize_viewport();
});//doc.ready
</script>
</head>
<body>
</body>
</html>