Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

FREE 12 month online training for ASP.NET & MS Expression Studio and a Free copy of MS Expression Web with Windows Server Purchase
How to display a dynamically resizable Pop Up Window

Author: DevASP
Download Source Code : 444_AutoResize.zip

This article is about how you can display a pop up window that will resize automatically according to the size of the size of image.

  • Steps you will do. 
  • Start visual studio and create a new web application. 
  • Place a label control on the form and set its following properties.
Text = “How to display automatically resizable pop up window”

 

Open the HTML design of your web page and add the following java script tag and function before closing the head tag.

 

<script>

 

 PositionX = 100;

 PositionY = 100;

 

 defaultWidth  = 500;

 defaultHeight = 500;

 

var AutoClose = true;

 

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>Loading...</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(100,100);');

 

     writeln('width=100-(document.body.clientWidth-document.images[0].width);');

 

     writeln('height=100-(document.body.clientHeight-document.images[0].height);');

 

     writeln('window.resizeTo(width,height);}');writeln('if (isNN){');      

 

     writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');

 

     writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');

  if (!AutoClose) 

     

     writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')

 

  else

   

    writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');

 

    writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');

close();         

 

 }

}

 

</script>

 

 

Before closing the form tag add following tag which will create two buttons and display two images of different size in a pop up window.

 

<input type="button" value="Large Image In Popup" onClick="popImage('http://localhost/AutoResize/1.jpg','Large Image')" />

 

<input type="button" value="Small Image In Popup" onClick="popImage('http://localhost/AutoResize/2.jpg','Small Image')" />                

 

Article Comments
Hello, this script is great, the only problem is, when you use images with spaces : LOGO DANNY.jpg then it will not show. On my website people upload picture with spaces. I there a way with this script to solve this?

Thanks

Danny

Posted on 1/30/2007 11:52:11 PM by Danny

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Page Events in ASP.Net 2.0

Disclaimer - Privacy
© 2002-2014 DevASP.net