Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to close window then open new one in function

    hi,

    i am adapting someone else's script, as i am not yet fluent in javascript, and need to modify one small part...

    basically it's an image gallery script with popup windows launched by clicking on a thumbnail. if the popup window is open, and the user clicks on a different thumbnail, i want the existing popup to close and the new one open. i think it's already supposed to do this, but when you click on a thumbnail, the open one closes, but the new one does not open.

    Code:
    function popupgalimage(imgsrc, popwidth, popheight){
    
    function triangulate(){
    leftpos = (screen.width) ? (screen.width-popwidth)/2 : 0;
    toppos = (screen.height) ? (screen.height-popheight)/2 : 0;
    }
    
    triangulate()
    var windowdesc='width='+popwidth+',height='+popheight+',resizable=no,left='+leftpos+',top='+toppos
    var picsrc='popwin.php?file='+imgsrc
    if (typeof popupgalwin=="undefined" || popupgalwin.closed)
    popupgalwin=window.open(picsrc,"popupgalwin",windowdesc)
    else{
    popupgalwin.close()
    popupgalwin=window.open(picsrc,"popupgalwin",windowdesc)
    }
    }
    to me it looks like the last two lines there say if a window is already open, then close popupgalwin, then open a new popupgalwin with the necessary file/parameters. however, it just closes the one and then doesn't open the other.

    i tried a few things, but i like i said i'm not good enough to do this on my own yet.

    thanks
    skye

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,950
    Thanks
    0
    Thanked 236 Times in 233 Posts
    You don't need to open the existing popup and create a new one. You can make it open the image in the same popup (if it exists) and in a new popup (if it doesn't exists). You are actually doing it by specifying the same window target for all popups.

    popupgalwin=window.open(picsrc,"popupgalwin",windowdesc);

    what lacking is to set focus to the popup.

    popupgalwin.focus();

    Here's the final code:
    Code:
    function popupgalimage(imgsrc, popwidth, popheight){
    
       function triangulate(){
          leftpos = (screen.width) ? (screen.width-popwidth)/2 : 0;
          toppos = (screen.height) ? (screen.height-popheight)/2 : 0;
       }
    
       triangulate();
    
       var windowdesc='width='+popwidth+',height='+popheight+  ',resizable=no,left='+leftpos+',top='+toppos;
       var picsrc='popwin.php?file='+imgsrc;
       var popupgalwin=window.open(picsrc,"popupgalwin",windowdesc)
       popupgalwin.focus();
    }
    The use of inner function triangulate is I think overkill because the outer function popupgalimage is not OO-based.

    You can simplify the function to still make it work with javascript-disabled browsers.
    Code:
    function popupgalimage(picsrc, target, popwidth, popheight){
       var leftpos = (screen.width) ? (screen.width-popwidth)/2 : 0;
       var toppos = (screen.height) ? (screen.height-popheight)/2 : 0;
       var windowdesc = 'width=' + popwidth + ',height=' + popheight + ',resizable=no,left=' + leftpos + ',top=' + toppos;
       var popupgalwin=window.open(picsrc, target, windowdesc);
       popupgalwin.focus();
       return false;
    }
    ...
    <a href="popwin.php?file=big_pic1.gif" target="popupgalwin" onclick="return popupgalimage(this.href, this.target, 800, 600)"><img src="thumb_pic1.gif" /></a>
    <a href="popwin.php?file=big_pic2.gif" target="popupgalwin" onclick="return popupgalimage(this.href, this.target, 700, 500)"><img src="thumb_pic2.gif" /></a>
    ...

  • #3
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your time. I tried using the first code you posted, which didn't seem to work really... It does target the existing window, but it does not resize them for the next image, so it displays a little funny.

    I _do_ need the code to close the window and reopen it, because resizing an existing window, as far as I know, is only compatible with some versions of IE. So I do need the thumbnail script to close the popup, then open a new one with the correct dimensions for the next image.

    The second solution I am not sure will work, I'll have to look again but this is all nested in a PHP script which I am not sure I can change properly to fit your second code.

    skye

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,950
    Thanks
    0
    Thanked 236 Times in 233 Posts
    You didn't mention before that you want the popup to resize to the current image's dimension.
    Code:
    function popupgalimage(imgsrc, popwidth, popheight){
       var leftpos = (screen.width) ? (screen.width-popwidth)/2 : 0;
       var toppos = (screen.height) ? (screen.height-popheight)/2 : 0;
       var windowdesc = 'width=' + popwidth + ', height=' + popheight + ',resizable=no,left=' + leftpos + ',top=' + toppos;
       var popupgalwin = window.open('popwin.php?file='+escape(imgsrc), "popupgalwin", windowdesc);
       popupgalwin.resizeTo(popwidth, popheight);
       popupgalwin.focus();
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •