|
How To Control How |
HOME > | HTML > | ADVANCED > | Windows |
By now you should be a dab hand at creating links. If you've followed our tutorials you should be able to create links that open in a new window using target="_blank"
However many sites have links to windows that open to a predetermined size, with or without controls or pop up (these popup window are called floating palettes and can be useful or can be a damn pain!!)
They rely on Event Handlers & JavaScript to create them (so remember they won't work on older browsers)
Lets begin with a simple example. Click on the form button below and another palette opens
Here is the HTML code
<form>
<p align="center"><input type="button" name="anythingyouwant"
value="Open Sesame"
onClick="window.open('test.htm','newwindow',
'width=200, height=200 ');">
</form>
The form set up you have seen before. But the onClick function is new. The key JavaScript command is window.open. This tells the browser to open up a file in a new window (here "test.htm" in a window with attributes set to a 200 pixel by 200 pixel size)
Notice how there is no scrollbar or menu controls. You can't adjust the size of the box either.
Technically you need to do this
'width=200, height=200, toolbar=no, menubar=no, location=no, directories=0, status=0,scrollbar=0,resize=0'
JavaScript recognises 1 & 0 as yes and no (but it will also recognise yes & no)
Luckily both Internet Explorer and Netscape recognise no(0) as a default. (toolbar to directories set various menu bars, then status sets the status bar at the bottom of the window. The scrollbar and resize are self explanatory we hope !!!)
Make sure you don't put in extra spaces
(e.g. scrollbars=0, status=yes) or the effect might not work (esp on Netscape)
Substitute your own target URL (we use test.htm here) and change the options as described earlier. You can also replace anythingyouwant, test.htm and newwindow with any values you want.
(We describe how to close down windows elsewhere)
A slight variation on this theme allowed you to have a window pop up on loading
To do this we added the onLoad attribute to the <body> tag
<body
onLoad="window.open('nav.htm',
'navwindow', 'width=480,height=100');">
The onLoad attribute tells the browser to do the following when the HTML document loads up
Here onLoad tells the browser to open a window for the URL (defined here as the file nav.htm) which the browser then knows as a window called navwindow (you can use your own name).
Okay !! That's the basics !!
But how about adding it to a more ordinary link item like a graphic or text
e.g.
or click here
So how did we do it. Here is the code for the <a> tag used for both
<a href="test.htm" target="newwin"
onClick="window.open('','newwin','width=200,height=200')>
(note the ,'', after window.open(
is actually two single apostrophies ,', not an inverted comma ,",)
Simply create a link to your target page (here test.htm). Add to this a name for a target (make sure it won't interfere with any frames elsewhere)
Now the sneekie bit !!!
The onClick attribute triggers the window.open JavaScript command as before. But notice how the first set of apostrophies has nothing in it. and the next set has your target frame name (here "newwin") this forces the browser to open a new blank palette window with a frame called newwin and load the href value page into it. (hey it works doesn't it !! - if you can do it better let us know !!!!)
