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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Location
    North Carolina
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question auto-adjust window size for window.open

    My Disclaimer: I am a complete novice to pretty much everything to do with any kind of programming. I have not taken a programming class since Visual Basic was required when I was in college a longer number of years ago than I care to admit. Everything I have picked up was self taught, doubtless including many bad habits that I don't even know are bad

    So, here's my issue:

    I have a window that opens on a mouse click to display product details on my website. The amount of content varies by product.

    What I want:
    Window opens to the correct size to display all content without resizing.

    What I don't want:
    A window that opens to size huge every time and leaves products with fewer details hanging there sadly in a sea of blank background.

    Any help/advice is appreciated. For reasons I won't bore anybody with there is no cash in the business to hire someone so I'm stuck learning on my own and fixing and trying to improve a badly constructed site into something that at least looks decent and functions even if the back end is messy.

    Thank God for W3Schools.com and all you lovelies in forum land!

    Here is my script:

    Code:
    function newPopup(url) {
    	popupWindow = window.open(
    		url,'popUpWindow','height=600px,width=1100px,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
    }

    Here is a sample of the window content that will be displayed in a small window:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <title>my title here</title>
    
    <link rel="stylesheet" href="style.css" type="text/css" />
    
    </head>
    
    
    
    <body style="margin:auto; background-color:#000000;">
    
    		<div style=" height:600px; width:450px; margin:auto; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:12px; line-height:1.5; padding:10px; float:left;">
    <div style="height:600px; width:450px; float:left;">
    			           
    
    						<h3 style="font-family:oswaldbook; margin-bottom:10px; font-size:24px;">Product Name</h3>
    
    						<img src="images/whateverproductphoto.png" width="60" height="186" style="float:left; margin-right:10px;"/>
    						Product Description
    				
    						 
    						<h3 style="font-family:oswaldbook; margin-bottom:10px; font-size:18px;">Features:</h3>
    
    <ul style="margin-left:40px;">
    				<li>insert feature here
    				<li>....and here
    				<li>....and here
    				<li>....and here
    				<li>....and here
    				<li>....etc
    				
    </ul>
    
    
    					
    
    			</div>
    
    			</div>
    
    			</div>
    
    			
    
    			
    
    			
    
    </body>
    
    </html>
    Here's one of the larger content pages:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <title>Page Title</title>
    
    <link rel="stylesheet" href="style.css" type="text/css" />
    
    </head>
    
    
    
    <body style="margin:auto; background-color:#000000;">
    
                  
    
    		<div style=" height:600px; width:1050px; margin:auto; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:12px; line-height:1.5; padding:10px; float:left;">
    <div style="height:600px; width:450px; float:left;">
    
    
    						<h3 style="font-family:oswaldbook; margin-bottom:10px; font-size:24px;">Product Name</h3>
    
    						<img src="images/productphoto.png" width="60" height="186" style="float:left; margin-right:10px;"/>
    Product Description
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <h3 style="font-family:oswaldbook; margin-bottom:10px; font-size:18px;">Features:</h3>
    <ul style="margin-left:40Px;">
    <li>Here's a feature
    <li>.....and another
    <li>......etc
     </ul>
     </br> </br> </br> </br> </br>
    
    </div>
    
    
    					<div style="height:600px; width:550px; float:right;">
    <h3 style="font-family:oswaldbook; margin-bottom:10px; margin-right150px; font-size:24px;">Product Name</h3>
    
    						<img src="images/productphoto.png" width="60" height="186" style="float:left; margin-right:10px;"/>
    					
    						Product Description
    <br/>
    <br/>
    <br/><br />
    <br/><br />
    <br/><br />
    <br/>
    						
    	<h3 style="font-family:oswaldbook; margin-bottom:10px; font-size:18px;">Features:</h3>
    
    						
    <ul style="margin-left:40px;">
    <li>Here's a feature
    <li>.....and another
    <li>......etc
    </ul>
    
    		 </div>
    
    			</div>
    
    			</div>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    If you don't somehow know the size required *before* you open the window, then likely the best you can do is open it at some set size, use coding to determine the correct size, and then reopen it to the right size.

    *BUT*

    But the right answer *MIGHT* be to stop popping open windows.

    After all, many people have gotten very aggressive about installing popup blockers, and you might well find that people give up on your site just because of the popups.

    A possibly better choice would be to use a "popon". That is, a <div> that you simply cause to sit "in front" of other content on your page. And the beauty of this is that you can "pop on" a <div> that is actually completely hidden, determine the size it needs to be, adjust it to that size, and then un-hide it!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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