The window object is created for each window that appears on the screen. A window can be the main browser window, a frame set or iframe, or even a new window created with JavaScript (pop-up).
The properties and methods of the window object gives you some control over browser windows.

Window Object Properties


- Examples with some of these properties
1) Displays an Alert with the Width and Height of the curent window (works only in Firefox).
<script type="text/javascript"><!--
var v_width = window.innerWidth;
var v_height = window.innerHeight;
alert("width = "+ v_width+ " | Height = "+ v_height);       // width = 1280 | Height = 649
--></script>

2) Sets a name to the window and writes it in the page.
<script type="text/javascript"><!--
window.name = "Test_Win";
document.write("This window is named "+window.name);     // This window is named Test_Win
--></script>

3) When is clicked a button (Open new Win), it calls a function that opens a new window (pop-up), writes a text inside it and also writes another text in the opener window.
<script type="text/javascript"><!--
function openWin() {
  var new_win = window.open('','new_win','width=280,height=100');

  // writes a text in the current (opened) window
  new_win.document.write("This is 'new_win'");

  // Writes a text in the parent (opener) window
  new_win.opener.document.write("<p>This is the opener window!</p>");
}
--></script>
<button onclick="openWin()">Open new Win</button>

4) When is clicked a button (Gets Win position), it calls a function that gets the X,Y position of the window, using the properties according to the browser, and displays a message with the X,Y position.
<script type="text/javascript"><!--
function getPosition() {
  var browser_n = navigator.appName;     // gets the browser

  // gets the x,y screen position accordint to browser
  if (browser_n=='Microsoft Internet Explorer') {
    var x = window.screenLeft;
    var y = window.screenTop;
  }
  else {
    var x = window.screenX;
    var y = window.screenY;
  }

  alert('position X = '+ x+ ' position Y = '+ y);
}
--></script>
<button onclick="getPosition()">Gets Win position</button>
- You can test with the next button.

Window Object Methods


- Examples with some of these methods:
1) A button that calls a function that moves the window by 20 pixels horizontally and 8 pixels vertically.
- In Firefox, if the window is the maximum size (maximize), first will resize it.
<script type="text/javascript"><!--
function moveWin() {
  window.moveBy(20,8);     // move the window
}
--></script>
<button onclick="moveWin()">Move Win</button>
- You can test by clicking the fallowing button:

2) A button that calls a function that resizes the window to width 550 pixels and height 400 pixels.
<script type="text/javascript"><!--
function resizeWin() {
  window.resizeTo(550, 400);     // resize the window
}
--></script>
<button onclick="resizeWin()">Resize Win</button>
- You can test by clicking the fallowing button:

3) A button that calls a function that scrolls the window vertically, 50 pixels at each click.
<script type="text/javascript"><!--
function scrollWin() {
  window.scrollBy(0, -50);     // scrolls the window
}
--></script>
<button onclick="scrollWin()">Scroll Win</button>
- You can test by clicking the fallowing button:

4) Creates a button that calls a function that opens an URL (received as parameter) in a new window, with height=600 pixels and width=800 pixels.
<script type="text/javascript"><!--
function openWin(url) {
  window.open(url,'new_win','width=800,height=600');     // open new window
}
--></script>
<button onclick="openWin('http://coursesweb.net')">Open new Win</button>
- This example will display the fallowing button:

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Window Object

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (52265)
  2. Get the value of the selected /checked checkboxes in a form (23932)
  3. Zuma Deluxe (27238)
  4. Qwop (20723)
  5. JavaScript strip_tags and stripslashes (2385)

Popular pages this month

  1. Qwop (4729)
  2. Bubbles3 (4343)
  3. Butterfly Kyodai (3092)
  4. Zuma Deluxe (2869)
  5. Backgammon (1464)