window.close trouble

mikeadamek · Jul 9, 2002

I am using window.open to open a bunch of different screen shots (.gif) in a smaller window and I want to be able to close that window with something else than the "x" button in the upper left corner.

My code is:
<BUTTON onclick="window.open('C:/Inetpub/

http://wwwroot/K_Base/images/Win9598_Dial-Up/DUimage060.gif',null,'height=400,

width=400, left=80, top=80');">VIEW</BUTTON>

The best thing for me would be to write some html with onclick="window.close()" in button format inside the window.open() so that the button appears right below my .gif. Is that possible? So far I haven't been able to find any sample code.

SPYDERIX · Jul 9, 2002

Hi,

You want to close the window inside the popup window. You can add a button that closes the window by using this:

<FORM>
<INPUT TYPE="BUTTON" VALUE="CLOSE" onClick="javascript:window.close();">
</FORM>

Or if you want a plain link then use this:

<A HREF="javascript:window.close();">Close Window</A>

Hope this helps! NATE

design@spyderix-designz.com
http://www.spyderix-designz.com

SPYDERIX · Jul 9, 2002

Oh sorry,

I didn't look at your code properly. You should popup an HTML page that has the picture in it and then has the button or link I just gave you. If you only popup a picture like that then you can't add a button, b/c it's only the picture being popped up.

Hope this helps! NATE

design@spyderix-designz.com
http://www.spyderix-designz.com

tnsbuff · Jul 9, 2002

I'm a beginner so not sure exactly how to do it off-hand, but how about creating an html page with the "Close" button below where the image would go. You could pass a variable containing the image path using a query string as part of the hyperlink.

Just don't ask me for the code. ;-)

tnsbuff · Jul 9, 2002

Okay, you made me try it out so ...

1. On your regular page with the button that opens the popup window put this:

<form>
<input type="button" onClick="window.open('popup_page.html?image_name.gif','window_name','height=400,width=400')" value="View Popup"></form>

2. ... then take a blank html page and put this in the <head> and save it as popup_page.html:

<script>
var image;
image = window.location.search;
image = image.substring(1, image.length);
document.write("<center><img src='images/" + image + "'></center>&quot

;
document.write("<center><form><input type='button' value='Close Window' onClick='window.close()'></form></center>&quot

;
</script>

Of course, you'll need to adjust the path to the directory that holds your images. (Make sure they're all in the same directory.)

Let me know if you have any problem.

tnsbuff · Jul 9, 2002

I just noticed ... if your image is 400 x 400, then you'll want to make your popup page a little bigger so that you'll have room for the "Close" button.

Good luck!

Guest_imported · Jul 9, 2002

you could always just make the image actually a link - in the html page that pops up holding the image, use this:

<a onClick="self.close()"><img src="mypic.gif" border=0></a><br>Click picture to close

yes, that's right, there's no "href" or "name" or anything in the <a> tag, makes for a pretty interesting affect if you use javascript with it, you can do it with text too, try it!

mikeadamek · Jul 10, 2002

Okay, I am calling up over 50 .gif's and don't want to write an html doc for each gif. I just want to call a window.close() function in the window.open() for each gif that I am calling. Writing a sql statement would work best but the .gifs are already made and not in any order nor in a database, just a folder.

tnsbuff · Jul 10, 2002

I don't think you can do what you're trying to do without at least 1 html page because the only thing that's open is the image and you can't place a button on top of an image.

>>Okay, I am calling up over 50 .gif's and don't want to write an html doc for each gif<<

Do you want to have all of them open at one time, or do you want to have one popup window and have it display a different image each time depending on which button/link is clicked on the original page?

If you want them all open at one time, then my script won't work. If you want to open one popup (popup_page.html) that displays an image depending on what button or link is clicked, then my script will work. You only create one html document for the popup. You add the image's file name onto the end of the link or url that's specified in your function on the first page. Then the url is parsed on the popup page in the <head> section using the location.search property. This tells the browser which image to display in the popup.

Won't that work for you?

Phil79 · Jul 11, 2002

I wrote this code a while ago. It works ok on IE but I couldn't tell you if it works on NS or not. Basically you have two pages involved. The linking page passes all of the information required to the page which displays the picture. Each picture is opened in the same page using the parameters specified in the linking page. This is the page which links to the pictures:

Code:

<html>
<head><title>Linking Page</title>
<script>
	function redirect(u,w,h,t) {
	var width=w+40;
	var height=h+80;
	windowprops=&quot;location=no,scrollbars=no,menubars=no,toolbars=no,resizable=no,width=&quot; + width + &quot;,height=&quot; + height;
	url=&quot;fullsize.html?args=&&quot; + u +&quot;&&quot;+ w +&quot;&&quot;+ h +&quot;&&quot;+ t
	popup = window.open(url,t,windowprops);
	}
</script>
</head>
<body>
<img src=&quot;TVR.jpg&quot; width=&quot;80&quot; height=&quot;80&quot; border=&quot;1&quot; style=&quot;cursor:hand&quot; onClick=&quot;javascript:redirect('TVR.jpg',762,549,'Description')&quot;>
</body>
</html>

This is the page which displays the picture. I called it fullsize.html. If you want to change the name to something else, you'll need to change it in the page above. The numbers are the actual physical window width and height, and description refers to the 'alt' text on the picture in the new window.

Code:

<html>
<head><title>Picture page</title></head>
<body>
<table cellpadding=5>
<tr><td width=100%>
<script language=&quot;JavaScript&quot;>
	window.focus
	var input = window.location.href
	selectedI=new Array()
	selectedI=input.split(&quot;&&quot;);
	parseAlt=new Array
	parseAlt=selectedI[4].split(&quot;%20&quot;)
	var altText=&quot;&quot;
	for (i=0; i<parseAlt.length; i++){
	altText+=parseAlt[i]+&quot; &quot;;
	}
	imageString=&quot;<img src=&quot; + selectedI[1] + &quot; width=&quot; + selectedI[2] + &quot; height=&quot; + selectedI[3] + &quot; alt='&quot; + altText + &quot;'>&quot;
	document.writeln(imageString)
	
function closemap() {
	timer = setTimeout('window.close();', 10);
}
</script>
</td></tr>
<tr><td width=100% align=right>
<a href=&quot;javascript:closemap()&quot;>Close</a>
</td></tr>
</table>
</body></html>

Hope this helps.

Phil

Phil79 · Jul 11, 2002

Oh yes, you might find it easier to use an array to store the image information and get javascript to write in on the page. It'd be less hassle than writing 50 <img> tags.

TheOdditie · Mar 30, 2003

oh thank you tnsbuff, your scripts helped out so much. I am undergoing putting up vehicle pics on my car clubs website and need to know how to do that so bad. I just have one question real quick, what would be the easiest way to put a description of each pic with this code? I'm not that great with javascript, but I'm sure there is a simple way to do it. Any help would be appreciated. Also your post already got a star from me.

Thanks,
Tony

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!

window.close trouble

mikeadamek

Programmer

SPYDERIX

Technical User

SPYDERIX

Technical User

tnsbuff

Technical User

tnsbuff

Technical User

tnsbuff

Technical User

Guest_imported

New member

mikeadamek

Programmer

tnsbuff

Technical User

Phil79

Technical User

Phil79

Technical User

TheOdditie

Technical User

Similar threads

Part and Inventory Search

Sponsor