Q: How does one create that nifty little toolbar that pops up with links to all the HotWired channels? What's good and what's bad about it? Which browsers support it?
- Mineh Mehta
A: Those nifty little toolbars certainly did appear suddenly in the Net consciousness, didn't they?
In the non-Web application world, windows pop up all the time. You open a new application and the first thing you get is a new window. You open a folder, you get a new window. You execute a command, you get a new window. And then there are those floating tool palettes. In Photoshop, I have about five or so floating palettes hanging around my screen. They allow me to quickly execute commands without interrupting my thought flow.
But in the Web world, we were confined to one window - of an unknown size - for a long time. Then along came Netscape's JavaScript. It executes on the client side, so content can be dynamic once it's left the server. It also contains a few objects that allow you to control the presentation environment. The one that creates the HotWired Network Menu is called the Magical Window object. To create a toolbar of your own, simply place this routine in your HTML document (preferably between the <head> and </head> tags):
<script language="Javascript1.1">
function Alakazam()
{
FunkyNewWindow = window.open
("http://www.yoursite.com/your/location.html",
"Menu",'toolbar=0,location=0,directories=0,
status=0,menubar=0,scrollbars=0,resizable=0,
width=110,height=335');
}
</script>
That's all you'll need to make the window, but you're not done yet. You still need an event to trigger the window to open. It could be activated when a page finishes loading, or when the user clicks on a link. The HotWired Network Menu opens when our front door finishes loading, so that's what I'll use to trigger our example. The HTML looks something like this:
<body bgcolor=#000000 text=#ffaa00 onLoad="Alakazam();">
Now you have a nice little menubar that pops up as soon as your page is finished loading. It's that simple. But just to make sure you understand exactly what's going on here, let's run through it step by step:
- <script language="Javascript1.1">
- This line tells your Web browser that this is the beginning of an
executable script, and all text found within the <script>
tags contains executable statements. language="Javascript1.1" tells the
browser we're using JavaScript 1.1, which means that only Netscape
Navigator 3.0+ and Microsoft Internet Explorer 4.0+ can execute it. (There
are extensive compatibility problems with various versions of JavaScript,
Navigator, and Internet Explorer. Make sure you know what you're dealing with, or some of your users won't see your new window.)
- function Alakazam() { ... }
- Here we define a JavaScript function that can be called later by
an event. I called this one Alakazam for no other reason
than I wanted a funky name. Name yours whatever you like.
- FunkyNewWindow=window.open("","Menu",'toolbar=0,
location=0,directories=0,status=0,menubar=0,
scrollbars=0,
resizable=0,width=110,height=335');
- This is the statement that does all the work. I've named
the new window in our program FunkyNewWindow, so we can refer
to it later. I've also defined what it's going to look like, but we
should go through each of those variables separately:
- "http://www.yoursite.com/your/location.html"
- This is the URL of the document that will provide the content for the window you just created.
- "Menu"
- This is another name for the window. It allows you to target the window with an <a href>.
- toolbar=0
- This determines whether or not the Netscape toolbar buttons (back, forward, home, etc.) show up on the browser window. (If you want the toolbar, use toolbar=1. You can also specify this with a yes or no.)
- location=0
- The location field (where URLs appear) is set by yes/no or 1/0.
- directories=0
- This is for those Netscape directory buttons (What's New, What's Cool,
Destinations, and all the other ones you usually turn off). Like the toolbar and location field, it can be set with yes/no or 1/0.
- status=0
- The status bar is at the bottom of your page. It's got
that broken key, and sometimes people scroll
that annoying JavaScript ticker tape through it.
- resizable=0
- When set to yes or 1, users can resize the window to
their heart's content. If it's set to no or 0, they can't.
- scrollbars=0
- This determines whether or not scrollbars are placed in the window. If
the document is bigger than the window, however, Navigator will
add them anyway.
- width=110
- This sets the width of the new window in pixels.
- height=335
- This sets the height of the window in pixels.
- <body bgcolor=#000000 text=#ffaa00 onLoad="Alakazam();">
- This is the body tag with an onLoad event in it. When
everything within the body tags has loaded, onLoad executes the
event Alakazam();.
The empty parentheses mean I'm not passing any variables to the function. If you use the onClick event, which triggers the window when a user clicks on a link, you'd place a URL within the parentheses, like this:
onClick="Alakazam
('http://www.yoursite.com/your_url.html');"
The semicolon is an optional statement end. I put it in because most other programming languages require end punctuation, and I like to stay consistent.
And that's it! Now you can go out and make millions of windows! But before you start, maybe you should think about it just a while longer. There are a few problems with floating windows, some social and some technical, that can affect how users interact with your site.
The technical problems center around the way Netscape opens and closes the windows. You may have noticed that they don't just open at the size you want. This is especially evident in Microsoft Windows, where JavaScript windows pop up at the size of the original browser window, and then shrink
to the size you specify.
You can't dynamically change a window's size once it's loaded, either. For example, if you wanted to start with a large window and then shrink to a smaller window, it would require some complex maneuvers. You'd have to open one window, and then open the second and kill the first. When Netscape first released JavaScript, you could kill any window you wanted, regardless of whether you opened it with JavaScript. But that became a little more complicated with subsequent releases of Navigator. Now you can only kill windows you create.
And that's still not the end of it. If your JavaScript window is the last window on a user's screen when she quits, the next time she opens her browser, the first window will open at the same size as your JavaScript window. If you've ever encountered this, I don't need to tell you it can be really annoying.
Even setting these limitations aside, let me warn you that there's been considerable resistance to pop-up windows. Lots of people like content safely contained within the proscenium arch of their browsers. When you break out of the arch, especially without their consent, some of them can become very irritated. Make sure there's a way for users to prevent the bar from launching, or let them launch it themselves with a click of the mouse.
But the bottom line is: Make sure you do something interesting. Everyone has a menubar. Make yours stand out.
