| SitePoint Sponsor |
|
|
User Tag List
Results 1 to 4 of 4
-
Jul 11, 2003, 09:43 #1Git-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
popup.phpCode:<!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>
Any help would be greatly appreciated.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>John Saunders
-
Jul 11, 2003, 10:07 #2SitePoint Mentor
- Join Date
- Mar 2003
- Location
- In tha fruit cellar
- Posts
- 1,374
- Mentioned
- 30 Post(s)
- Tagged
- 1 Thread(s)
-
Jul 11, 2003, 10:12 #3Git-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
-
Jul 11, 2003, 19:14 #4SitePoint Mentor
- Join Date
- Mar 2003
- Location
- In tha fruit cellar
- Posts
- 1,374
- Mentioned
- 30 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
Bookmarks