Building Friendly Pop-up Windows - Addressing the problems with pop-up windows
(Page 2 of 4 )
When we’re working with browsers where scripting is disabled, the pop-up does nothing. It’s just that simple. Using standard <a href> expressions would help to solve this issue. The following code:
<a href="#" onclick="window.open('file.htm');">Click here</a>
is and old and inefficient way of opening pop-ups. We have to make sure not to intersperse inline JavaScript event handlers with HTML. They’re part of JavaScript, and should be coded within it. Even so, in order to make the link work, if scripting is disabled, we simply use:
<a href="file.htm" onclick="window.open('file.htm');return false;">Click here</a>
This way, if scripting is disabled, the standard link still works. The return false statement effectively cancels out the default action of the href section, so it won’t open the pop-up and the normal HTML windows at the same time. It will open one or the other. What’s more, if we want the window to open on top of the current window, just adding a target attribute will do the trick -- like so:
<a href="file.htm" onclick="window.open('file.htm');return false;" target="_blank">Click here</a>
The problem is now solved. But there are still some issues that need to be tackled. Let’s assume we’re using tools like Dreamweaver to keep links properly maintained. If we return to the code:
<a href="file.htm" onclick="window.open('file.htm');return false;" target="_blank">Click here</a>
The link above would be nicely maintained, at least for the "href" part. But the "onclick" section would probably be ignored. Again, the code might be changed to:
<a href="file.htm" onclick="window.open('this.href');return false;" target="_blank">Click here</a>
Now there is only one link to maintain, and the "this.href" expression would work for the "window.open" method. That’s pretty good! What about pop-up killers? As with the issue of JavaScript being disabled, by merely providing a standard "href" section, the link will still work.
In order to solve accessibility problems, the most common approach is to inform the user that the link will open in a new window, include instructions as part of the link itself, and add notes in a title attribute or using proprietary icons to indicate that the link will open a pop-up window.
Seemingly, we’ve found a decent solution to the common pitfalls with pop-ups. In fact, we’re still a ways from that. We’re working with ugly and confusing inline JavaScript handlers. It’s highly recommended, for good coding habits and easy of maintenance, to completely separate JavaScript from the HTML markup, as we’d normally do with server-side scripting languages. So our previous code:
<a href="file.htm" onclick="window.open('this.href');return false;" target="_blank">Click here</a>
is still not good enough, since the JavaScript code is embedded into the link. It would be fairly good to write a JavaScript function that will take care of solving most of the issues previously described, but keep our HTML entirely unharmed. Sound interesting? Let’s get our hands dirty and get ready for coding!
Next: The JavaScript function >>
More Design Usability Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 28 
