| Java menu knowledge base
Pop-up windows
Making pop-up windows
A pop-up browser window is not the same as a pop-up or drop-down
menu applet! Pop-up and drop-down menus are easy to use and
you can look at some here. Read on only if you
are interested in making a pop-up browser window for putting your navigation
menu into.
This support section tells you (i) why you should not use pop-up
windows, and (ii) how to start doing it if you really have to.
1. Why you shouldn't use pop-up windows
The fatal attraction of pop-up windows is the fact that they don't
take any of your precious web page space away. You'd hope that they'd
just hover around the place, staying away when not needed, but always
there when in fact needed. You, as web designer, of course know how they
work, and to you it seems simple enough to operate the pop-up window.
So try watching a lot of fairly naive internet users using them as well.
Odds are that as soon as they click on anything on your web page,
the pop-up window will disappear to the back of the current window
system, and will never be found again.
An advanced script-writer should be able to find a number of ways
of bringing a pop-up window back to the front automatically. Such
scripts may nevertheless begin to interfere with the smooth operation
of the rest of the site.
It is almost impossible to strike a harmonious balance between ensuring
that a pop-up window doesn't get lost and that it doesn't
get in the way.
2. Things to think about if you do pop-up windows
So now you've decided to take the great step and do them? Well,
we warned you. But now we'll try to help - but don't blame us
if you end up with virtual egg on your face.
Things to watch out for:
The pop-up window may get lost behind other windows.
If you force the pop-up window to the front, most methods of doing
this will make it almost impossible to work or interact with the main pages;
the worst-case scenario is that your force-to-front script completely
disables the OS interface.
You must provide the user with a method to deactivate the pop-up window -
permanently, terminally. It is their right.
You must provide the user with a method to reactivate the pop-up window -
don't just rely on an automatic method.
If you have an applet in a pop-up window, it may have difficulty targeting
pages into the launching window.
3. Making the pop-up window - the easy bit
Making a pop-up window is easy. Making a good pop-up
window is only something for real experts. This is the easy bit.
First write this at the top of your page:
<SCRIPT LANGUAGE="JavaScript">
function pop()
{
menuWindow = window.open("menu.htm", "menu", "resizable=no,scrollbar=no,top=0,left=0,width=180,height=360");
}
</SCRIPT>
The various arguments in the window.open() command can be used to
position the window on the screen and control its behaviour. The
file menu.htm would be loaded into this window.
Then make a big clear link or button marked 'launch menu'. The following
code makes the pop-up menu launch on mouse-over, but you can change this
to mouse-click if you like.
<a href="#null" onMouseOver="javascript:pop()">Launch Menu</A>
4. What to do when the pop-up window gets pushed back
Your first reaction might be to say "let's get it back to the front!".
The problem is that if you drag the window back to the front immediately,
you are forgetting why the window lost focus in the first place. It
lost focus because of a user action - perhaps the user is scrolling or
entering data in a form field, or accessing another application. If you
drag the pop-up window back to the front, it will remove the focus
from whatever screen element the user was interacting with. And that
will justifiably infuriate the user and entitle them to designate
your website "aggressive". You must allow the user to choose which
elements to interact with.
On the other hand, if your window remains unfocussed at the back,
any attempt to re-open it with "window.open(...)" will fail, because
it is open already - just not at the front. If you are ever
going to have any hope of getting that window under control again,
the one thing you must now do is close it. A re-open will
then ensure it opens at the front.
To do
the auto-closer, you must write the following into the BODY tag of
menu.htm:
<BODY onBlur()="javascript:window.close();">
We now look at some ways of relaunching the pop-up menu.
5. How to relaunch the pop-up menu (1)
The politest way of relaunching won't excite fanatical script-addicts,
but it is also the safest and most professional way to do it. The method
is to leave it up to your site visitor to decide whether to relaunch
the pop-up window. You should have an obvious, large button on your
page marked something like 'launch menu', and you just leave it up
to your site visitor to reactivate the menu. The code for this has already
been given above.
6. How to relaunch the pop-up menu (2)
OK - here's a cool script. (No guarantees, and test
it yourself under every OS and browser you can find).
In the page which launches the pop-up window, write:
pop_may_autoopen = true;
function pop()
{
menuWindow = window.open("menu.htm", "menu", "resizable=no,scrollbar=no,top=0,left=0,width=200,height=200");
pop_may_autoopen = true;
}
function relaunchPop()
{
if (pop_may_autoopen==true) setTimeout("pop()",5000);
}
Then in the HTML file that appears in the pop-up window (menu.htm), write:
<head>
<script>
function blur() {opener.relaunchPop();window.close();}
function destroy() {opener.pop_may_autoopen = false;}
</script>
</head>
<body onBlur="javascript:blur()" onUnload="javascript:destroy()">
These scripts interact and do the following: (i) when the pop-up
window is removed from the front, first an egg-timer is set running
which relaunches the pop-up window after a while, and secondly the
pop-up window is closed so that the relaunch works correctly; (ii)
when the pop-up window is closed by the user (click on X in the corner
under windows), this is understood to be a decision by the user that
the window is not to return, and so the relaunch facility is
deactivated.
Note: you must, if you are a professional
designer, offer the user a chance to permanently deactivate the
pop-up window. Remember that if the only way for an irritated
user to remove your pop-up window is for them to leave your
website, they will do so.
You can try something like this script here.
To test the blur routine, launch the box and then click on the main
page a few times. To test the destroy routine, click the X in
the window's corner (if you are using Windows).
7. How to target pages from an applet in the pop-up window
A further problem with pop-up menu windows is that applets in them
have problems targeting pages. Under certain browsers and operating
systems, the pages end up in a new window.
The javascript "window.self.name" or similar javascript ways of
naming targets will not always work. This is a timing issue involving
buggy behaviour of some Microsoft and Netscape browsers and JVM's.
Under version 3 browsers, the only reasonably reliable way to target
links from an applet in a pop-up window is to use frames in the main
window. If a target name is set in the <FRAMESET> tags, this will be
recognized by the applet. This also works in v.4 browsers and higher.
If you want to avoid frames, another way works only with version 4
browsers or higher, and only works with our "Pro" applets. Instead of
"LINK:myPage.htm,myFrame", you write "SCRIPT:opener.location='myPage.htm'"
in the index file.
|
|
