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 tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Window Object

Last accessed pages

  1. Mahjongg Alchemy (7934)
  2. Mouse Chain (428)
  3. Pagination Class - Script to paginate content (1435)
  4. Butterfly Kyodai (25093)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (54435)

Popular pages this month

  1. Bubbles3 (3397)
  2. Butterfly Kyodai (3013)
  3. Zuma Deluxe (2212)
  4. Qwop (1433)
  5. Backgammon (1307)