Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Popup Image Window, Auto Size?? 1

Status
Not open for further replies.
Wheelz77

Wheelz77

Technical User
Jan 25, 2007
13
Hi,
(I don't know about "Technical User" more like "Home User")

I have a table with a selection of thumbnails all the same size and want each to open a popup window. This is not a problem until I find that one of the images is portrait and all the others are landscape. It still displays but you have to scroll the image.
I have the script in the head with size control which would be ok if all the pics were the same dimension.
Is there a way to make the popup window autosize, ie. to fit the contents?
I'd prefer to keep it as an "image" popup as opposed to an "html" popup.

This is what I have so far:

Code: 
</style>
<script language="JavaScript"><!--
function popup(image){
  cuteLittleWindow = window.open(image, "littleWindow", "location=no,width=640,height=480,scrollbars=auto");
}
//--></SCRIPT>

blah...blah...

Code: 
<td align="center"><a href="java script:popup('paintball/pics/Speedball001.jpg')"><img src="paintball/pics/Speedball001_t.jpg" border="0" width="100" height="100"></a></td>

Any help appreciated.

Cheers
 
Sort by date Sort by votes
Thanks anyway, I found the answer. :)
 
Upvote 0 Downvote
This might help...

Code: 
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<script language="JavaScript">
function popup(image){
  cuteLittleWindow = window.open('', "littleWindow", "location=0,scrollbars=auto");
  cuteLittleWindow.document.write('<div style="position: absolute; width: 100%; height: 100%; z-index: 1; left:0px; top:0px"><table cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center"><img id="IMG" onload="window.resizeTo(this.width+10,this.height+30);" src="'+image+'"></td></tr></table></div>');
}
</SCRIPT>
</head>
<body>
<p><a href="javascript:popup('[URL unfurl="true"]http://iconocla.st/photo/2000/12/09/001209-gum-tree-l.jpg')">[/URL]
<img src="[URL unfurl="true"]http://www.setapartgraphics.com/Avatar/pink_bird.gif"[/URL] border="0" width="52" height="52"></a> 
Portrait</p>
<p><a href="javascript:popup('[URL unfurl="true"]http://www.setapartgraphics.com/Avatar/Nate%20PS6%20Class%20assignment.jpg')">[/URL]
<img src="[URL unfurl="true"]http://www.setapartgraphics.com/Avatar/pink_bird.gif"[/URL] border="0" width="52" height="52"></a> 
Landscape</p>
<p><a href="javascript:popup('[URL unfurl="true"]http://pauillac.inria.fr/~harley/pics/square.gif')">[/URL]
<img src="[URL unfurl="true"]http://www.setapartgraphics.com/Avatar/pink_bird.gif"[/URL] border="0" width="52" height="52"></a> 
Square</p>
</body>
</html>
 
Upvote 0 Downvote
you might also want to put this in there to..
Code: 
cuteLittleWindow.document.focus();
 
Upvote 0 Downvote
Thanks NateBro,

I'm just trying your code now as it's much shorter than the fix I found.

What will this do?
Code: 
cuteLittleWindow.document.focus();

Cheers
Pete
 
Upvote 0 Downvote
sorry my bad, i didn't explain that very well, here is how its supposed to look...
the focus brings the window back to the front if its behind the main window
Code: 
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<script language="JavaScript">
function popup(image){
  cuteLittleWindow = window.open('', "littleWindow", "location=0,scrollbars=auto");
  cuteLittleWindow.document.focus();
  cuteLittleWindow.document.writein('<div style="position: absolute; width: 100%; height: 100%; z-index: 1; left:0px; top:0px"><table cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center"><img title="Click To Close Window" id="IMG" onclick="window.close();" onload="window.resizeTo(this.width+10,this.height+30);" src="'+image+'"></td></tr></table></div>');
}
</SCRIPT>
</head>
<body>
<p><a href="javascript:popup('[URL unfurl="true"]http://iconocla.st/photo/2000/12/09/001209-gum-tree-l.jpg')">[/URL]
<img src="[URL unfurl="true"]http://www.setapartgraphics.com/Avatar/pink_bird.gif"[/URL] border="0" width="52" height="52"></a> 
Portrait</p>
<p><a href="javascript:popup('[URL unfurl="true"]http://www.setapartgraphics.com/Avatar/Nate%20PS6%20Class%20assignment.jpg')">[/URL]
<img src="[URL unfurl="true"]http://www.setapartgraphics.com/Avatar/pink_bird.gif"[/URL] border="0" width="52" height="52"></a> 
Landscape</p>
<p><a href="javascript:popup('[URL unfurl="true"]http://pauillac.inria.fr/~harley/pics/square.gif')">[/URL]
<img src="[URL unfurl="true"]http://www.setapartgraphics.com/Avatar/pink_bird.gif"[/URL] border="0" width="52" height="52"></a> 
Square</p>
</body>
</html>

