Home >> Tutorials >> Javascript tutorials

opening new windowclosing new windowcreating full window
closing main windowscrolling up windowBrowser checking
Page forwadingPopup window examplesShaking 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('http://www.itechies.net/tutorial_images/jscript/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|noTop 


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 position3> 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=-1function 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=0if (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 – Windows