SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Aug 2001
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resize Popup window

    Hello All,
    Can anyone tell me if it is possible to create a popup window in javascript that automatically sets its size to the image displayed in it, or to resize the window once the image is loaded?? This would save me setting the ‘height’ and ‘width’ attributes all the time.

    Thanks,
    Mex
    signature

  2. #2
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I could do it with a mix of PHP and Javascript. Any use?
    I swear to drunk I'm not God.
    » Matt's debating is not a crime «
    Hint: Don't buy a stupid dwarf ö Clicky

  3. #3
    will code HTML for food Michel V's Avatar
    Join Date
    Sep 2000
    Location
    Corsica
    Posts
    552
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm almost done with a script like this

    Now the only problem I have is that the window.resizeTo javascript function does not resize the popup according to the content's size but to the window's size

    Example there: http://adecec.net/test/popup2.html - just click on the first picture.


    Any help with that window.resizeTo function is welcome
    [blogger: zengun] [blogware contributor: wordpress]

  4. #4
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    var isNav4, isIE4;
    if (parseInt(navigator.appVersion.charAt(0)) >= 4) {
    isNav4 = (navigator.appName == "Netscape") ? 1 : 0;
    isIE4 = (navigator.appName.indexOf("Microsoft") != -1) ? 1 : 0;
    }
    function fitWindowSize() {
    if (isNav4) {
    window.innerWidth = document.layers[0].document.images[0].width;
    window.innerHeight = document.layers[0].document.images[0].height;
    }
    if (isIE4) {
    window.resizeTo(500, 500);
    width = 500 - (document.body.clientWidth -  document.images[0].width);
    height = 500 - (document.body.clientHeight -  document.images[0].height);
    window.resizeTo(width, height);
       }
    }
    
    </script>
    </HEAD>
    Code:
    <BODY onLoad="fitWindowSize()">
    Code:
    <a href="image-window.html" target="_blank">Open Image Window</a>
    That is a very crude way of doing it, but it works.
    I swear to drunk I'm not God.
    » Matt's debating is not a crime «
    Hint: Don't buy a stupid dwarf ö Clicky

  5. #5
    will code HTML for food Michel V's Avatar
    Join Date
    Sep 2000
    Location
    Corsica
    Posts
    552
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't work in Mozilla 0.9.3 and IE 6

    But I have something working there. It uses PHP and JS, and would correct some width/height problem with a little error margin (I made it according to the default Explorer windows sizes, so there's 1 or 2 pixels too much in Mozilla and Opera).
    It wouldn't work on Netscape 4 tho.
    [blogger: zengun] [blogware contributor: wordpress]

  6. #6
    will code HTML for food Michel V's Avatar
    Join Date
    Sep 2000
    Location
    Corsica
    Posts
    552
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh by the way, here's source code for it:

    Code:
    in the file that'd call the popup, put this between the <head> tags:
    
    <script type="text/javascript">
    <!--
    
    // much thanks to author of this page for the original javascript:
    // http://www.idocs.com/tags/linking/li...amsupp_72.html
    
    function popup(mylink, windowname)
    {
    if (! window.focus)return true;
    var href;
    if (typeof(mylink) == 'string')
       href=mylink;
    else
       href=mylink.href;
    window.open(href + "&title=" + windowname, windowname, 'width=400,height=300,scrollbars=no');
    return false;
    }
    //-->
    </script>
    
    then you can make a link to an image like this:
    
    <A HREF="popup.php?url=image.jpg" onClick="return popup(this,'caption')"> link text/image to the image popup </a>
    
    note: for some odd reason the caption will make an error if it's more than one word :???:
    
    
    now the file popup.php:
    
    <?php
    $size = GetImageSize($url);
    $width = $size[0] + 10;
    $height = $size[1] + 29;
    ?><html>
    <title><?php echo $title ?></title>
    <head>
    <SCRIPT LANGUAGE="JavaScript"><!--
    window.resizeTo(<?php echo $width.",".$height ?>);
    //--></SCRIPT>
    </head>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <img src="<?php echo $url ?>" border="0" />
    <SCRIPT TYPE="text/javascript">
    <!--
    window.focus();
    //-->
    </SCRIPT>
    </body>
    </html>
    Hope it serves you :)
    [blogger: zengun] [blogware contributor: wordpress]

  7. #7
    You talkin to me? Anarchos's Avatar
    Join Date
    Oct 2000
    Location
    Austin, TX
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's my script for this: http://anarchos.xs.mw/thumbnail.phtml
    ck :: bringing chris to the masses.


Bookmarks

Posting Permissions

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