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 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Popup Window matching height and width of its content? Possible?

    Well, I know how to make popups though the javascript code, I have come across a situation where the content inside the popup will be different everytime... I want the popup window height and width to match the contents Attributes... Anyone know of a way? Thnx in advance...

  • #2
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is a roundabout method, and there might be another way, but here it is:

    Inside the body tag of your popup, include this:
    Code:
    <body onload="window.resizeTo(this.offsetWidth,this.offsetHeight)">
    Now, in some browsers offsetWidth returns only the width of the inner part of the window, not including the status bar, title bar, etc. So, you can either add a constant number of pixels in the resizeTo function's width and height, or use the modified resize function in place of the one above:

    Code:
    function resizeOuterTo(w,h) {
     if (parseInt(navigator.appVersion)>3) {
       if (navigator.appName=="Netscape") {
        top.outerWidth=w;
        top.outerHeight=h;
       }
       else top.resizeTo(w,h);
     }
    }
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."

  • #3
    New Coder
    Join Date
    Jun 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmm... I tried it, and it doesn't seem to work, It simply makes the popup window size very small regardless of what is inside or what i describe the popup window to be... I wonder if im doing something wrong...

    I have this script in the header of the main page:
    Code:
    <SCRIPT TYPE="text/javascript">
    <!--
    function popup(mylink, windowname)
    {
    if (! window.focus)return true;
    var href;
    if (typeof(mylink) == 'string')
       href=mylink;
    else
       href=mylink.href;
    window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
    return false;
    }
    //-->
    </SCRIPT>
    And, This code on the link to the pop up window:
    Code:
    <A 
       HREF="popupwindow.html" 
       onClick="return popup(this, 'notes')">like to popup</A>
    Then I pasted the body tag you posted into the pop up page, but it size to the content, in fact it simply makes it very small regardless of anything...

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by stickfigure View Post
    I want the popup window height and width to match the contents Attributes...
    I'm probably just missing something but what does this mean? Where exactly are the width and height found?

    david_kw

  • #5
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyway, here is an example of code that resizes the popup window to the size of the image that it is going to show.

    Code:
    function view_jpg(jpg_url, title_str)
    {
        html_src = "<html><title>" + title_str + "</title><style>body{margin:5px 0px 0px 0px}</style><body onblur='top.close()'><center><img src='"+ jpg_url +"' border=0 name=view_jpg onload='window.resizeTo(document.view_jpg.width+20,document.view_jpg.height+44)' onclick='self.close()'></center></body></html>";
    
        popup_win=window.open('','','scrollbars=no,toolbar=no,width=1,height=1');
        popup_win.document.open();
        popup_win.document.write(html_src);
        popup_win.document.close();
    }
    I'm not sure if that is similar to what you want though.

    david_kw

  • #6
    New Coder
    Join Date
    Jun 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thnx, ill give this one a try...i think i might be able to edit this to make it suit my needs... Still, if there are any other ideas please let me know...

  • #7
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've got another one for you to try. What you should do is wrap the entire contents of your popup in a div called "wrapper". So your popup html would look like

    Code:
    <body>
    <div id="wrapper">
    content
    </div>
    </body>
    Then in the body tag, insert
    Code:
    onload="window.resizeTo(document.getElementById('wrapper').offsetWidth, document.getElementById('wrapper').offsetHeight)"
    This has a better chance of working than myfirst suggestion.
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."

  • #8
    New Coder
    Join Date
    Jun 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks TripperTreats for your latest reply, i used the code you provided and it seems to work partially...
    It resizes the window, however not fully, I am actually trying to work with it and trying to get it to work, but im still having a little trouble... I have to define the the wrapper id definitely, keeping it auto doesn't seem to work, which defeats my purpose... Here's what im looking at as the code for my popup window... The wrapper if resizes when i have it as auto, but the window does not along with it.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Player</title>
    <style type="text/css">
    <!--
    body {
    	background-color: #666666;
    	margin: 0;
    	padding: 0;
    }
    #wrapper {
    	width: auto;
    	height: auto;
    	overflow: auto;
    	}
    #heading {
    	height: 40px;
    	width: auto;
    	background: url(images/playerheadbac.jpg) repeat-x;
    	text-align: right;
    	}
    #player {
    	overflow: auto;
    	width: auto;
    	height: auto;
    	}
    -->
    </style>
    </head>
    <body onload="window.resizeTo(document.getElementById('wrapper').offsetWidth, document.getElementById('wrapper').offsetHeight)">
    <div id="wrapper">
    <div id="heading"><img src="images/playerheadas.jpg" alt="" /></div>
    <div id="player">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="640" height="480" id="Untitled-1" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="Untitled-1.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="Untitled-1.swf" quality="high" bgcolor="#ffffff" width="640" height="480" name="Untitled-1" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
    </div>
    
    </div>
    </body>


  •  

    Posting Permissions

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