Jul 26, 2008

Width Of Display Area Of Browser Window - is there a formula?

Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > HTML, XML etc..

free web hosting

Width Of Display Area Of Browser Window - is there a formula?

Jeune

I am making a table in a website that's as big as the display area of the browser for instance:

CODE

<Table border=0 cellpadding=0 cellspacing=0 width=?? align=center>
....
.....
</table>


How do I know the width of the browser display area? Better yet, is there a general formula for
that for other screen resolutions?

I know a little bit of javascript, are there functions for that?

Reply

Mich
QUOTE(Jeune @ Aug 8 2006, 09:02 PM) *

I am making a table in a website that's as big as the display area of the browser for instance:
CODE
<Table border=0 cellpadding=0 cellspacing=0 width=?? align=center>
....
.....
</table>

How do I know the width of the browser display area? Better yet, is there a general formula for
that for other screen resolutions?
I know a little bit of javascript, are there functions for that?
Simple solution to the table width. Use percentages.
CODE
<Table border=0 cellpadding=0 cellspacing=0 width=100% align=center>
....
.....
</table>

This way it fits whatever width the browser is displaying. It does screw up the pages some if you have designed a page for 1024x768 and somebody is viewing say at 800x600.

Can't help you with the javascript question.

 

 

 


Reply

Jeune
QUOTE(Mich @ Aug 9 2006, 09:48 AM) *

Simple solution to the table width. Use percentages.
CODE
<Table border=0 cellpadding=0 cellspacing=0 width=100% align=center>
....
.....
</table>

This way it fits whatever width the browser is displaying. It does screw up the pages some if you have designed a page for 1024x768 and somebody is viewing say at 800x600.

Can't help you with the javascript question.



It's hard to use that especially if I have the other tables within the larger table require that they be measured in pixels.

For instance, I want the large table to contain a separator (like cellpadding) of width 10px, how I am supposed to compute for the measurements of the other tables so that they add up to the larger table holding them?

here's a "graphic" explanation of my problem:

CODE

<Table border=0 cellpadding=0 cellspacing=0 width=100% align=center>
<tr><td=??>

<td width=10>

<td=??>

</table>



















Reply

rvalkass
Do you actually need a spacer? As you said, you can use cell padding, or use CSS to change the margins and padding of the cells to get it to work if all you want is space. If it needs a different background or something, then you will need a separate cell.

I think there are 3 ways of using Javascript to get the width and height of the browser window, but I strongly advise you not to use them. They can cause all sorts of bugs, especially if JS is turned off and then people won't see your site at all.

CODE

Method 1:
window.innerHeight
window.innerWidth

Method 2:
document.documentElement.clientHeight
document.documentElement.clientWidth

Method 3:
document.body.clientHeight
document.body.clientWidth


They all return the width or height of the browser window in pixels, but there are problems. With the first one, IE returns nothing so people still using Internet Explorer either won't see the site, or will see a garbled mess. Method 2 will get a result from IE, but it's 0 for v5 or 6 in quirks mode. Method 3 gets a result from everything bar Netscape, but some browsers offer the internal size not including scroll bars, some offer internal size including scroll bars and some give the size of the whole window. This is why I advise using either a fixed width table centralised in the page or setting the table to a width of 100%.

Reply

fffanatics
Javascript is not the answer for a table width problem like this. It has too many restrictions based on the browser being used. What you are going to want to do is use width="100%" and if you are going to set the pixel width of any tr's or td's inside the 100% width table, be warned that if the screen is too small for the set widths specified, a scrollbar will be inserted.

Reply

mynitr
Ya,
Use "percentage" instead of "pixels" while mentioning the table/cell dimentions.
For example, let's talk about the width.
100% width means the width of display. So if you are putting some image file in a particular table cell give it's size in pixels and the remaining space is now 100%. Divide it with the other cells/tables.

Reply

beeseven
10px on 1024x768 (I think that's what most people use, isn't it?) is just about 1%, so couldn't you have the width of the table as 100% and the spacers 1%?

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Recent Queries:-
  1. hta document.body.clientwidth; - 36.17 hr back. (1)
  2. browser display area - 77.22 hr back. (1)
Similar Topics

Keywords : width display browser formula

  1. Max Table Width - (13)
    Well, I have a table that I don't want to be over 350 pixels in width - even on the largest
    screens. On small screens, the table will be smaller. But on large screens, I don't want the
    table to larger than 350 pixels... Is there a way to do that?...
  2. How To Make Youtube Embedded Videos Viewable On All Browsers - including on Opera browser which is actually not viewable with embedde (3)
    Firstly, I've noticed that embedded YouTube videos on personal websites, or any sites not on
    YouTube's domain, cannot be viewed on Opera browser. In other words, the codes given by YouTube
    to embed the videos on your site does not have support for Opera browser. However I've found out
    a trick to do so. Here's how.. This is the original code given by YouTube to embed to your own
    website. Copy this codes and paste into the source of your site. CODE <object
    width="425" height="350"> <param name="movie" value="...
  3. How To Reference Parent Browser Window From..... - (2)
    i have a custom button on the local browser toolbar which points to a local html application (HTA).
    the browser launches the HTA when the custom button is clicked. i have to reference the parent
    browser window from the child HTA window. an instruction in the local HTA window.opener sets or
    retrieves a reference to the window (the browser) that created the current window (the HTA).
    however, window.opener is returning null. the HTA is run under the mshta.exe process. how do i
    reference the browser from the HTA or javascript? i have winxp sp2 with ie6.0 kvarnerexpress...
  4. Creating Rss Feeds For Wapsites - How to display rss feeds in a php enabled site (5)
    Anyone who wants to help me? I want my site to have this feature but I don't know how.
    /sad.gif" style="vertical-align:middle" emoid=":(" border="0" alt="sad.gif" /> Hope you could me
    with embedding these xml files in my wml pages.. Moved to the HTML, XML ect.. forum ...
  5. How To Display Php Code [resolved] - Html Help With Php Codebox (8)
  6. Centering Page Of Html At Various Display Widths - Viewing Screen Shots No Matter Resolution (14)
    I am running into a HUGE problem creating a website. When viewing the site on 800x600 it views in
    the center of the page. When viewing the site on 1024x768 it views on the left side of the page. How
    do I make the page always appear in the middle? I have seen many sites set up that will adjust
    accordingly, but I cannot figure it out. If you want to view my source you can do so by going to the
    website: www.faithcity.org/test.html. Moving to the html Topic ...
  7. Ie Table Width In A Div Tag - Table expands past screen at 100% (4)
    Hey everyone. I have been designing websites for a long time but i have recently decided to tryout
    the DIV layout technique instead of just using good old tables. However, this is the biggest problem
    i have come across. So I have a page where i need to have a table to display a whole bunch of
    details on armor in a game since the site is for players of final fantasy. However, when i do
    width="100%" so that the table expands the whole way to the side of the div so it looks the best it
    now will go past the edge and off the screen at 100%. Below is most of the code. Please h...
  8. Browser Altering Font Size - (6)
    Is there a way to make the text on a page stay the same size, even if the user clicks on the
    'Enlarge text size' button or the 'Decrease text size' button within browsers. I
    know you can use an image, but that makes the site too big. I also am aware of the need to give the
    user control, but for particular reasons a particular section of text on the site needs to stay the
    same size. It doesn't matter if the text around it is enlarged or decreased. It is just a
    particular section. Any suggestions appreciated. Also, as an aside, is there a way you can ...
  9. Word.doc Or Pdf Formatted File To Display In A Web - How to maintain the formatting??? (12)
    I have a document which was originally created using ms office word processing with very strict
    formatting requirements. It is a high level academic paper which I would like to make viewable
    within a web page complete with the original formatting. I also have it available as a pdf file with
    the same formatting. Regardless of the format, is there a way to convert this highly formatted
    document into an html page and retain the formatting without major work? The only way I have been
    able to do this so far is with the use of a table layout , an iframe, and the client havi...
  10. Trouble With Links On A List - i want to display it inline (7)
    I have a menu that i want to display inline, in the same row, something like this: CODE
    <style type="text/css">
    ul{float:left;width:100%;padding:0;margin:0;}
    a{float:left;text-decoration:none;color:white;background-color:red; padding:5px
    10px;} a:hover {background-color:blue} li {display:inline} </style> The
    only problem is that i want a custom img for showing as CODE list-style:
    url(img/bullet.gif) But seems that display:inline makes my bullet go away... could s...
  11. Display Tooltip - (2)
    Hi, I have a flash menu on the left site of the screen which basically are icons only. The movie is
    very narrow (only 50 pixels wide), so there is not enough room to display text also in there. My
    problem is that I want a tooltip to appear when doing a mouseover over one of these icons. I tried
    using layers, but they seem to dissapear under the flashmovie itself, as well as other flash
    elements on the webpage. Since within the flash movie this can't be done, I am looking for a
    solution whereby a tooltip appears over the flashmovie. Help very appreciated. Kind reg...
  12. Opening Images In Pictureviewer Instead Of Browser - Locally (7)
    What I am trying to do is make up a small HTML site which will be based localy on my computer and
    basicly show all of the images I have taken on different holidays. What I want though is when I
    click on an image for it to be opened up in Windows Picture Viewer. As the web site will all be
    saved locally on my computer and not be going on the internet is there any way of achiving this? I
    am running Windows XP Professional if it makes any difference Thank you in advance,kvarnerexpress...
  13. Table Width Help - table width="100%" goes off screen (2)
    Hey everyone. My problem is that current i have a left menu and a right menu which are created using
    a div the properties listed below. Then i have a center section to my website where i have a table
    that i need to fill the remaining space on the screen (aka the space from the right side of the left
    menu to the left side of the right menu). However, when i set the table's width to 100%, it goes
    of the screen. Can anyone help me with this? If you look at my main page, the news section works but
    only because the text forces the table to its largest size and then wraps....
  14. Popup Window With Height And Width? - (9)
    I will try to explain: When clicking on the link, a pop-up window will be opened. I also want to
    have the width=300 and height=160 (just examples /wink.gif' border='0'
    style='vertical-align:middle' alt='wink.gif' /> ) Could someone give me a short code for that?...
  15. Adding Width And Height To Page - (8)
    how do you add width and height to your page? without adding it to your link you previously
    clicked... I mean, that the width and height should be included in the ORIGINAL page... i hope
    someone can help me with this... thanks in advance! /cool.gif' border='0'
    style='vertical-align:middle' alt='cool.gif' /> btw: i'm not that familiar with
    scripting......



Looking for width, display, area, browser, window, formula

Searching Video's for width, display, area, browser, window, formula
advertisement



Width Of Display Area Of Browser Window - is there a formula?



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE