Thursday, January 22, 2009

JavaScript : Resizeable Popup Window.

this Html code can be used to show popup window. It resize atomatically with the given data.
But it is browser dependent, works well with mozilla, IE 6,7.




<HTML>
<HEAD>
<TITLE>Resizeable Popup Window</TITLE>
<script type="text/javascript">

PositionX = 200;
PositionY = 100;

defaultWidth = 500;
defaultHeight = 400;

// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows

var AutoClose = false;


if (parseInt(navigator.appVersion.charAt(0))>=4)
{
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle)
{
if (isNN)
{
imgWin=window.open('about:blank','',optNN);
}
if (isIE)
{
imgWin=window.open('about:blank','',optIE);
}
with (imgWin.document)
{
writeln('<html><head><title>'+imageTitle+'</title><style>body{margin:0px;}</style>');
writeln('<sc'+'ript>');
writeln('var isNN,isIE;');
writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');
writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');
writeln('if (isIE){');
writeln('window.resizeTo(300,300);');
writeln('width=300-(document.body.clientWidth-document.images[0].width);');
writeln('height=300-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');
writeln('if (isNN){');
writeln('window.innerWidth=document.images["Madan"].width;');
writeln('window.innerHeight=document.images["Madan"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');
writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor="#FFFFFF" scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor="#FFFFFF" scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="Madan" src='+imageURL+' style="display:block"></body></html>');
close();
}
}
</script>
</HEAD>

<BODY>
<CENTER>
<h3>Simple Resizeable Popup Window Example</h3>
</br></br>
<a href="javascript:popImage('image1.gif','image1')">image1</a>
</br></br>
<a href="javascript:popImage('image2.gif','image2')">image2</a>
</CENTER>
</BODY>
</HTML>