- JavaScript
Although it is possible to open new windows using HTML, the most
effective way to create pop up windows that will allow you the
most control
of your windows is by way of JavaScript. The window is the most
important interface element in a web browser and JavaScript will
provide you
with many tools to manipulate windows.
- First some basics
In order to use JavaScript you must treat it
a little differently than HTML. All your JavaScript functions are put
within your <HEAD> tag
and oddly enough commented out! This is so older browsers that
do not know about JavaScript can blithely ignore JavaScript and go
about
its archaic business of pounding two rocks together. Modern browsers
know that JavaScript is commented out and take this into account.
Remember, all JavaScript starts out with these statements in the <HEAD> tag:
<
SCRIPT LANGUAGE = "JavaScript" type="text/javascript">
< !--
JavaScript function definitions within a commented area
/ / -->
< /SCRIPT>
The rest of the function calls go within the <BODY> tag.
Got it?
- Browser window elements
Some of the important browser window elements that can be accessed
are shown in Figure 1 below. The names in this figure correspond
to the parameters you can apply in the open() command.
You can create windows that can have any combination of the listed
parts.
Figure 1
- Lets open a window!
Here is the code in the <HEAD> I am using
to open a window:
< HEAD>
<
SCRIPT LANGUAGE="JavaScript" type="text/javascript>
< !-- Begin
function firstWindow() {
ElementWindow = window.open('images/WindowElements.gif',
'FirstWin','width=502,height=325')
}
// End -->
< /SCRIPT>
< /HEAD>
... and in the body of the code:
<
BODY bgcolor="#FFFFFF" text="#000000">
<
a href="javascript:firstWindow()">Click to open the popup
window!</a>
< /BODY>
Click to open the popup window!
- What the @#$%^&*! does all that
code mean?
<
SCRIPT LANGUAGE="JavaScript" type="text/javascript> This
is where you told the browser you were going to use JavaScript
and all that followed
in the
script tag was to be interpreted as such.
function firstWindow() This
is a function declaration. You make this code run just by
using it's name, firstWindow(),
in an HTML
statement
later on. All the code in a function is between the "{" (left
curly bracket) and the "}" (right curly bracket).
ElementWindow = An
ad hoc variable has an open window object assigned to it
just now by you, this is just a way to invoke
an instance
of the window object. This name can be anything except a
reserved JavaScript
keyword so you can call it most anything, call it "CowPie" and
see if I care.
window.open() In
object oriented programming "window" is
an object and "open" is a method. This will not be on the
test so forget I mentioned it. The "open" method is the interesting
part of this because depending on the different parameters or properties
(the list of goodies between the parenthesis separated with comas)
you can make the window you open appear differently. There are 3 parameters.
In the above code the first parameter was the GIF file I wanted to
display. In the second parameter I gave the window a distinct name
of my own choosing so that it can be referred to by name later (which
I don't do). The third parameter is a shopping list of all the window
elements as shown in figure 1. I've already shown you the width and
height parameters. If you want scrollbars then use the scrollbar element
in the third parameter in the form of 'scrollbars=yes',
if you don't want scrollbars then don't mention them or use "=no",
the same follows for the other elements in Figure 1. You
can use any combination
in any order you want, for example the line of code can read:
WinOp = window.open('graph.gif','GraphWin','width=502,
height=325,resizable=yes,status=yes,toolbar=yes')
(code should all be on one line)
...giving you a window of a specific size that is resizable,
has a status area and toolbars. Note that each of the 3 parameters
is enclosed
in single quotes.
<
A HREF="javascript:firstWindow()">Click
to open the popup window!</A> This is the actual function call
and an example of how you include it in an anchor tag.
- Some head slappers and dog kickers
JavaScript is case sensitive. Make sure you spell words with capitalization
exactly the same each time. Also pay attention to the lack
of or the occurrence of spaces in the code used here. For instance
just
the inclusion of a space after the coma in the width and
height
parameters ('width=502, height=325')
will cause them to be ignored by Netscape
Navigator and the window will open to a default size. If
you are having problems with a window element not working correctly
stop
kicking your dog and screaming at your spouse and instead
check
your spelling, case and spacing.
Netscape Navigator and Internet Explorer display windows slightly
differently. You will notice that declaring the height and
width of graphic a graphic
will give you a different result depending on your browser.
Navigator will chop off a portion of the right and bottom of
your graphic.
Explorer will leave extra space for what looks like would
be your scrollbars
even though you may not have specified them. Further, specifying
scrollbars does not necessarily mean you will see them if
the graphic width and
height is smaller than the window.
Be very aware that the two browsers can display identical code
in very different ways and you should check both browsers to
see how they will
display your work. Some features will not work on certain versions
of browsers. On second thought... give that damn dog a kick
for me!
- HEY! Close that window!
Just as you learned how to open a window you must learn to close
a window. To open a window, we will just reuse the above function
code with some changes to it and add a new link to it. Here is
the
new
code to close the window:
< HEAD>
<
SCRIPT LANGUAGE="JavaScript" type="text/javascript>
< !-- Begin
function closeFirstWindow() {
ElementWindow.close()
}
// End -->
< /SCRIPT>
< /HEAD>
... and in the body of the code:
<
BODY bgcolor="#FFFFFF" text="#000000">
<
A HREF="javascript:closeFirstWindow()">close the window</A>
< /BODY>
Open the window and close
the window. Cool eh? The important thing
here is to use the name you gave the window, in this case we called
it, "ElementWindow". For a more effective use of JavaScript
to close a window, go to the Photo
Album page and click on a link to
a photo. You will see a "Close This Dang Window" graphic.
JavaScript makes that graphic an interactive button by adding an anchor
to the image thusly: <A HREF='javascript:window.close()'><IMG
SRC ='../Images/CloseWindow.gif'</A>.
Disregarding the name the window was created with, this command
specifies that the window
that
has the focus, the window on top, will be closed by default. This JavaScript does not need to be in a commented section of code because,
if they
didn't have JavaScript enabled, they never would have been able
to navagate to the button... right?
Barbara Simon wrote in to tell me that she gets an error using
ElementWindow.close() and suggests
that if the same is happening to you, you should try replacing
that code with ElementWindow = window.close().
Thank you Barbara!
- Scrolling a window
You can create a popup window that is scrolled down and/or over to
a relevant part of a window, such as a location on a large map.
Try this out:
Here is the code in the <HEAD> I
am using to open a window:
< HEAD>
<
SCRIPT LANGUAGE="JavaScript" type="text/javascript>
< !-- Begin
function scrolledWindow() {
ElementWindow2 = window.open('images/WindowElements.gif','secWin',
'width=100,height=100,scrollbars=yes')
The above line was broken in two for display purposes
only!
setTimeout('ElementWindow2.scroll(150,150)',1000)
}
// End -->
< /SCRIPT>
< /HEAD>
... and in the body of the code:
<
BODY bgcolor="#FFFFFF" text="#000000">
<
A HREF="javascript:scrolledWindow()">Click to open the
scrolled popup window!</A>
< /BODY>
Click to open the scrolled popup window!
You will notice the addition of the setTimeout command
in the function scrolledWindow. This delays the scrolling by 1000 milliseconds
(one second) in order to allow the window to be created first, thereby
guaranteeing that there is a window in existence to be scrolled. Makes sense
right?
The scroll method has parameters of objectName.scroll(horizontal
scrollbar pixels,vertical scrollbar pixels). In this
example I made the window very small and scrolled to the portion of Figure
1 that had the
word "scrollbars".
- Some scrolling tips:
Unlike Netscape, Explorer can't scroll a window if the window contains
a URL from another server. You can only scroll content on
your machine with Explorer.
You can only scroll windows with Navigator V3.0 or higher,
or Explorer V3.0 or higher.
- Bringing your JavaScript popup windows to the front
If you have more than one window displayed, you can control which
window shows up in front of the others. I have used the functions
below
in the body tag and the function calls in the anchor tag to bring
up two windows and to control which of them is displayed in the
front. Experiment with the links and get a feel for it.
< HEAD>
<
SCRIPT LANGUAGE="JavaScript" type="text/javascript>
< !-- Begin
function Figure1Window() {
Fig1Window = window.open('images/WindowElements.gif',
'Fig1Win','width=525,height=350')
The above line was broken in two for display purposes
only!
}
function blatherWindow() {
BlatherWin = window.open('Blather.html','yakyak','
width=200,height=200,scrollbars=yes,resizable=yes')
The above line was broken in two for display
purposes only!
}
function FigureToFront() {
Fig1Window.focus()
}
function BlatherToFront() {
BlatherWin.focus()
}
// End -->
< /SCRIPT>
< /HEAD>
<
BODY bgcolor="#FFFFFF" text="#000000">
<
A HREF="javascript:Figure1Window()">Click to open the
Figure 1 window!</A><BR>
<
A HREF="javascript:blatherWindow()">Click to open the
explanation of Figure 1 window!</A><BR>
<
A HREF="javascript:FigureToFront()">Click to bring the
Figure 1 window to the front!</A><BR>
<
A HREF="javascript:BlatherToFront()">Click to bring the
explanation of Figure 1 window to the front!</A><BR>
< /BODY>
Click to open the Figure 1 window!
Click to open the explanation of Figure 1 window!
Click to bring the Figure 1 window to the front!
Click to bring the explanation of Figure 1 window to the front!
And yes, I loaded an HTML document into the window so put that in your
tool belt and smoke it! There is a command that you can use that
is the opposite of focus() and will push the
window to the very back of the other windows and that is the blur() command.
We are quite
the window gods eh?
- Creating ad hoc pages and filling them with HTML
OK, prepare to get dangerous! In the above example I loaded an HTML
document into a new browser window, but you can do that on the
fly without having a preexisting HTML file to work with. You can
use
JavaScript to open a new document and write HTML into the document
right before your eyes. Here is how:
< HEAD>
<
SCRIPT LANGUAGE="JavaScript" type="text/javascript>
< !-- Begin
newWindow = window.open('','newWin','toolbar=yes,location=yes,
scrollbars=yes,status=yes,width=630,height=400')
The above line was broken in two for display purposes
only!
newWindow.document.write
("<HTML>
< HEAD>
<
TITLE>New Page From the Ozone!</TITLE>
< /HEAD>
< BODY bgcolor='#FFFFFF' text='#000000' background='../Images/RoughGrey.gif'>
< DIV ALIGN='center'>
<
H1><font color='#990000'>This is pretty cool stuff!</font></H1>
< IMG SRC='../Images/HouseOfWacks.jpg' width='535' height='268'>
< /DIV>
< /BODY>
<
/HTML> ")
newWindow.document.close
// End -->
< /SCRIPT>
< /HEAD>
Click to run the above code!
The way I wrote the code was to put it into a function
(something I don't show in the code above) and put the function call into the
above anchor. If I didn't do that then the code as written above would automatically
run when the page loaded and for the purposes of this tutorial
would have been confusing to a viewer. As it is now, you have just seen
two
ways to run the code. By the way, pay attention to how the single
quotes are nested withing the double quotes in the document.write code. Also
of use is the newWindow.document.writeln("") statement.
Experiment. Big heads up: Do as I say not as I
do... In the code above I have the
HTML formatted to look nice so you can see what I was telling JavaScript
to do. Keep in mind that carriage returns mean things to JavaScript.
When you write the above code, the parameters to the newWindow.document.write
method are all one line. It would actually look like this (the
table the code resides in is forcing returns):
newWindow.document.write ("<HTML> <HEAD> <TITLE>New
Page From the Ozone!</TITLE> </HEAD> <BODY bgcolor='#FFFFFF'
text='#000000' background='../Images/RoughGrey.gif'> <DIV ALIGN='center'> <H1><font
color='#990000'>This is pretty cool stuff!</font></H1> <IMG
SRC='../Images/HouseOfWacks.jpg' width='535' height='268'> </DIV> </BODY> </HTML> ")
For a working example of the usefullness
of ad hoc pages check out the Photo
Album page. You will see how
every new page is created
from the same code (a function called "newPhotoWindow()" in
the <HEAD> tag)
that is accessed in the anchor tags of the photos. By reusing the
same code for each photo page, I am able to produce 45 web pages
while using
up only 7K of disk space! Don't be afraid of using functions. I
am able to make each page unique by sending the newPhotoWindow() function
new parameters each time I call it and plugging the values of those
parameters into the HTML code that the function writes to the ad
hoc page it is creating. For example let's simplify that function
call
to make the page the same except for the graphic it displays.
The function call in the link would look like this:
<
A HREF="javascript:newPhotoWindow('../path/Photo1.jpg')">Me
getting pantsed again</A>
The function would look something like this:
function newPhotoWindow(PhotoLocation){
newWindow = window.open('','newWin','scrollbars=yes,width=630,height=400')
newWindow.document.write
("<HTML>
< HEAD>
<
TITLE>Pantsed Again!</TITLE>
< /HEAD>
< BODY bgcolor='#FFFFFF' text='#000000'>
< DIV ALIGN='center'>
<
IMG SRC=" + PhotoLocation + "width='535' height='268'>
< /DIV>
< /BODY>
<
/HTML> ")
newWindow.document.close
}
The value of "../path/Photo1.jpg" was passed to the function
newPhotoWindow inside the variable
named "PhotoLocation" and
then plugged into the HTML code it was creating just by referencing
it's variable name. When the browser creates the new page it will read
the <IMG> tag and the information
you plugged in as "<IMG
SRC ='../Photo1.jpg' width='535' height='268'>", pretty
cool eh? Big heads up: Do as I say not as I do... In the code above
I
have the HTML formatted to look nice so you can see what I was
telling JavaScript
to do. Keep in mind that carriage returns mean things to JavaScript.
When you write the above code, the parameters to the newWindow.document.write
method are all one line. It would actually look like this (the
table the code resides in is forcing returns):
newWindow.document.write ("<HTML> <HEAD> <TITLE>Pantsed
Again!</TITLE> </HEAD> <BODY bgcolor='#FFFFFF' text='#000000'> <DIV
ALIGN='center'> <IMG SRC=" + PhotoLocation + "width='535'
height='268'> </DIV> </BODY> </HTML> ")
- Positioning windows
You will on occasion want to position a popup
window on the users screen. You can do this with the "left" and "top" parameters
in the window.open properties. If left is zero the window rests
against the left of the users screen. If top is zero it rests
against the
top of the users screen. By increasing the value of left and
top you move the window by the corresponding pixels. Here is a
function
that will put the window in the top left corner of the users
screen.
function centerWindow() {
ElementWindow = window.open('images/WindowElements.gif',
'ElementWin','width=502,height=325,left=0,top=0')
The above line was broken in two for display
purposes only!
}
Here is the link that would call the above function.
<
a href="javascript:centerWindow()">Click to display the
Figure 1 window on the upper left!</a>
Below I have created a function that will open the Figure 1 window
and position it wherever I want within the link by passing it values
via the function call itself in the link. I name these values leftPos
and topPos, note below where I add them to the function name and
then plug them into the window.open properties:
function centerWindow(leftPos, topPos) {
ElementWindow = window.open('images/WindowElements.gif','ElementWin',
'width=502,height=325,left='+leftPos+',top='+topPos)
The above line was broken in two for display
purposes only!
}
The link itself looks like this, you can see the top and left parameters
it is passing are each set to 100
<
a href="javascript:centerWindow(100,100)">Click to center
the Figure 1 window!</a>
Go ahead, click on the link below and try it out.
Click to center the Figure 1 window!
At this point you are probably asking yourself, "How the monkey's
knuckles do know how freakin' big the stupid users poly puckering screen
IS if I fricken' really want to fraggin' center his slag nasty window?!?!" Well
first off, gosh you really shouldn't talk to yourself like that - OR
think out loud like that in public. Get a grip. Go get a drink of water.
I'll wait....... Back? Calmed down? OK, man I don't know what brought
that on but hey I was getting to the point right when you went off
on me. If the user has version 4.0 or later of Netscape Navigator or
Internet Explorer then JavaScript can determine how big the users screen
is using the "screen" object and you can do a calculation
based on how big your popup window is then paste that popup right
smack in the middle of his screen. Here is what the function will
look like:
function reallyCenterWindow() {
leftPos = 0
topPos = 0
if (screen) {
leftPos = (screen.width / 2) - 251
topPos = (screen.height / 2) - 162
}
ElementWindow = window.open('images/WindowElements.gif','ElementWin',
'width=502,height=325,left='+leftPos+',top='+topPos)
The above line was broken in two for display
purposes only!
}
There are some important elements in this function
you need to get a handle on. I gave leftPos and topPos a value of
zero in case
the
browser can't handle the screen object, that way a null value or
previously used value is not passed to the window.open statement.
Next I put the
calculation of leftPos and topPos in an "if statement" so
that the browser would not spit up and die if it was a version
of browser that did not recognize the screen object. Now any browser
can run this
with out complaining, however it will not center in a browser older
than version 4.0 in NS and IE.
The calculation finds the width of the screen resolution in number
of pixels and divides this in two, giving you the horizontal center
of screen. If you plunked this number into the window.open method,
your popup would be too far to the right. You need to take half
the number of pixels wide your popup window is, in this case 251,
and
subtract that from the horizontal vertical of the screen. That
would put as
many pixels on the right of your popup as there are on the left
of your popup. Repeat the process for the vertical center of the
screen.
You are now centered no matter what the screen resolution the users
computer monitor is set to.
The function call within the anchor is simple on this one:
<
a href="javascript:reallyCenterWindow()">Click to really
center the Figure 1 window!</a>
Go ahead and try it out by clicking on the link below:
Click to really center the Figure 1 window!
- Displaying alerts
You can display a message to your users when they load or reload
a page. This is an easy one.
< BODY>
onload="alert('Warning: This page contains content of an adult
nature... links to laxative sites.')"
< /BODY>
Notice the quotes. Try it out, this
link will bring up
a page that uses the "onload" command (there
is also its evil twin "onUnload").
Alert boxes are modal meaning all computer processing grinds to
a halt until the user click on the dang "OK" button.
These can be annoying and interruptive, so use them with caution.
You may
find this
command to be more helpful to you than to your users as you can
display any JavaScript object with it. Try it out when you need
to debug
some pesky JavaScript. Finally, there is no way to change the text
in the
titlebar that says it was generated by JavaScript. In older browsers
this text is elsewhere in the window. This is a security precaution
to help keep morally bankrupt scripters from fooling unsuspecting
users into entering passwords or other personal information. That's
not you...
RIGHT?!?!
- Take a cold shower
Now would be a good time to go take a cold
shower. I can tell you are way too excited about all this JavaScript
window control.
There is
a huge downside to this. If a user has an old browser that
does not support JavaScript or even a modern browser with JavaScript
disabled
then all this fancy dancy stuff you are coding will only
make
tighter and tighter coils as it spirals down the drain of your
toilet. In
other words, if you use JavaScript window control, you must
also offer a method of achieving the same goals to your users
without
JavaScript. Also, one last thing... don't be annoying. Too
much of this junk is just plain annoying. There are lots and
lots of
very
sane people who will totally go off on you if you start launching
all sorts of windows when they open or close a web document.
Be careful and go easy!
A word about the onload() and onUnload() functions.
Give people a break, when they arrive at your site they do not want
to have to swat down
a bunch of windows they don't care about, especially advertising.
If you are going to use onload() then
do it only if there is no other way
to do
this
such
as;
you have
detected that they do not have a browser or a plugin that will display
your page. That sort of thing, but unless your page will not display
at all, just tell the visitor on your web page that such and such is
required for to access the content of your site. When someone is ready
to leave your site he just wants to go. He does not want a bunch of
freaking onUnload() windows
barring his way out. I get angry when someone does that, just let me
the hell out
of here you grit eating pencil neck!! Use this one only in the spirit
of "wait, you left your hat!", something helpful. These two functions
are the most unfriendly and overused JavaScript functions on the net
and
people
will avoid
you if you use it on them.
- Final Word
You are better off copying code out of the
page source rather than copying it off of the surface of the web
browsers displayed page.
Some line breaks in the code have been forced to allow for formatting
the print on the page.
I tried to warn you in places I found them but I'm sure I missed
some. This will mess you up, this will rip your lips off and duct
tape
them
to your butt, this will grind it's jack boots of JavaScript oppression
into your bleeding face. So don't come crying to me... unless you
are young and pretty. You men out there, you don't cry right?
You have a lot of new JavaScript tools
here to mix and match with. Experiment,
be
brave,
have fun, make me
proud.
|
| Scrolling Windows | Scrolling Tips |
Bringing Windows to the Front | Ad Hoc Windows | Positioning Windows | Displaying Alerts | Cold Shower | Final Word