and this was ONLY tested in Internet Explorer, and i know it needs a cross browser support as well.
 
Upvote 0 Downvote
Hi NateBro,

Did you actually test the code as you've copied it above?
I tried your code after failing to adapt it to my page and even yours will open a window but not display the image.
I've tested in IE, Firefox and Deepnet.
 
Upvote 0 Downvote
It's sweet now.
I changed:
Code: 
cuteLittleWindow.document.writein

to:
Code: 
cuteLittleWindow.document.write
 
Upvote 0 Downvote
oops, i'm sorry, in the part that has..
Code: 
function popup(image){
  cuteLittleWindow = window.open('', "littleWindow", "location=0,scrollbars=auto");
  cuteLittleWindow.document.focus();
  cuteLittleWindow.document.writein('<div style="position

change...
document.writein()
to...
document.write()
 
Upvote 0 Downvote
Thanks NateBro for all your time.

It's been very successful.

Cheers
Pete
 
Upvote 0 Downvote
Agh! Spoke too soon.

Any idea why an imageless window would appear in Firefox only?

IE and Deepnet are fine.
 
Upvote 0 Downvote
Got it this time, lol

Firefox won't recognise:
Code: 
cuteLittleWindow.document.focus();

All good now. ;)
 
Upvote 0 Downvote
One more question about this script.
Is there a way to specify a custom screen location for the popup window to appear?
I gather it's in the "Location=0" statement but I don't know how to specify either a coordinate or even just "center" would be good.
Code: 
</STYLE>
    <!--POPUP WINDOW SCRIPT START-->
<SCRIPT type="text/javascript" language="JavaScript">
function popup(image){
  cuteLittleWindow = window.open('', "littleWindow", "location=0,scrollbars=auto");
  cuteLittleWindow.document.write('<div style="position: absolute; width: 100%; height: 100%; z-index: 1; left:0px; top:0px"><table cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center"><img title="Click HERE To Close" id="IMG" onclick="window.close();" onload="window.resizeTo(this.width+10,this.height+30);" src="'+image+'"><\/td><\/tr><\/table><\/div>');
}
    <!--POPUP WINDOW SCRIPT END-->
</SCRIPT>

Any help appreciated.

Cheers
Pete
 
Upvote 0 Downvote
Code: 
function popup(image){
  cuteLittleWindow = window.open('', "littleWindow", "location=0,scrollbars=auto");
  cuteLittleWindow.document.write('<div style="position: absolute; width: 100%; height: 100%; z-index: 1; left:0px; top:0px"><table cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center"><img title="Click HERE To Close" id="IMG" onclick="window.close();" onload="window.resizeTo(this.width+10,this.height+30);" src="'+image+'"><\/td><\/tr><\/table><\/div>');
  cuteLittleWindow.window.moveTo(200, 200); // moveTo(X, Y);
}

just add
Code: 
cuteLittleWindow.window.moveTo(200, 200); // moveTo(X, Y);
the the end of the function
 
Upvote 0 Downvote
Thanks NateBro,

Just tried it and it works a treat!!

You've come through yet again. ;)

Cheers
Pete
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
578
rogerte
rogerte
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
388
waubain
waubain
bach1
  • Locked
  • Question
How to get value from popup window to parent window by clicking from database selection?
Replies
2
Views
168
Offera
Offera
bs6600
  • Locked
  • Question
How can I make a window wider?
Replies
1
Views
139
xwb
xwb
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
163
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top