The Official
LexiConn News Forum

Creating Perfectly Sized Popups

Forum › Forums › Tutorials › Creating Perfectly Sized Popups

This topic contains 0 replies, has 1 voice, and was last updated by  Anonymous 18 years, 11 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • November 2, 2006 at 7:52 pm #48540

    Anonymous
    Participant

    Creating popups on your website that are the exact size of the image (or text) that you are opening up can be extremely useful as they look very professional and are an optimal use of space. You can resize a popup to perfectly fit an image, even if you do not know how big that image is. The following website is an excellent resource for creating ‘perfect popups’:

    http://www.howtocreate.co.uk/perfectPopups.html

    The text following this paragraph provides example code for creating a perfectly sized popup. The code can be inserted into a webpage directly, or called via a .js call. Since the size of the image is unknown, the script is inserted into the popup, which waits until the image has loaded before resizing it to fit “perfectly”. The script even falls back to use regular windows if popups are blocked or if JavaScript is disabled.

     

    <script type="text/javascript" language="JavaScript"> 
 //really not important (the first two should be small for Opera's sake) 
 PositionX = 10; 
 PositionY = 10; 
 defaultWidth  = 600; 
 defaultHeight = 400; 
 
 //kinda important 
 var AutoClose = true; 
 
 //don't touch 
 function popImage(imageURL,imageTitle){ 
   var imgWin = window.open('','_blank','scrollbars=no,resizable=1,width='+defaultWidth+',height='+ 
 defaultHeight+',left='+PositionX+',top='+PositionY); 
   if( !imgWin ) { return true; } //popup blockers should not cause errors 
   imgWin.document.write('<html><head><title>'+imageTitle+'<\/title><script type="text\/javascript">\n'+ 
     'function resizeWinTo() {\n'+ 
     'if( !document.images.length ) { document.images[0] = document.layers[0].images[0]; }'+ 
     'var oH = document.images[0].height, oW = document.images[0].width;\n'+ 
     'if( !oH || window.doneAlready ) { return; }\n'+ //in case images are disabled 
     'window.doneAlready = true;\n'+ //for Safari and Opera 
     'var x = window; x.resizeTo( oW + 200, oH + 200 );\n'+ 
     'var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;\n'+ 
     'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+ 
     'else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }\n'+ 
     'else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }\n'+ 
     'if( window.opera && !document.childNodes ) { myW += 16; }\n'+ 
     'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 ) - myH ) );\n'+ 
     'var scW = screen.availWidth ? screen.availWidth : screen.width;\n'+ 
     'var scH = screen.availHeight ? screen.availHeight : screen.height;\n'+ 
     'if( !window.opera ) { x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+ 
     '}\n'+ 
     '<\/script>'+ 
     '<\/head><body onload="resizeWinTo();"'+(AutoClose?' onblur="self.close();"':'')+'>'+ 
     (document.layers?('<layer left="0" top="0">'):('<div style="position:absolute;left:0px;top:0px;display:table;">'))+ 
     '<img src='+imageURL+' alt="Loading image ..." title="" onload="resizeWinTo();">'+ 
     (document.layers?'<\/layer>':'<\/div>')+'<\/body><\/html>'); 
   imgWin.document.close(); 
   if( imgWin.focus ) { imgWin.focus(); } 
   return false; 
 } 
 </script>

     

    The script can be called via the following:

     

    <a href="FILENAME.jpg" onclick="return popImage(this.href,'TITLE OF THE POPUP');">CLICK_HERE_FOR_POPUP</a>

     

  • Author
    Posts
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

 |  Trackback