Get the Height and Width of web Page and browser Window

Page sizes

If you want to get the total Height and Width of the page content in JavaScript, you can use this code:

// gets the total height of the page content
var page_height = document.body.offsetHeight ? document.body.offsetHeight : document.height;

// gets the total width of the page content
var page_width = document.body.offsetWidth ? document.body.offsetWidth : document.width;

// Test
alert('Height: '+ page_height +' px \nWidth: '+ page_width +' px');

- Example:

Click:

Window sizes

This function, getWindowSize(), can be used to get the Height and Width of the browser window, in pixels:

// Returns an Array with the 'height' and 'width' of the browser window, in pixels
function getWindowSize() {
 // from:  https://coursesweb.net/javascript/
  var win_size = new Array;
  if (self.innerHeight) {
    win_size['height'] = self.innerHeight;
    win_size['width'] = self.innerWidth;
  } else if (document.documentElement && document.documentElement.clientHeight) {
    win_size['height'] = document.documentElement.clientHeight;
    win_size['width'] = document.documentElement.Width;
  } else if (document.body) {
    win_size['height'] = document.body.clientHeight;
    win_size['width'] = document.body.clientWidth;
  }
  return win_size;
}

// Test: gets the array with the window sizes
var win_dim = getWindowSize();
alert('Height: '+ win_dim['height'] +' px \nWidth: '+ win_dim['width'] +' px');

- Example:

Click:

<<-Clear Canvas Context -- Detect when ScrollBar reaches ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Last accessed pages

Mysql SELECT JOIN tables on two different Databases ⁽⁴⁴⁹⁸⁾
jQuery UI draggable - Drag elements ^(11448)
Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ^(142520)
Using the Bone Tool ⁽⁴²⁵³⁾
Node.js Move and Copy Directory ^(20134)

Popular pages this month

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽⁵²³⁾
The Mastery of Love ⁽⁶⁵⁾
CSS cursor property - Custom Cursors ⁽⁶²⁾
Read Excel file data in PHP - PhpExcelReader ⁽⁵⁹⁾
PHP-MySQL free course, online tutorials PHP MySQL code ⁽⁴⁴⁾