Home/ Questions/Q 1092069
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T23:37:39+00:00

I am facing problem while resizing an image in the Popup brwoser window. Image

  • 0

I am facing problem while resizing an image in the Popup brwoser window.

Image present in popup gets resized when the user resizes the browser window for the first time only, afterwards when the window resizes (dblclicking the titlebar, or using the resize handles) the image dimension remains equal to the last resized dimension.

My code is shown below:

<html>
<head>
    <title>Enlarged Image</title>
    <script language="javascript" type="text/javascript">
       var arrTemp=self.location.href.split("?");
       var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
       var NS = (navigator.appName == "Netscape") ? true : false;

       function GetWidth() {
           var x = 0;
           if (self.innerHeight) {
               x = self.innerWidth;
           }
           else if (document.documentElement && document.documentElement.clientHeight) {
               x = document.documentElement.clientWidth;
           }
           else if (document.body) {
               x = document.body.clientWidth;
           }
           return x;
       }

       function GetHeight() {
           var y = 0;
           if (self.innerHeight) {
               y = self.innerHeight;
           }
           else if (document.documentElement && document.documentElement.clientHeight) {
               y = document.documentElement.clientHeight;
           }
           else if (document.body) {
               y = document.body.clientHeight;
           }
           return y;
       }

       window.onresize = function() { document.write("<img src='" + picUrl + "' border=0 Name=image Width=" + GetWidth() + " Height=" + (GetWidth() * 3) / 4 + "/>") }           

    </script>
</head>
<body style='margin: 0px; text-align:center;'>
    <script language="javascript" type="text/javascript">
        document.write("<img src='" + picUrl + "' border=0 Name=image Width=800 Height=600 />");            
    </script>
</body>

I am passing imgpath to this html file from my aspx file as shjown below:

this.aspHyperlink.NavigateUrl = "javascript:PopupPic('." + this.aspImgCtrl.ImageUrl.Replace('~', '.') + "')";

The javascript PopupPic function is shown below:

function PopupPic(sPicURL) {
    window.open("PopupEventImage.htm?" + sPicURL, "", "resizable=1,HEIGHT=600,WIDTH=800");
}

Any ideas for resizing the image every time the user resizes the popup window?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    From what I can see, every time you resize the window, you are rewriting the img tag. What you should be doing is changing the width and height attributes of the tag.

    Also, it looks like your code is ripe for cross-site scripting attacks.

    An example of code that would work but keep the cross-site scripting problem:

    <html>
<head>
    <title>Enlarged Image</title>
    <script language="javascript" type="text/javascript">
       var picUrl = "http://www.google.com/images/logos/ps_logo2.png&quot;;
       function GetWidth() {
           var x = 0;
           if (self.innerHeight) {
               x = self.innerWidth;
           }
           else if (document.documentElement && document.documentElement.clientHeight) {
               x = document.documentElement.clientWidth;
           }
           else if (document.body) {
               x = document.body.clientWidth;
           }
           return x;
       }
       function GetHeight() {
           var y = 0;
           if (self.innerHeight) {
               y = self.innerHeight;
           }
           else if (document.documentElement && document.documentElement.clientHeight) {
               y = document.documentElement.clientHeight;
           }
           else if (document.body) {
               y = document.body.clientHeight;
           }
           return y;
       }
       function Resize() {
           var img = document.getElementById("mainImage"); 
           img.src = picUrl; 
           img.width = GetWidth();
           img.height = (GetWidth() * 3) / 4;
       }
       window.onresize = Resize;
       // Call Resize onload to get the initial sizing correct
       window.onload = Resize;
       </script>
</head>
<body style='margin: 0px; text-align:center;'>
    <img border=0 id=mainImage Width=800 Height=600 />
</body>

    I would suggest an alternate approach in general. Don’t have a PopupEventImage.htm file. Instead, make that an ASP.NET file that takes a value from something the user cannot edit. Session state for example. That way, malicious users cannot inject scripting attacks into your page. I can provide an example of this if you’d like.

    • 0