SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast CyberNet99's Avatar
    Join Date
    Oct 2003
    Location
    Ottawa, Canada
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help with resizing a popup window in firefox

    I need help with resizing a popup window in firefox.

    Currently, I use a JS script to open a popup window, and then resize the window to the size of the image. It works perfectly in IE, but not as well in Firefox.

    Funny thing is it does work as expected with some images. The code is identical for every image I use this for, so I cannot figure out why it is not resizing correctly.

    Here is a link to a site where I am using it and have run into this problem.
    http://www.burtonmoldings.com/casings-mdf-molding.aspx

    and yet on this page it works fine.
    http://www.burtonmoldings.com/photo-gallery.aspx

    Any ideas?

    TIA

    Tim

    Here is a copy of the code in use in the pages.
    Code on Page that works
    ===============
    <script language="Javascript" type="text/javascript">
    function PopupPic(sPicURL) {
    windowName = window.open("popup.asp?"+sPicURL, "popup",
    "resizable=1,HEIGHT=200,WIDTH=200");
    windowName.focus();
    }
    </script>

    <a href="javascript:PopupPic('images/RoomScenesFull/RoomScene1.jpg')">


    Code on Page that doesn't work
    ======================
    <script language="Javascript" type="text/javascript">
    function PopupPic(sPicURL) {
    windowName = window.open("popup.asp?"+sPicURL, "popup",
    "resizable=1,HEIGHT=200,WIDTH=200");
    windowName.focus();
    }
    </script>

    <a href="javascript:PopupPic('images/FullSizeProfilesText/003.jpg')">
    Last edited by CyberNet99; Aug 12, 2004 at 12:04. Reason: Missing Code
    Cheers, Tim

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems ok here. What exactly is happening?

    Here's an alternative to 'open-and-squash-em' scripts:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <base href="http://www.burtonmoldings.com/" />
    <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen">
    <link rel="stylesheet" href="print.css" type="text/css" media="print">
    <script type="text/javascript">
    
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    
    var PXpix =			/* [image url + '@' + image title] */
    [
    
    	"http&#58;//www.burtonmoldings.com/images/FullSizeProfilesText/1208.jpg@MDF Casing #1208"					,
    	"http&#58;//www.burtonmoldings.com/images/FullSizeProfilesText/356.jpg@MDF Casing #356" 				,
    	"http&#58;//www.burtonmoldings.com/images/FullSizeProfilesText/Case213.jpg@MDF Casing #213"	,
    	"http&#58;//www.burtonmoldings.com/images/FullSizeProfilesText/Case243.jpg@MDF Casing #243"
    ];
    
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    
    function PXWin(oPXW_array, sPXW_background, bPXW_sticky, bPXW_clickclose)
    {
    	this.picarray = oPXW_array;
    	this.picobjs = new Object;
    	var sPicurl, sPictitle, iArraylength = oPXW_array.length, iLoop = 0;
    	for (; iLoop < iArraylength; ++iLoop)
    	{
    		oData = this.picarray[iLoop].split('@');
    		sPicurl = oData[0];
    		sPictitle = oData[1];
    		this.picobjs[sPicurl] = new Image();
    		this.picobjs[sPicurl].onload = function() {this.loaded = true};
    		this.picobjs[sPicurl].title = sPictitle;
    		this.picobjs[sPicurl].src = sPicurl;
    	}
    
    	this.background = sPXW_background;
    	this.sticky = bPXW_sticky;
    	this.clickclose = bPXW_clickclose;
    	this.PXWin = null;
    
    	this.open = function(urlkey)
    	{
    		var picobj = this.picobjs[urlkey];
    		if (!picobj.loaded)
    			return false;
    		if (this.PXWin && !this.PXWin.closed)
    		{
    			if (this.PXWin.document.images[0].src == picobj.src)
    			{
    				this.PXWin.focus();
    				return false;
    			}
    			else this.PXWin.close();
    		}
    		var w = picobj.width;
    		var h = picobj.height;
    		var title = picobj.title;
    		var src = picobj.src;
    		var l = (screen.availWidth - w) / 2;
    		var t = (screen.availHeight - h) / 2;
    
    		PXWin.sHTML = '';
    		PXWin.sHTML += '<html><head><title>' + title + '</title></head>';
    		PXWin.sHTML += '<body style="margin:0;background:#000;overflow:hidden;"';
    		PXWin.sHTML += (this.sticky) ? ' onblur="setTimeout(function(){self.focus()},200)"' : '';
    		PXWin.sHTML += (this.clickclose) ? ' onclick="self.close()"' : '';
    		PXWin.sHTML += '><img width="' + w + '" height="' + h + '" ';
    		PXWin.sHTML += 'style="border-width:0;cursor:pointer;"';
    		PXWin.sHTML += (this.clickclose) ? ' title="click to close"' : '';
    		PXWin.sHTML += ' src="' + src + '"></a></body></html>';
    
    		this.PXWin = open('javascript&#58;opener.PXWin.sHTML', 'PXWin', 'width='+w+',height='+h+',left='+l+',top='+t+',status=0');
    		if (this.PXWin && !this.PXWin.closed)
    			this.PXWin.focus();
    		return false;
    	}
    }
    
    var PXW = { open: function() {return false;} } //dummy
    onload = function()
    {
    	PXW = new PXWin(PXpix, '#000', true, true);
    }
    
    </script>
    </head>
    <body>
    <table width="760" border="0" cellspacing="0" cellpadding="0" align="left">
      <tr>
        
    	<td align="left" valign="top">
    	<div id="topheader"><img src="http://www.burtonmoldings.com/images/logo.jpg" id="logo" alt="Burton Moldings"/> 
    <h1 id="marketingline">Crown Molding, Casing, etc ... many more styles to
      choose from for your home decor</h1>
    <h1 id="tollfree">Call Toll Free: 1-888-323-8926</h1>
    </div>
      <br>
      <br>
    	<div class="content">
    	  <h1 class="contentTitle">MDF Case Molding</h1>
            <p>MDF (Medium Density Fibreboard) is a type of hardboard, which is made
            from wood fibers glued under heat and pressure. </p>
            <p>There are a number of reasons why MDF is used for molding. It is dense,
              flat, stiff, has no knots and is easily machined. Because it is made
              up of fine particles it does not have an easily recognizable surface
              grain. </p>
            <p>MDF can be painted to produce a smooth quality surface. Because MDF
              has no grain it can be cut, drilled, machined and filed without damaging
              the surface. MDF may be glued together with PVA wood glue. Oil, water-based
              paints and varnishes may be used on MDF. Veneers and laminates may
              also be used to finish MDF. </p>
            <p>MDF is available in 16ft lengths.</p>
            <p>
                <table width="100%"  border="0" cellspacing="0" cellpadding="3" class="ProfileItem">
                  <tr>
                    <td colspan="3" valign="top"><strong><span class="ProfileTitle">MDF Casing - #1208</span><br>
                      Price $0.67 </strong><span class="small">(USD Per LFT.)</span><br>
                      <strong>Dimensions:</strong> 16mm x 2-1/2" - 14'<br>
                    </td>
                    <td width="10%" align="right" valign="middle">
    
    <a href="images/FullSizeProfilesText/1208.jpg" target="PXWin" onclick="return PXW.open(this.href)">
    <img src="images/Profiles/1208.jpg" alt="MDF Casing - #1208" border="1" align="absmiddle">
    </a>
    
    <br><span class="small">Click to enlarge</span></td>
                  </tr>
                </table>
              <div align="right" class="small"><a href="#Top">&laquo;&laquo; Back to TOP &raquo;&raquo;</a></div>
                 <table width="100%"  border="0" cellspacing="0" cellpadding="3" class="ProfileAltItem">
                  <tr>
                    <td colspan="3" valign="top"><strong><span class="ProfileAltTitle">MDF Casing Molding - #356</span><br>
                      Price $0.24 </strong><span class="small">(USD Per LFT.)</span><br>
                      <strong>Dimensions:</strong> 9mm x 2-1/4" - 14'<br></td>
                    <td width="10%" align="right" valign="middle">
    
    <a href="images/FullSizeProfilesText/356.jpg" target="PXWin" onclick="return PXW.open(this.href)">
    <img src="images/Profiles/356.jpg" alt="MDF Casing Molding - #356" border="1" align="absmiddle">
    </a>
    
    <br><span class="small">Click to enlarge</span></td>
                  </tr>
                </table>
              <div align="right" class="small"><a href="#Top">&laquo;&laquo; Back to TOP &raquo;&raquo;</a></div>
      <div align="right" class="small"><a href="#Top">&laquo;&laquo; Back to TOP &raquo;&raquo;</a></div>
                 <table width="100%"  border="0" cellspacing="0" cellpadding="3" class="ProfileAltItem">
                  <tr>
                    <td colspan="3" valign="top"><strong><span class="ProfileAltTitle">MDF Door and Window Casing Molding - #Case213</span><br>
                      Price $0.60 </strong><span class="small">(USD Per LFT.)</span><br>
                      <strong>Dimensions:</strong> 3-1/4"<br></td>
                    <td width="10%" align="right" valign="middle">
    
    <a href="images/FullSizeProfilesText/Case213.jpg" target="PXWin" onclick="return PXW.open(this.href)">
    <img src="images/Profiles/Case213.jpg" alt="MDF Door and Window Casing Molding - #Case213" border="1" align="absmiddle">
    </a>
    
    <br><span class="small">Click to enlarge</span></td>
                  </tr>
                </table>
              <div align="right" class="small"><a href="#Top">&laquo;&laquo; Back to TOP &raquo;&raquo;</a></div>
                <table width="100%"  border="0" cellspacing="0" cellpadding="3" class="ProfileItem">
                  <tr>
                    <td colspan="3" valign="top"><strong><span class="ProfileTitle">MDF Door and Window Casing Molding - #Case243</span><br>
                      Price $0.68 </strong><span class="small">(USD Per LFT.)</span><br>
                      <strong>Dimensions:</strong> 3-1/4"<br>
                    </td>
                    <td width="10%" align="right" valign="middle">
    
    <a href="images/FullSizeProfilesText/Case243.jpg" target="PXWin" onclick="return PXW.open(this.href)">
    <img src="images/Profiles/Case243.jpg" alt="MDF Door and Window Casing Molding - #Case243" border="1" align="absmiddle">
    </a>
    
    <br><span class="small">Click to enlarge</span></td>
    </tr>
    </table>
    </body>
    </html>
    ::: certified wild guess :::

  3. #3
    SitePoint Enthusiast CyberNet99's Avatar
    Join Date
    Oct 2003
    Location
    Ottawa, Canada
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holy Cr*p. Sure looks like an impressive piece of code. I would prefer to keep it really simple though, to keep the pages small and simple. Every little bit helps right?

    The problem I am experiencing is that in Firefox, the "resizing" that should happen once the window opens only works a little bit. For me, if I click repeatedly on the "product" images to open the popup it keeps resizing, but never to the correct size which should be the same size as the image.

    Funny thing is though, it does resize correctly on the photo gallery page....? So, I have double and triple checked the code to see if I have something slightly different on that page, that is missing from all of the other pages.

    The only thing that is different for the product pages, is that the image path uses a variable that is filled from the dataset, namely the image name.

    But, when I look at the source code rendered to the browser, the image path looks fine, so it's not like I have added a space or something by accident.

    Tim

    Quote Originally Posted by adios
    Seems ok here. What exactly is happening?

    Here's an alternative to 'open-and-squash-em' scripts:
    Code:
     
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     <html>
     <base href="http://www.burtonmoldings.com/" />
     <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen">
     <link rel="stylesheet" href="print.css" type="text/css" media="print">
     <script type="text/javascript">
     
     ////////////////////////////////////////////////////////////////////////////////////////////////////
     ////////////////////////////////////////////////////////////////////////////////////////////////////
     
     var PXpix =			/* [image url + '@' + image title] */
     [
     
    	"http://www.burtonmoldings.com/images/FullSizeProfilesText/1208.jpg@MDF Casing #1208"					,
     	"http://www.burtonmoldings.com/images/FullSizeProfilesText/356.jpg@MDF Casing #356" 				,
     	"http://www.burtonmoldings.com/images/FullSizeProfilesText/Case213.jpg@MDF Casing #213"	,
     	"http://www.burtonmoldings.com/images/FullSizeProfilesText/Case243.jpg@MDF Casing #243"
     ];
     
     ////////////////////////////////////////////////////////////////////////////////////////////////////
     ////////////////////////////////////////////////////////////////////////////////////////////////////
     
     function PXWin(oPXW_array, sPXW_background, bPXW_sticky, bPXW_clickclose)
     {
     	this.picarray = oPXW_array;
     	this.picobjs = new Object;
     	var sPicurl, sPictitle, iArraylength = oPXW_array.length, iLoop = 0;
     	for (; iLoop < iArraylength; ++iLoop)
     	{
     		oData = this.picarray[iLoop].split('@');
     		sPicurl = oData[0];
     		sPictitle = oData[1];
     		this.picobjs[sPicurl] = new Image();
     		this.picobjs[sPicurl].onload = function() {this.loaded = true};
     		this.picobjs[sPicurl].title = sPictitle;
     		this.picobjs[sPicurl].src = sPicurl;
     	}
     
     	this.background = sPXW_background;
     	this.sticky = bPXW_sticky;
     	this.clickclose = bPXW_clickclose;
     	this.PXWin = null;
     
     	this.open = function(urlkey)
     	{
     		var picobj = this.picobjs[urlkey];
     		if (!picobj.loaded)
     			return false;
     		if (this.PXWin && !this.PXWin.closed)
     		{
     			if (this.PXWin.document.images[0].src == picobj.src)
     			{
     				this.PXWin.focus();
     				return false;
     			}
     			else this.PXWin.close();
     		}
     		var w = picobj.width;
     		var h = picobj.height;
     		var title = picobj.title;
     		var src = picobj.src;
     		var l = (screen.availWidth - w) / 2;
     		var t = (screen.availHeight - h) / 2;
     
     		PXWin.sHTML = '';
     		PXWin.sHTML += '<html><head><title>' + title + '</title></head>';
     		PXWin.sHTML += '<body style="margin:0;background:#000;overflow:hidden;"';
     		PXWin.sHTML += (this.sticky) ? ' onblur="setTimeout(function(){self.focus()},200)"' : '';
     		PXWin.sHTML += (this.clickclose) ? ' onclick="self.close()"' : '';
     		PXWin.sHTML += '><img width="' + w + '" height="' + h + '" ';
     		PXWin.sHTML += 'style="border-width:0;cursor:pointer;"';
     		PXWin.sHTML += (this.clickclose) ? ' title="click to close"' : '';
     		PXWin.sHTML += ' src="' + src + '"></a></body></html>';
     
     		this.PXWin = open('javascript:opener.PXWin.sHTML', 'PXWin', 'width='+w+',height='+h+',left='+l+',top='+t+',status=0');
     		if (this.PXWin && !this.PXWin.closed)
     			this.PXWin.focus();
     		return false;
     	}
     }
     
     var PXW = { open: function() {return false;} } //dummy
     onload = function()
     {
     	PXW = new PXWin(PXpix, '#000', true, true);
     }
     
     </script>
     </head>
     <body>
     <table width="760" border="0" cellspacing="0" cellpadding="0" align="left">
       <tr>
         
     	<td align="left" valign="top">
     	<div id="topheader"><img src="http://www.burtonmoldings.com/images/logo.jpg" id="logo" alt="Burton Moldings"/> 
     <h1 id="marketingline">Crown Molding, Casing, etc ... many more styles to
       choose from for your home decor</h1>
     <h1 id="tollfree">Call Toll Free: 1-888-323-8926</h1>
     </div>
       <br>
       <br>
     	<div class="content">
     	  <h1 class="contentTitle">MDF Case Molding</h1>
             <p>MDF (Medium Density Fibreboard) is a type of hardboard, which is made
             from wood fibers glued under heat and pressure. </p>
             <p>There are a number of reasons why MDF is used for molding. It is dense,
               flat, stiff, has no knots and is easily machined. Because it is made
               up of fine particles it does not have an easily recognizable surface
               grain. </p>
             <p>MDF can be painted to produce a smooth quality surface. Because MDF
               has no grain it can be cut, drilled, machined and filed without damaging
               the surface. MDF may be glued together with PVA wood glue. Oil, water-based
               paints and varnishes may be used on MDF. Veneers and laminates may
               also be used to finish MDF. </p>
             <p>MDF is available in 16ft lengths.</p>
             <p>
                 <table width="100%"  border="0" cellspacing="0" cellpadding="3" class="ProfileItem">
                   <tr>
     <td colspan="3" valign="top"><strong><span class="ProfileTitle">MDF Casing - #1208</span><br>
                       Price $0.67 </strong><span class="small">(USD Per LFT.)</span><br>
                       <strong>Dimensions:</strong> 16mm x 2-1/2" - 14'<br>
                     </td>
                     <td width="10%" align="right" valign="middle">
     
     <a href="images/FullSizeProfilesText/1208.jpg" target="PXWin" onclick="return PXW.open(this.href)">
     <img src="images/Profiles/1208.jpg" alt="MDF Casing - #1208" border="1" align="absmiddle">
     </a>
     
     <br><span class="small">Click to enlarge</span></td>
                   </tr>
                 </table>
     <div align="right" class="small"><a href="#Top">&laquo;&laquo; Back to TOP &raquo;&raquo;</a></div>
                  <table width="100%"  border="0" cellspacing="0" cellpadding="3" class="ProfileAltItem">
                   <tr>
     <td colspan="3" valign="top"><strong><span class="ProfileAltTitle">MDF Casing Molding - #356</span><br>
                       Price $0.24 </strong><span class="small">(USD Per LFT.)</span><br>
                       <strong>Dimensions:</strong> 9mm x 2-1/4" - 14'<br></td>
                     <td width="10%" align="right" valign="middle">
     
     <a href="images/FullSizeProfilesText/356.jpg" target="PXWin" onclick="return PXW.open(this.href)">
     <img src="images/Profiles/356.jpg" alt="MDF Casing Molding - #356" border="1" align="absmiddle">
     </a>
     
     <br><span class="small">Click to enlarge</span></td>
                   </tr>
                 </table>
     <div align="right" class="small"><a href="#Top">&laquo;&laquo; Back to TOP &raquo;&raquo;</a></div>
     <div align="right" class="small"><a href="#Top">&laquo;&laquo; Back to TOP &raquo;&raquo;</a></div>
                  <table width="100%"  border="0" cellspacing="0" cellpadding="3" class="ProfileAltItem">
                   <tr>
     <td colspan="3" valign="top"><strong><span class="ProfileAltTitle">MDF Door and Window Casing Molding - #Case213</span><br>
                       Price $0.60 </strong><span class="small">(USD Per LFT.)</span><br>
                       <strong>Dimensions:</strong> 3-1/4"<br></td>
                     <td width="10%" align="right" valign="middle">
     
     <a href="images/FullSizeProfilesText/Case213.jpg" target="PXWin" onclick="return PXW.open(this.href)">
     <img src="images/Profiles/Case213.jpg" alt="MDF Door and Window Casing Molding - #Case213" border="1" align="absmiddle">
     </a>
     
     <br><span class="small">Click to enlarge</span></td>
                   </tr>
                 </table>
     <div align="right" class="small"><a href="#Top">&laquo;&laquo; Back to TOP &raquo;&raquo;</a></div>
                 <table width="100%"  border="0" cellspacing="0" cellpadding="3" class="ProfileItem">
                   <tr>
     <td colspan="3" valign="top"><strong><span class="ProfileTitle">MDF Door and Window Casing Molding - #Case243</span><br>
                       Price $0.68 </strong><span class="small">(USD Per LFT.)</span><br>
                       <strong>Dimensions:</strong> 3-1/4"<br>
                     </td>
                     <td width="10%" align="right" valign="middle">
     
     <a href="images/FullSizeProfilesText/Case243.jpg" target="PXWin" onclick="return PXW.open(this.href)">
     <img src="images/Profiles/Case243.jpg" alt="MDF Door and Window Casing Molding - #Case243" border="1" align="absmiddle">
     </a>
     
     <br><span class="small">Click to enlarge</span></td>
     </tr>
     </table>
     </body>
     </html>
    Cheers, Tim


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •