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 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Popup Window resize to image script

    I use a popup window script that uses a close() method to reload the new window. Can anyone explain how that is possible?

    The script opens a new window with an image then resizes the window to match the image's dimensions. So when when you click on a link it creates a new window and use writeln() methods to write a javascript function in the new window to resize itself. I understand that the resize function (which is triggered by a load event) won't run because the load happens before the script has been written. The line of code that i dont understand uses a close(); method that reloads the window instead of closing it. Here the script:

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript" type="text/JavaScript">
    // Set the horizontal and vertical position for the popup
    PositionX = 100; PositionY = 100;
    // Set these value approximately 20 pixels greater than the size of the largest image to be used (for Netscape)
    defaultWidth  = 700; defaultHeight = 700;
    // Set autoclose true to have the window close automatically or false to allow multiple popup windows
    var AutoClose = true;
    
    if (parseInt(navigator.appVersion.charAt(0))>=4){
    var isNN=(navigator.appName=="Netscape")?1:0;
    var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
    var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
    var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
    
    function popImage(imageURL,imageTitle){ //creates a new window and writes a script in it to resize itself
    	if (isNN){imgWin=window.open('about:blank','',optNN);}
    	if (isIE){imgWin=window.open('about:blank','',optIE);}
    	with (imgWin.document){ //shortens imgWin.document.writeln to writeln
    		writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');
    		writeln('<sc'+'ript>');
    		writeln('function reSizeToImage(){');
    		if (isIE){ 
    			writeln('window.resizeTo(100,100);');
    			writeln('width=(100-document.body.clientWidth)+document.images[0].width;');
    			writeln('height=(100-document.body.clientHeight)+document.images[0].height;');
    			writeln('window.resizeTo(width,height);}');}
    		else if(isNN){      
    			writeln('window.innerWidth=document.images["myPic"].width;');
    			writeln('window.innerHeight=document.images["myPic"].height;}');
    		}
    		writeln('function doTitle(){document.title="'+imageTitle+'";}');
    		writeln('</sc'+'ript>');
    		writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()"')
    		if (!AutoClose){writeln('>')}else {writeln(' onblur="self.close()">');}
    		writeln('<img name="myPic" src='+imageURL+' style="display:block">');
    		writeln('</body></html>');
    		close(); //triggers new window to reload running resize script but i'm not sure why it works 		
    	}
    }
    </script>
    </head>
    
    <body>
    <p><a href="javascript:popImage('image1.jpg','title')">View image1</a></p>
    </body>
    </html>
    Last edited by javaPete; 03-04-2004 at 08:42 PM.

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just posted this in the Dynamic Drive Script Forum and
    perhaps you will find some joy in using this script instead.
    (it will open a window to the size of the image)
    Code:
    <script type="text/javascript">
     <!--//
      function newImg(which){
       var theImg = new Image();
           theImg.src = which;
       var imgw = theImg.width;
       var imgh = theImg.height;
    
        if(imgw<100){imgw = 100};
        if(imgh<100){imgh = 100};
    
         var ImgWin = window.open('','imgwin',config='height='+imgh+',width='+imgw+',top=0,left=100')
           with(ImgWin.document){
            writeln('<html><head><title>Display Image</title></head>');
            writeln('<body onload="self.focus()" onblur="self.close()">');
            writeln('<div style="text-align:center">');
            writeln('<img src='+which+'></div>');
            writeln('<div style="text-align:center;font-size:9px">');
            writeln('<a href="#" onClick="self.close()">Close Me</a>');
            writeln('</div></body></html>');
            close();
           }
      }
     //-->
    </script>
    </HEAD>
    
    
    <a href="dynamicbook1.gif" onclick="newImg(this.href);return false"><img src="dynamicbook1.gif"></a>
    .....Willy

  • #3
    New Coder
    Join Date
    Mar 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Willy, nice script looks like it does the job more efficiently.

    But you still didn't answer my question why does the close()method reload the new window instead of closing it? I noticed its also in your script.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Close method on the "document' object tells the browser that you've finished writing a new document to the browser and that it's now ok to finish it up. You're confusing that close method with the one for the "window" object which is the one used to close the browser window entirely.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #5
    New Coder
    Join Date
    Mar 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thx Roy, ur right. ive been out of javascript for a long time, its kinda of frustrating because just when ive got one language down i get a project in another just cant keep all this crap in my head (asp, asp.net, php, mysql, java, javascript, html, xml, css...)

    one more question if you please: should scripts still test for browser ie/nav and version? doesnt over 90% use ie now?

    this script doesnt work right in opera 6 (window opens but no code is written to the window). maybe my browser test is to blame. i'll need to relook at it again.

  • #6
    New Coder
    Join Date
    Feb 2004
    Location
    California
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by javaPete
    one more question if you please: should scripts still test for browser ie/nav and version? doesnt over 90% use ie now?
    Eh, more or less. A lot of the people over at Flashkit use mozilla, Opera, Safari, and others. A handful of my friends use moz as well. So maybe 80% ish. I would still try to make the pages as universal as you can


  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Alternative more cross-browser popup image viewer script in my sig.


  •  

    Posting Permissions

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