Monday, June 1, 2009

Resizing the picture according to browser size using javascript

You can include this code on the head section of your html code and the window will automatically trigger the window resize event.

window.onresize=function(event)
{
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;
}
//window.alert( 'Width = ' + myWidth );
// window.alert( 'Height = ' + myHeight );

img= document.getElementById('myimage');
img.width= myWidth;
img.height=myHeight;

}
also include the below code on your body section.
img id="myimage" src="pr_shopping_bag.jpg" width="500" height="555"

Please make sure that u will use the same id on the image tag and the head section "document.getElementById('myimage')".


best wishes,
Praveen
www.linesandgraphs.com

No comments:

Post a Comment