Jawvasript Windows examples:
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
