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 adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Window Object

Last accessed pages

  1. Create simple Website with PHP (12453)
  2. Dream Fruit Farm (273)
  3. Mahjongg Alchemy (3348)
  4. Zuma Deluxe (19375)
  5. Qwop (8220)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (49383)
  2. Read Excel file data in PHP - PhpExcelReader (37738)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (36753)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (33179)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (30548)