Ultra fast cheap  linux and windows hosting
javascript tutorial Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

javascript tutorial
buy template
Home >> Tutorials >> Advanced javascript tutorials

Jawvasript Windows examples:
 
opening new window closing new window creating full window
closing main window scrolling up window Browser checking
Page forwading Popup window examples Shaking window

Creating /Opening a new window
Q: How do I open a new browser window?
A: By using the window.open() method, you can open a new browser window.

The following script opens a new window named Window1 and loads window3.htm page.

<FORM NAME="testform">
<INPUT TYPE="button" VALUE="Open New Window"
onClick="NewWin=window.open('window3.htm','Window1',
'toolbar=yes,status=yes,width=400,height=200,scrollbars=yes,resizable=yes,menubar=yes'); ">
</form>

We can control the following properties of new window.
width       =number of pixels
height      =number of pixels
menubar     =yes|no
resizable   =yes|no
scrollbars  =yes|no
status      =yes|no
toolbar     =yes|no
directories = yes|no
location    = yes|no

Top




Closing windows

By using the window.close() method, you can close browser window.Since you want to close the newley created window follow the 2 steps.
1)Store the return value in the variable (in the above example 'NewWin')as a reference to your new window.
2)Use this reference to close this window (NewWin.close()). Following is the Javascrit example for closing the newly created window. After opening the new window, use 'close new window'

button to close the new window.

<FORM NAME="testform">
<INPUT TYPE="button" VALUE="Close New Window"
onClick="NewWin.close();" >
</form>
Top




Opening full windows
Open a new window in full screen mode. Menu bars and the status bar are disabled. To close this newly created window click Alt+F4

<script>
<!--
function openfullwin(){
window.open("button.htm","","fullscreen,scrollbars")
}
//-->
</script>
<form>
<input type="button" onClick="fullwin()" value="Open full window">
</form>

Top




 Closing the main window.

Following is the script for closing the main window.

<FORM NAME="testform">
<INPUT TYPE="button" VALUE="Close Main Window"
onClick="window.close();">
</FORM>
Top



Scrolling up window contents 

How it works ?
The object window has a property to scroll a page up or scroll down by x lines. For IE, this property can be accessed by
window.body.scrollTop. For Netscape, the scrolling position can be accessed by  window.pageYOffset.

Here's the logic behind the scroll:
1> ScrollWindowContents() is the function which does the scrolling. A timer is set to call the ScrollWindowContents() function repeatedly : <body border="0" onLoad="setInterval('ScrollWindowContents()',60)">

2> Have a boolean variable ToggleVariable  which toggles between 1 and 0. Also, keep 2 variables ScrollPosition1 and ScrollPosition2 that will keep track of window's current scroll position

3> Keep track of window's scroll position
For IE : window.body.scrollTop
For Netscape :  window.pageYOffset.

4> Increment window's scroll position by adding 1 and assign it to either ScrollPosition1 or ScrollPosition2 depending on the toggle variable. When end of page is reached, both ScrollPosition1 and ScrollPosition2  will be having same values. At this point, reset scroll position to 0 , which will bring back to top of the page.
 

Complete Source Code:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>Scroll Window Contents </title>
</head>
<body bordor="0" onLoad="setInterval('ScrollWindowContents()',60)">
<script language="JavaScript1.2">
var WindowPostion=0
var ToggleVariable=1
var ScrollPosition1=0
var ScrollPosition2=-1

function ScrollWindowContents(){
//Get window position from window property
if (navigator.appName == "Microsoft Internet Explorer")
// window position if browser is IE
WindowTopPosition=document.body.scrollTop
else
// window position if browser is Netscape
WindowTopPosition=window.pageYOffset

//Keep ToggleVariable switching between 1 and 0
if (ToggleVariable==0)
ToggleVariable=1
else
ToggleVariable=0

if (ToggleVariable==0)
ScrollPosition1=WindowTopPosition
else
ScrollPosition2=WindowTopPosition

// ScrollPostion1 will be equal to ScrollPosition2 when end of the page has been reached
if (ScrollPosition1!=ScrollPosition2){ // ScrollPostion1 NOT equal to ScrollPosition2, means more to scroll !
if (navigator.appName == "Microsoft Internet Explorer")
WindowPostion=document.body.scrollTop+1
else
WindowPostion=window.pageYOffset+1
window.scroll(0,WindowPostion)
}
else{
// ScrollPostion1 will be equal to ScrollPosition2 when end of the page has been reached
WindowPostion=0
window.scroll(0,WindowPostion)
}
}
 

</script>
Paragraph 1:<BR>
Line 1
<BR>
Line 2
<BR>
Line 3
<BR>
Line 4
<BR>
Line 5

<BR><BR><BR><BR><BR><BR>
Paragraph 2:<BR>
Line 1
<BR>
Line 2
<BR>
Line 3
<BR>
Line 4
<BR>
Line 5
 

<BR><BR><BR><BR><BR><BR>
Paragraph 3:<BR>
Line 1
<BR>
Line 2
<BR>
Line 3
<BR>
Line 4
<BR>
Line 5

<BR><BR><BR><BR><BR><BR>
Paragraph 4:<BR>
Line 1
<BR>
Line 2
<BR>
Line 3
<BR>
Line 4
<BR>
Line 5
 
 

<BR><BR><BR><BR><BR><BR>
Paragraph 5:<BR>
Line 1
<BR>
Line 2
<BR>
Line 3
<BR>
Line 4
<BR>
Line 5
 
 
 
 
 

</body>
</html>
 

Top



 

Page contents: itechies.net - Learn how to Open new window, close the new window, create full window, close main window, scrolling up window, open pop up onload and more using javascript.
javascript tutorial
javascript book
Buy this book