SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resize a Popup to Fit an Image's Size 2

    For some reason I cannot reply to redux's post at http://www.sitepointforums.com/showt...threadid=95318 so I am opening a new thread. I tried using the script but for some reason when the popup windows open, they are all 200 x 200 pixels in height/width or about 1/4 the size of the images I'm using.

    Can somebody tell me why they are not opening the size of the image? I didn't change any of the Javascript or PHP code.

    popup.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>The Image Gallery</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="Javascript"> 
    function PopupPic(sPicURL)
    { 
    newWin=window.open(sPicURL, 'newWin', 'resizable=1,HEIGHT=200,WIDTH=200'); 
    newWin.focus(); 
    } 
    </script>
    </head>
    <body>
    <a href="popup.php?image=image1.jpg" onclick="PopupPic(this.href); return false;" target="_blank">Image 1</a><br> 
    <a href="popup.php?image=image2.jpg" onclick="PopupPic(this.href); return false;" target="_blank">Image 2</a><br> 
    <a href="popup.php?image=image3.jpg" onclick="PopupPic(this.href); return false;" target="_blank">Image 3</a><br> 
    </body>
    </html>
    popup.php

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
    <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]">
    <head>
    <title>Fit the Pic Script</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language='javascript'> 
    var NS = (navigator.appName=="Netscape" )?true:false; 
    function FitPic()

    iWidth = (NS)?window.innerWidth:document.body.clientWidth; 
    iHeight = (NS)?window.innerHeight:document.body.clientHeight; 
    iWidth = document.images[0].width - iWidth; 
    iHeight = document.images[0].height - iHeight; 
    window.resizeBy(iWidth, iHeight); 
    self.focus(); 
    }; 
    </script> 
    </head>
    <body onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> 
    <img src="<?php echo $_GET["image']; ?>' border='0' alt=''> 
    </body>
    </html>
    Any help would be greatly appreciated.
    John Saunders

  2. #2
    SitePoint Wizard silver trophy Crazybanana's Avatar
    Join Date
    Mar 2003
    Location
    In tha fruit cellar
    Posts
    1,379
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    the window is restricted to max 200x200 you have to change the code: 'resizable=1,HEIGHT=200,WIDTH=200'
    Who's to doom when the judge himself is dragged before the bar


  3. #3
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed it to 600 x 500 and it's working a little better, but the bottom isn't resizing to the exact height of the image. The image I am using is 544px x 313px and the window is maximized in height and is 500 px high.

    Any ideas what's wrong?
    John Saunders

  4. #4
    SitePoint Wizard silver trophy Crazybanana's Avatar
    Join Date
    Mar 2003
    Location
    In tha fruit cellar
    Posts
    1,379
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    first, your code has some bugs and maybe you should change to 600x600.
    the image gallery
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head> <title>The Image Gallery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="Javascript"> function PopupPic(sPicURL)
    { newWin=window.open(sPicURL, 'newWin', 'resizable=1,HEIGHT=600,WIDTH=500');
    newWin.focus(); } </script> </head> <body> <a href="popup.php?image=image1.jpg"
    onclick="PopupPic(this.href); return false;" target="_blank">Image 1</a><br>
    <a href="popup.php?image=image2.jpg" onclick="PopupPic(this.href); return false;"
    target="_blank">Image 2</a><br> <a href="popup.php?image=image3.jpg"
    onclick="PopupPic(this.href); return false;" target="_blank">Image 3</a><br>
    </body> </html>

    popup

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href=""\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\" target=\"_blank\">
    <head>
    <title>Fit the Pic Script</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language='javascript'>
    var NS = (navigator.appName=="Netscape" )?true:false;
    function FitPic()
    {
    iWidth = (NS)?window.innerWidth:document.body.clientWidth;
    iHeight = (NS)?window.innerHeight:document.body.clientHeight;
    iWidth = document.images[0].width - iWidth;
    iHeight = document.images[0].height - iHeight;
    window.resizeBy(iWidth, iHeight);
    self.focus();
    };
    </script>
    </head>
    <body onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">
    <img src="<?php echo $_GET['image']; ?>" border='0' alt=''>
    </body>
    </html>

    if you have some text showing up in the top of your browser then the image wont fit unless you specify a higher value than your biggest pic.
    (i took away some xhtml at the top, just replace it and make window bigger) if my code doesnt been altered by vb it should work.

    hope this will help.. if not so please tell
    Who's to doom when the judge himself is dragged before the bar



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
  •