JavaScript Tips

MOVING AND RESIZING WINDOW

The browser window is an object in JavaScript. The window can be moved by using "windowObject.moveTo(x, y)," Where windowObject is the window that you wish to move, and x and y is the new coordinate for the window. The unit for x and y is pixel.

THE CURRENT WINDOW
The current window (where the JavaScript code is located) is called "window" or "self" or "this." If you're referring to the current window, the windowObject can even be omitted. Here are some examples of moving the current window (you can click on each one to move the current window):

javascript: window.moveTo(100,100);
javascript: self.moveTo(200,200);
javascript: this.moveTo(100,100);
javascript: moveTo(300,300);

Or try this interactive mode below:

to X= and Y=

Note: Not that I recommend doing this, but on Internet Explorer 6 (and maybe other version), you can move the window outside the screen with a negative number.

To resize window, use "resizeTo(newWidth, newHeight)." Example:
javascript:window.resizeTo(500,300);

ANOTHER WINDOW
To move another window, you need to set the windowObject in windowObject.moveTo(x, y) with the window that you wish to move. Normally, you'll have this object when you're opening a new window with window.open().

Example:
Run this code to open a new window:
javascript: tutorialWindow=window.open('http://www.permadi.com', 'myNewWindow');

That code opens a new window object which is called "tutorialWindow." Now you can resize that window like this:
javascript: tutorialWindow.moveTo(200,200);

Note: you cannot move or resize window that has contents from different domain.  Ie: If your page is at a.com, and you open a window and put the content of b.com, then you won't be able to do much with that window.

SHOWING DATE

You can print the current date using Date() function. Put this code where you want the date to appear:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
An example is shown below:

Note that the result might not look the same on all browsers.
This is how it looks like on Internet Explorer 6:

This is how it looks like on Netscape 4.8

This is how it looks like on Netscape 7.1:

PRINTING MONTH, DAY, OR YEAR
To do this, we need to create a Date object instead of invoking the Date() function.
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
Now we have 4 variables: month, day, year, and date.
This is an example of the output value for today:

month=
date=
year=
day=

All the values are numbers. date refers to the date of the month. day refers to the day of the week, where the value of 0 means Sunday, 1 means Monday, up to 6 (Saturday).  Similarly, for the month, the value of 0 means January, 2 means February, up to 11 (December).
If you want to print the name of the day, you'll need to write a code that takes the "day" value and somehow associate that value with the day name. For example:

if (day==0) dayName="Sunday"; else if (day==2) dayName="Monday";

// and so on
However, it would be more elegant to use the value day as an index of an array which contains the name of the day like below:
  var dayNameArray=new Array("Sunday", "Monday", 
     "Tuesday", "Wednesday", "Thursday", "Friday");
  var dayName=dayNameArray[day];
Today is:
You can do the same for month names.

TRIGGERING AN ACTION AFTER A SPECIFIED TIME

You can trigger an action after a specified time by using the "setTimeout" function in JavaScript. The format is as follows: setTimeout(code, numberOfMilliseconds), where:

code is the code to be executed (it can be an actual code or a function call).

numberOfMilliseconds is the number of milliseconds to before the code is executed. (1 second=1000 milliseconds)
Example1: Timeout calling a function:
function timeout1()
{
  alert("timeout1");
}
setTimeout("timeout1", 5000);
Run it.
Example2: Timeout calling a piece of code:
setTimeout("alert('timeout2')", 5000);
Run it
Example3: Timeout calling a function with parameter:
Enter parameter:
function timeout3(param)
{
  alert(param);
}
// calls function "timeout3" with parameter
function timeoutWithFuncParam(param)
{
  setTimeout("timeout3("+param+")", 5000);
}
Run it
Notice the way the function or the code is passed: as string.

<< MORE TUTORIALS >>