HTML - Window Size To Content?
Hi There,
our site content is 720 pixels wide. When the user clicks ona button, it opens a new HTML window that is 720 pixels wide. Good. This first page is long, so there are scroll bars (both horz and vertical) But when the user clicks on the next page, which only has a little content, the scroll bars are gone, but the window width size stays the same, and you see a 10-pixel strip of background hanging on to the right side (where the vert scroll bar was on the previous page) So my question is: When you click to go to a new HTML page... can you also tell the window to "fit to content" or something like that? see what I'm saying: start he http://www.studio209.com/stumptown_e...own_store.html click on "Blank Packaging" Then click on "View cart" Thanks!! Similar Tutorialshello, I'm an HTML novice who designed/maintains my own site without any expertise at all. One problem I can't seem to figure out: When the browser window is sized more narrowly than the content on the page, the table sections get shoved down underneath one another. Most sites I see don't do that -- when the browser window narrows, the site content stays in place. Any insight about what my error is? You can check out the problem at www.adamgwon.com. Thanks much. Hi! I have a page that contains a text area. What I want it to do is to change its size according to the size of the browser window. How can I make it do that? I did it once but just can't seem to remember how I did it. Thanks All: Working to update a previously designed website. Original design uses an <img> tag to create a top banner and another <img> tag to create a side banner. In each case there are mapped coordinates on each banner as links for the subsequent pages. Basic page design is as follows: Code: <table> <tr> <td> <img usemap="Map1"> <map name="Map1"> <area> <area> <area> </map> </td> </tr> </table> <table> <tr> <td> <img name="Map2"> <map> <area> <area> <area> </map> </td> <div> ***PAGE CONTENT*** </div> <tr> <table> The challenge is that the [PAGE CONTENT] varries in length througout the site causing some pages to be much longer or shorter than others. This causes some inconsistencey in the relationship between the side banners height and the page content. In other words in some cases the banner is exceptionally longer than the page content and the reader must scroll past significant "dead-space" before being brought to the lowest mapped links in the side banner; or... ...in some cases the side banner is significantly shorter than the page content causing the banner image to appear "poorly-fit" to the page design. I considered altering the 2nd table instance in the above design so that the banner is carried in a <td> tag that is adjacent to the page content and hopefully to allow the tag carrying the image to size relative to the <td> tag carring the content.... Code: <table> <tr> <td> <img usemap="Map1"> <map name="Map1"> <area> <area> <area> </map> </td> </tr> </table> <table> <tr> <td size="100%"> <img name="Map2"> <map> <area> <area> <area> </map> </td> <td size="100%" > <table> ***PAGE CONTENT*** </table> </td> <tr> <table> The problem I've found with this is that as the content size causes the image to "flex", either readablilty or image quality or both are effected, AND the mappings become inconsistent as the image coordinates constantly change. I've considered 2 solutions and am leaning toward one, but thought I'd post this and see if there are better ideas I'm overlooking. One idea was to add additional table rows inside the [PAGE CONTENT] table presumably creating a "defalut" page size that would never be smaller than a standard for the side banner. Problem: larger page sizes are still a problem as are the changing map coordinates My other idea was to return to the original page design listed first above and again settle on a standard side banner "height"... ...any page that was significantly longer than that height would be split to 2 or more pages with a [NEXT>>] button at the bottom of the page navigating to the additional content. Problem: ...possible complications splitting content... Benefit: ...consistent page design that allows a consistent side banner with navigable links... Question for the group: Does this sound reasonable? Are there better alternatives I am overlooking? THANKS IN ADVANCE FOR ALL INPUT!! ok i have a page that opens another page without the toolbars, however the issue is that i dont know how to make them different sizes, like this page im including here is too small for what is actually on the page. I have to maximize the window. How do i html the code for the size page i want it to be. I hope I am sayong that correct. HTML 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=utf-8" /> <title>Home Certification</title> </head> <script language="JavaScript"> function loadMainWindow() { var win = window.self; win.opener = window.self; var newloc = "http://clas0as21.corp.cox.com/sdchealtop/framework/frameset.asp"; var ih = (window.window.screen.availHeight - 60) - 100; var iw = (window.window.screen.availWidth - 10) - 100; var it = ((window.window.screen.availHeight - 60) - ih) / 2; var il = ((window.window.screen.availWidth - 10) - iw) / 2; var features = "directories=no,menubar=no,location=no,toolbar=no,status=yes,scrollbars=yes*,resizable=yes" + ",width=" + iw + ",height=" + ih + ",top=" + it + ",left=" + il + ""; v1 = new Date(); v2 = Date.parse(v1); v3 = "pg" + v2; var oNewWindow = window.open(newloc, v3, features); oNewWindow.focus(); win.close(); } function window.onload() { try { loadMainWindow(); } catch(e) { popUpMessage.style.display = 'You Are Being Redirected!'; } } </script> Hello, I've been working in Dreamweaver on what I think is a pretty simple project, but am stuck figuring out the following: On the system that I used to create the html code, the following produces exactly what I intend... a mouseover event that opens a window that is 800x600: <a href="#" onmouseout="dave.close()" onmouseover="dave=window.open('Adrift in Manhattan.htmL','test','width=800,height=600')"><font size="2" face="Georgia, Times New Roman, Times, serif">Adrift in Manhattan </font></a><br /> <br /> When I "mouseover" on one of my other systems, the window opens full screen - not the 800x600 I want. What am I missing? Thanks, bob I have made a link from an image to open a detail of the image in a new page. Everything works OK but the only problem I've got is that the new browser window that opens is too big, the image is nestled up in the right hand corner. Is there a way I can controll the size of the new browser window so that it only displays the image with a minmul white space around it? Thanks in advance to anyone who can help. Dyfrig Hello, This is gonna be difficult for me to explain, but here we go. I am wondering how I create a page that automatically (as far as possible) re sizes when you make the window bigger and smaller. So that the use of scrollbar is minimal. Do you understand what I am trying to say? Kind of floating in a way. I am using dreamweaver and am gonna code this site in xhtml strict (right choice?). Have a nice day, helen I have a form and once on submit it redirect to another php page. I would like to know how I can go about making the redirect php page a pop up window and have the pop up window at a specifiied size and at the same time reload the original php page. Anyhelp is appreciated. Thank you. Similar to how most pop-up windows are a fixed size, I was curious as to how I could fix the size of a browsing window (particularly the width) of a page. Vertical scrolling isn't as important, but I would like my index page as well as the pages within the Iframe in the index page to remain a certain width so viewers would only have to scroll vertically to view the entire content of the html document. I have tried "stealing" the coding used in pop-up windows, trying it in both the head and body of the code but to no avail. I have searched for countless hours on the 'net looking for a tutorial that gives the code for this and have had zero luck. (I know it must be possible.) Any and all help/input is greatly appreciated! Thanks so much in advance, Dereck Hello, Please go to http://www.cactusridgerr.com/choices.htm. Click on the 'enlarge' button. Your browser may be setup to maximizing the size of the new window that pops up, but I'd like to know if there's a way to force the size of the window to be maximized - otherwise, the image doesn't look all that enlarged. My code for the 'enlarge' button looks like this: Code: <td> <a id="aenlarge" href="print/freisa.jpg" onmouseover="ienlarge.src='JPGs/enlarge_highlighted.jpg'" onmouseout="ienlarge.src='JPGs/enlarge_normal.jpg'" target=_blank> <img id="ienlarge" src="JPGs/enlarge_normal.jpg" border=0></a> </td> As you can see, it links to a simple JPG and the target=_blank attribute in the link tag ensures that it will open in a new window. Is there anything I can add to the link tag that will force a maximization of the size of the new window? Something like like onclick="target.window.size=max;"? Thanks for any forthcoming help. well i have a link which points to an email address using mailto <a href="mailto:abct@gmail.com">abc@gmail.com</a> which opens an outlook express window.....i want this window to be of a specific size of my choice..... how do i implement it ??? Hi: This is probably a silly trivial question but I can't seem to find the answer in my books ('Beginning Web Programming with HTML,XHTML. and CSS' by Jon Duckett, and 'Javascript - The Definitive Guide (5th Edition) by David Flanagan): How do I ensure that my client's browser window is set to 'Full Screen' when loading is complete ?? (btw, my current page looks confusing if the client's browser window is much less than full size ) I hope there is something llike: onload window.size := 'fullscreen' )) Thanks for any hints - and for any pointers in my books above where I can read up properly on this) -Mel Smith Hi there, I've been casually browsing the site for a number of weeks now, with the intention of registering and becoming involved. I've stumbled across a problem within an intranet that I'm working on which I'm hoping some of you may be able to help with. Perhaps the most succinct way to get my problem across would be to describe the situation I'm faced with: Our intranet has a section that displays a company flowchart, which shows a breakdown of everybody's job titles in a spider-diagram. The size of the company dictates that for this to be readable, it has to be fairly large in size. The actual size of the document I need to use (which is in PDF format at present) is 640mm x 400mm. Previously, we have been splitting this into three separate sections to enable it to be displayed as three images (on three separate pages) - each of these three images were then inserted into the relevant page, with an image map created over them to enable the effect I wished (upon clicking on someone's name/box, it pops up a Facebox pop-up with their job description and some other information about that individual. The way the script works, this is all contained within the single HTML file). My problem now is that I would like to achieve as close to this effect as possible. However, the PDF link function doesn't allow the more sophisticated functions, so I would have to convert each Facebox content into a new HTML content, which can then be linked to from within the PDF. My question, therefore, is - is it possible to control the attributes that this new window will open in, from within the source HTML file? Ideally, I would like to specify that the window that opens dynamically resizes to fit the content specified in the source HTML file. If this is not possible, can it be done that the window opens to a specific size? I've done numerous web searches, but haven't found anything relevant to this. If my above query isn't possible, I wonder whether it's plausible to set the default size of new windows from within the page that will contain the embedded PDF. Some sort of command that says "any new pop-up window (i.e. target="_blank") will be opened at X width and Y height." If neither of the above solutions are available, the third option would be to somehow mimick the functionality an embedded PDF offers (i.e. zooming in and out, keeping the total canvas size the same, being able to still create links that work on regions of the content, pointing to the various source HTMLs). I originally went down this road, but my search came up empty. I'm envisaging something Google Map-esque, I guess. I wonder, would it be possible to insert some sort of static frame (size-wise) that can then have scrollable content inside it, the content therein that can be assigned an image map? Zoom +/- functionality and click 'n' drag scrolling would both be high on the list of priorities. Anyone who can offer any insight is thanked gratefully in advance. I want my link to open into a new window with no scrollbar or status bar and be 100% of the screen width and 66% of the screen height. Is there a way to do this? thanks in advance. Hi! On a page I'm trying to accomplish the following: A border with a static width surrounding positioned elements (divs). Each element can vary in height and holds text, tables, images, etc. Problem: Is there any way to dynamically adjust the border height to the content? I don't want to use scripting. I have tried using a div with auto height, but it does not adjust to inner divs. I have tried using a table cell containing divs, breaks as soon as divs are positioned. Please help! See simplified example below. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>HTML</title> <style> .borderdiv{ position:relative; width:628px; margin-left: auto; margin-right: auto; background-color:white; height:300px; border-color:#CA3182; border-style:solid; border-width:1px; background-color:#EDFBFD; } .pinkdiv{ position:absolute; width:628px; height:64px; border:none; background-color:#F8D7DA; } .div1{ position:absolute; width:292px; height:29px; top:24px; left:10px; border-width: 1px; border-style: solid; } .div2{ position:absolute; width:200px; height:49px; top:10px; right:11px; text-align:right; border-width: 1px; border-style: solid; } .div3{ position:absolute; width:193px; height:200px; top:175px; right:23px; background-color:#EDFBFD; border-width: 1px; border-style: solid; } </style> </head> <body> <div class="borderdiv"> <div class="pinkdiv"></div> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3"> <table border="1"> <tr> <td><strong>Table</strong></td> <td><b>Dynamic text.</b><br>Amount of text may change here.<br><br>Pink outer border (borderdiv) should adjust to the content in this table!!!</td> </tr> </table> div3 </div> </div> </body> </html> Hi there, I have put a youtube video source in dreamweaver, and was wondering if anyone could tell me how i make it so the browser window the video is in clings to the video, i.e the frame is the exact size of the video. Also, however this is done, would it be the same code with images? Thanks in advance, Rob Here is the code <body> <td><a href="<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NIktYSst2mw"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/NIktYSst2mw" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object> </body> </html> Below is code that works fine, but I wonder if someone could help so that it opens in a full size window so that they don't have to resize the pop up. Thank you. <p><frameset frameborder="0" rows="10%,*"></frameset><frame src="menu.html"></frame><frame name="frame"></frame>Adjust the percentage to give your frames the right height. The first frame is pointing at your menu so here is menu.html :</p> <table align="center"> <tbody> <tr> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 1</option> <option value="" selected="selected">Drop down 1</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 2</option> <option value="" selected="selected">Drop down 2</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 3</option> <option value="" selected="selected">Drop down 3</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 4</option> <option value="" selected="selected">Drop down 4</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> </tr> </tbody> </table> <table> <script language=Javascript> function change(select) { if( select.options[ select.selectedIndex].value) { select.form.action = select.options[ select.selectedIndex].value; select.form.submit(); } } </script> <tbody> </tbody> </table> Helllo all, I'm hoping someone with more HTML skills than I have can see where my problem is with trying to modify a pre-built website. I have an area at the top of my webpage where I'm trying to just add a small iframe that will contain a link to a related website. What happened when I added this in what I thought was the right place, is that it appeared in place of where other content was supposed to be. I then tried to contain the problem by creating a table, and given that each of the two existing pieces of content were in div blocks, I put each div block within a table data element (td). Unfortunately, even with specified column widths, the best of the results I've achieved results in my site search content having the button get pushed onto a new line and thus almost invisible, leaving the text input box in place. It's as if the PHP stuff in that div block is somehow pushing the browser to considerably widen the first cell unless I restrict it's width. The site you can see this on is: http://debtfreenewsblog.com The site is somewhat slow - takes 30 to 45 seconds to load (a separate issue, but if you happen to see why, let me know), but once it does, you can use view source and see the very first table and you'll see the resulting HTML. Dreamweaver's design view doesn't do anything to indicate why there's a problem, and kind of hides reality from me. There is a style sheet, or perhaps even more than one, for the site, and as I'm not familiar with exactly how that works together with everything else, that may well be where the problem is. Any and all help will be appreciated. My objective is to just get the search button to come back to the same line as the text input box. Steve (aka sgmunson) |