CODEWITHSUNDEEP
javascripthtml
kumar
kumar

Reputation: 1127

Scaling HTML layout to the screen size

Could you tell me how to fix a HTML layout automatically with the screen resolution? Example, I am coding HTML in screen resolution of 1024 by 768 pixels. If I switch to 800 by 600 pixels, I want my HTML windows changed automatically to fix the screen.

How could I do that?

Upvotes: 3

Views: 15930

Answers (4)

andi
andi

Reputation: 14458

You don't have to use javascript. Just set the width of your element (div, table etc) to 100% in the CSS file. Then it will adjust accordingly to the width of the viewport. (the same thing applies to the height)

<!-- in yourHtml.html file -->
<!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>
    <link rel="stylesheet" type="text/css" href="yourStyleSheet.css" />
  </head>

  <body>
    <div class="fullWidth">
      Your content
    </div>
  </body>

</html>

<!-- in yourStyleSheet.css file -->
div.fullWidth {
    width:100%; 
    height:100%; 
    background-color:#CCC;
}

Upvotes: 3

mouviciel
mouviciel

Reputation: 67839

By HTML window, I assume that you are talking about HTML contents and not browser window.

If this is the case, the keywords for what you want to do are liquid/fluid/elastic design.

You may want to read Elastic Design by Patrick Griffiths on A List Apart site, or search google for liquid design.

Upvotes: 6

stpe
stpe

Reputation: 3628

Your question is vague so I try to help with some examples that may be related to your problem.

If you need to get the size of the browser window using JavaScript, here is an example:

function getClientSize() {
  var width = 0, height = 0;

  if(typeof(window.innerWidth) == 'number') {
        width = window.innerWidth;
        height = window.innerHeight;
  } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
  } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        width = document.body.clientWidth;
        height = document.body.clientHeight;
  }

  return {width: width, height: height};
}

To programmatically detect resizing of the browser window, attach a listener to the window.onresize event. Note that the following simplified example doesn't care if there already is a listener attached (use addEventListener/attachEvent as appropriate instead):

window.onresize = function() {
    var size = getClientSize();
    alert("Width: " + size.width + ", Height: " + size.height);
}

Upvotes: 0

Alistair Knock
Alistair Knock

Reputation: 1836

If you mean the actual browser window, Javascript has screen.width and screen.height which return the current resolution; see examples of use. On a particular webpage, you could set a script to run on a timer to check whether these values have changed, and resize the window if they have. It seems a peculiar achievement though - screen resolutions change very infrequently, and you would have to be on the particular page which contains this JS script for it to work. Also note that the width and height properties don't take any note of where toolbars sit, so the window could disappear behind there. This is also bad behaviour since auto-maximising overrides what the user may prefer.

Upvotes: 0

Related Questions