jueves, 13 de diciembre de 2012

My Two parts screen (with javascript)


Previously, I posted some code for a simple CSS three parts screen template using DIVs.

Now I'd like to save here this code that also works in Chrome, Firefox and iPod Touch/iPhone (thanks to Javascript, it also has a different behavior)


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>My Two parts screen</title>
<style>
body {
font-family:Arial;
font-size:16px;
background:#ddd;
}
#wrapper {
width:auto;
margin:0px;
padding:0px;
border: 1px solid #ccc;
margin-right:5%;
margin-left:5%;
}
#center {
float:left;
width:80%;
background:#444;
}
#right {
float:right;
width:20%;
background:#777;
}
#inner {
padding:10px;
overflow:hidden;
}
</style>

<script>

/* Do after body is fully loaded */
function onBodyComplete()
{
if ( getWidth() <= 320 ) {
var newWidth = ( getWidth() - 48 );
document.getElementById('center').style.width = newWidth + 'px';
document.getElementById('right').style.width = newWidth + 'px';
document.getElementById('mobile-advice').innerHTML = '';
}
}

/* Get current window's width */
function getWidth()
{
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return myWidth;
}

/* Window resizes */
window.onresize = function() {
onBodyComplete();
};

</script>
</head>
<body onLoad="onBodyComplete()">
<div id="wrapper">

<div id="center">
<div id="inner">This is center</div>
</div>

<div id="right">
<div id="inner">This is right</div>
</div>

</div>

<div id="mobile-advice" style="padding-top:10px;">
<center><small>Check this on your mobile and see how it changes!</small></center>
</div>

</body>
</html>