Least Tern > Tech Class > Teacher Resources > Resources for Web Design
Open New Window JavaScripts
I. Control size of new window:
- This simple script should be added to the <head> of the page. The features in red are adjusted to control the size of the window. The first number is the width, the second number is the height. The properties in blue control the location of the window (it x and y in relation to the 0,0 of the upper left corner). Use the code to create a window that opens in response to a hyperlink. An example would be to provide a definition, footnote or text analysis. Because these are not pop-up windows, the action will not be blocked by pop-up blocking utilities.
Note: windows opened with these scripts can not closed using the Close Window script below - applying the Close Window link will close both browser windows! Hiding the various toolbars will not work in all browsers.<script>
self.resizeTo(100,200);
self.moveTo(x,y);
self.menubar.visible=false;
self.toolbar.visible=false;
self.locationbar.visible=false;
self.personalbar.visible=false;
self.scrollbars.visible=false;
self.statusbar.visible=false;
</script>- This code is for opening the new window from a hyperlink: Change the content in red. The hyperlink can be a graphic, of course.
<a href="newpage.html" target="_top">link content</a>
II. Pop-up Window with JavaScript A:
Click HERE to see script work
- Code for link to Open the pop-up: Place this where you want to the link to appear. Change the properties in red.
<a href="javascript:void(window.open('newpage.html','example','width=500, height=400, location=no, menubar=no, status=no, toolbar=yes, scrollbars=yes, resizable=yes, left=600,top=50'))">Link Text or Image src</a>
- Place the following code on the pop-up page to Close the popup:
<p><a href="javascript:void(window.close())">Close Window</a></p>
For a longer explanation of window properties, see WebClass. For another script to do the same thing, go to the Hover and Mouse Click Effects page.
Elizabeth Sky-McIlvain 1/19/04