Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Auto Close a popup window containing an image only (no html).

Posted on 2000-03-21
15
208 Views
Last Modified: 2006-11-17
I have a new smaller window pop up when someone clicks on a thumbnail image on my page. I do this by using the following code:

<a target="_self" onclick="window.open('directory/largerimage1.jpg','window1','scrollbars=yes,width=200,height=200')"
        href="samepage.htm"><img src="directory/thumbnailimage1.jpg" WIDTH="60" HEIGHT="60">

I would like to know how to get this window to self close after a specified time so that they do not end up having a number of windows open after clicking on the various thumnails present.

I found answers saying to place Java Script in the new window telling it to self close after X seconds. However since my new window points only to an image file (jpg or gif) there is no html in the new window containing the <head> tag nor a <body> tag, just a directory/image.jpg. Please help me I am not html savvy but trying my best to understand what I need to to get this page done soon. Help.
0
Comment
Question by:freespirit020199
  • 9
  • 5
15 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 2641375
You mean something like this?:

<SCRIPT language='javascript'>
  var winh = window.open("","window1");  // this gets a handle to window1
  setTimeout( "if ( winh && !winh.closed ){winh.close();}", 30000 );  // close the window after 30 seconds

</script>
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2641867
Try this:

<HTML>
<HEAD>
<SCRIPT language='javascript'>

 function closewin( windowname )
 {
      var winh = window.open( "", windowname );  // get handle to window
      if ( winh && !winh.closed )
      {
          winh.close();
      }
}

 function openwin( theURL )
 {
    var windowname =  (""+Math.random()).substring(1);
    var winh = window.open( theURL, windowname, 'scrollbars=yes,width=200,height=200');
    setTimeout( 'closewin("'+windowname+'");', 30000 );
 }

</script>

</head>
<BODY>



<a target="_self" onClick="openwin('directory/largerimage1.jpg');return(false);"   href="samepage.htm"><img src="directory/thumbnailimage1.jpg" WIDTH="60" HEIGHT="60" border="0"></a>

</body>
</html>
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2641876
... adjust the milliseconds in the setTimeout to your liking.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 33

Expert Comment

by:knightEknight
ID: 2641914
one typo -- in the openwin() function change:  substring(1);   to:  substring(2);
0
 

Expert Comment

by:kevcole2
ID: 2643933
I think there's an easier way...

This should work, put it in your body statement, ie:

<body onLoad="setTimeout(window.close, 10000)">

The number there is milliseconds I believe. Should work...did for me at least...

Kevin
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2644592
Yes, but that will not work with the current code because the window is not opening an HTML page, but a .jpg file, so there is no BODY tag (or any other tag for that matter).
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2661640
any thoughts, freespirit?
0
 

Author Comment

by:freespirit020199
ID: 2719320
Adjusted points from 50 to 60
0
 

Author Comment

by:freespirit020199
ID: 2719321
Thanks everyone...I apologize for the delay but I was unable to come back to this project until now.

knightEknight, your script worked beautifully. You were correct about the fact that the pop-up window had no body codes as it was a simple image file, which is why the other answer would not work. I intend to give you the points. One last clarification however: the size of the new pop-up windows are determined in the script placed in the <head> tag. Firstly will this work with multiple thumbnails on a single page, for multiple pop-up wndows per page? Also the new window often needs to be different sizes depending on the larger image. In my previous code, I was able to determine that by:

onclick="window.open('directory/largerimage1.jpg','window1','scrollbars=yes,width=200,height=200')"

for each window.open command. Your way is great except for the fact that the new window size is fixed for every thumbnail. How can I get around that?
0
 
LVL 33

Accepted Solution

by:
knightEknight earned 60 total points
ID: 2722752
I modified the openwin function to accept to additional parameters for the width and height of the image.  That way you can specify the w/h in the onClick event as shown below.  It's hard for me to say exactly how to apply this to your situation without seeing the code you are using to determine the w/h of each image.  Please paste that code and I can elagorate further (I'd like to see that myself anyway!)


<HTML>
<HEAD>
<SCRIPT language='javascript'>

function closewin( windowname )
{
   var winh = window.open( "", windowname );  // get handle to window
   if ( winh && !winh.closed )
   {
       winh.close();
   }
}

function openwin( theURL, w, h)
{
   var windowname =  (""+Math.random()).substring(2);
   var winh = window.open( theURL, windowname, 'scrollbars=yes,width='+w+',height='+h);
   setTimeout( 'closewin("'+windowname+'");', 30000 );
}

</script>
</head>

<BODY>


<a target="_self" onClick="openwin('directory/largerimage1.jpg',250,200);return(false);"   href="samepage.htm">
<img src="directory/thumbnailimage1.jpg" WIDTH="60" HEIGHT="60" border="0"></a>

<a target="_self" onClick="openwin('directory/largerimage2.jpg',300,300);return(false);"   href="samepage.htm">
<img src="directory/thumbnailimage2.jpg" WIDTH="60" HEIGHT="60" border="0"></a>

</body>
</html>
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2722755
Sorry, my typing is not the best today (it's Monday)

"elagorate"  should be  "elaborate",  as one example.
0
 

Author Comment

by:freespirit020199
ID: 2770892
As you requested, the page with my problem code is at:
http://www.newworldrealtors.com/showcase/showcaseindex.htm

I have just replaced the previous code with the one above and it seems to be working fine. I have not uploaded it as yet though so you would see your code in action probably within a few days.

I realize that the code you so kindly gave me opens each window in a separate window. This is fine since they each close after the seconds set. But for future's sake, is there a way to fine tune it so that each time someone clicks a separate thumbnail it opens into the SAME window? Is this asking too much? If so, then no prob... as it works fine as is.

Thanks again. Will be back to check or accept the answers as soon as I get this uploaded.
0
 

Author Comment

by:freespirit020199
ID: 2770906
knightEknight:
P.S. Is there a way to contact you regarding your services and fees, if so required in the future?
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2771020
How about if we close the popup as soon as another one is opened?  Try this:

function closewin( windowname )   // the only change here is to rename winh to winh2
{
  var winh2 = window.open( "", windowname );  // get handle to window
  if ( winh2 && !winh2.closed )
  {
     winh2.close();
  }
}

var winh=null;  // move this declaration outside the function to make it global.

function openwin( theURL, w, h )
{
   if ( winh && !winh.closed )   // if a previous window is still open, then close it immediately
      winh.close();

   var windowname =  (""+Math.random()).substring(2);
   winh = window.open( theURL, windowname, 'scrollbars=yes,width='+w+',height='+h);
   setTimeout( 'closewin("'+windowname+'");', 30000 );
}

If you want my email address, post another question for 0 points.  I'll lock it, you accept it, and then I'll add my email address as a comment.  Thanks!
0
 

Author Comment

by:freespirit020199
ID: 2798124
Thanks a million knightEknight
I used your solution at:
http://www.newworldrealtors.com/showcase/showcaseindex.htm

It does what you say and works fine. There is something that happens after the 30 seconds is up where briefly a blank browser page flashes before disappearing but I am not sure what that is about. But it does the job fine for me. This is much better than what i had tried to do before.

Thank you. I will post that question re the email so look out for it.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Can't get js include to work in html file 8 20
Head to not include on scroll 4 23
Show Ruler in Outlook 2010 STILL NOT SHOWING! 4 23
Set time on Session (ASP) 14 21
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question