Javascript pop up windows tutorial. Open windows with javascript

  :: Home

PC Topics

  :: Build A PC

  :: Windows XP

  :: PC Help

Tutorials

  :: HTML

  :: JavaScript

  :: ASP

  :: PHP

  :: VBScript

  :: SQL

Miscellaneous

  :: Code/Scripts

  :: Forum

  :: Links

  :: Contact us

  :: Tell A Friend

  :: In Somali

  ::

Web Articles

Top Web Hosting
Reviews

Processing
Online Card Payment Guide

Domain name
registration & buying guide

Getting
a website online guide

Search Engine
submission & optimization tips

Quality business correspondence.

Window object refers to the browser and all the items you can see within it. This lecture explains objects to create pop-up window and properties and methods available. As we all ready explained, properties are sub- objects which is part of another object and methods are ways to do things. Javascript window object properties could be some thing like window name, size, address, etc. Javascript window object methods are things like open, close, scroll, move, resize, alert, etc.
The least you could have for window is open a blank window. Here is how you open a blank window:
window.open()
This opens blank window and uses all the default settings. The best way to display a window with particular size, color, menus, toolbars, objects, etc is to create a function and call it when a link or object is clicked or onload event.
The following example is pop-up window that displays another web site in smaller window:

<html>
<head>
<SCRIPT LANGUAGE="javascript">
function windowE()
{
window.open('http://anylists.com/','winE', 'height=400,width=650,toolbar=no')
}
</SCRIPT>
</head>
<body>
<A HREF="javascript:windowE()" >Click here</A>
</form>
</body>
</html>
We just created a pop-up window with, height of 400 pixels wide and width of 650 pixels. It displays the web site www.anylists.com. The name of the window is winE and it will not display a toolbar because we set the toolbar to no. This window is created in function. The only thing appears when this page loads is "click here" in link. This link calls the function that creates the window.
Here is the result: Click here
The syntax to remember when creating pop-up window is
window.open("url", "windowName", "windowAttributes"). URL you can specify any url, local or foreign. Without a url, blank window will be display.
WindowName is the name of the object.
WindowAttributes are arguments available such as toolbar, status bar, scrollbars, etc.
Here are list of attributes you can use to customize your pop-up window:

width height toolbar

location directories status

scrollbars resizable menubar

The following example uses all the attributes listed above:
<html>
<head>
<script type="text/javascript">
function openwindow()
{
window.open("http://www.sitetofind.com/","WinC", "toolbar=no,location=no,directories=no, status=no,menubar=no,scrollbars=no,resizable=no, copyhistory=no,width=400,height=400")
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window"onclick="openwindow()">
</form>
</body>
</html>
Again this window display web site and sets all attributs to no, which means this window will not display any of those named attributes. Another thing to note is, we using button to call the function that creates the window.
Bellow is the result of this example. Click to view it.

The following complete list of properties and methods available for window objects.
Property Description Syntax

Closed Returns boolean value to determine if a window has been closed window.closed

defaultStatus Defines the default message displayed in a window's status bar window.defaultStatus(="message")

document Defines the document to displayed in a window window.document

frames Returns an array containing references to all the named child frames in the current window window.frames(="frameId")

history Returns the history list of visited URLs window.history

innerHeight Returns the height of the window's display area window.innerHeight = value

innerWidth Returns the width of the window's display area window.innerWidth = value

length Returns the number of frames in the window window.length

location The URL loaded into the window window.location

locationbar Windows location bar. It has the property visible. window.locationbar.visible=false

menubar Windows menu bar. Alos has visible property. window.menubar.visible=false

name Sets or returns window's name window.name

opener The name of the window that opened the current window window.opener

outerHeight Returns the height of the outer area of the window window.outerHeight

outerWidth Returns the width of the outer area of the window window.outerWidth

pageXOffset Return the X-coordinate of the current window window.pageXOffset

pageYOffset Return the Y-coordinate of the current window window.pageYOffset

parent The name of the window containing this particular window window.parent

personalbar Returns boolean value indicating the visibility of the directories bar window.personalbar.visible=false

scrollbars Returns boolean value indicating the visibility of the scrollbars bar window.scrollbars.visible=false

self Refers to current window self.method

status The message displayed in the window's status bar window.method="message"

statusbar Returns boolean value indicating visibility of the status bar window.statusbar.visible=false

toolbar Returns boolean value indicating visibility of the tool bar window.toolbar.visible=false

top Returns the name of topmost window window.top

window Returns the current window window.[property]or[method]

Method Description Syntax

alert(message) Displays text string on a dialog box alert("Type message here")

back() Loads the previous page in the window window.back()

blur() Removes the focus from the window window.blur()

captureEvents() Sets the window to capture all events of a specified type window.captureEvent(eventType)

clearTimeout() Clears the timeout, set with the setTimeout method window.clearTimeout(timeoutID)

close() Closes the window window.close()

confirm(message) Displays a confirmation dialog box with the text message confirm("type message here")

disableExternalCapture/
enableExternalCapture Enables/disables external event capturing window.disableExternalCapture( )/
window.enableExternalCapture( )

focus() Gives focus to the window window.focus()

forward() Loads the next page in the window window.forward()

handleEvent(event) Invokes the event handler for the specified event window.handleEvent(eventID)

moveBy(horizontal, vertical) Moves the window by the specified amount in the horizontal and vertical direction window.moveBy(HorValue, VerValue)

moveTo(x, y) This method moves the window's left edge and top edge to the specified x and y co-ordinates moveTo(Xposition,Yposition)

open() Opens a window window.open(url, name, attributes)

print() Displays the print dialog box window.print()

prompt(message,defaultValue) Displays prompt dialog box window.prompt("type message here",value)

releaseEvents(event) Release any captured events of the specified type window.releaseEvents(eventType)

resizeBy(horizantal, vertical) Resizes the window by the specified amount window.resizeBy(HorVoue,VerValue)

resizeTo(width,height) Resizes the window to the specified width and height window.resizeTo(widthValue,heightValue)

scroll(x, y) Scrolls the window to the supplied co-ordinates window.scroll(xVlue,yValue)

scrollBy(x, y) Scrolls the window's content area by the specified number of pixels window.scrollBy(HorVlue,VerValue)

scrollTo(x, y) Scrolls the window's content area by the specified number of cordinates window.scrollTo(xVlue,yValue)

setInterval(expression, time) Evaluates the expression every time milliseconds window.setIntervals(expression,milliseconds)

stop() Stops the windows from loading window.stop()

String, Date, & Array objects

Home

Your Ad Here

Listed @ ConsumerVote.com - The Consumer Rated Web Directory

PC Articles

Computer Safety
prevent viruses & Spyware