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 can be used to add CSS styles directly in the HTML tag?
type style class
<div style="width: 80%; border: 3px solid #888888;">Content</div>
Which CSS transform method distorts the HTML element in a given angle (including its content)?
translate() scale() skew()
#some_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
}
Click on the function which converts a Date object to a string.
indexOf() toString() getDate()
var rightnow = new Date();
alert( rightnow.toString() );
Which function applies a callback function to the elements of the given array?
array_merge() array_search() array_map()
$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// apply the strip_tags() function to delete HTML tags from each array item
$arr = array_map("strip_tags", $arr);
}
Window Object

Last accessed pages

  1. Mahjong Games (17769)
  2. Get Lower, Higher, and Closest Number (1574)
  3. Mahjong Long (687)
  4. jQuery ajax() method (13416)
  5. SHA512 Encrypt hash in JavaScript (7775)

Popular pages this month

  1. Qwop (3030)
  2. Drag Racer V3 (1516)
  3. Bubbles3 (727)
  4. Flash Games - Free online Games (677)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (665)