Forum Moderators: open
Such solutions are usually used if it’s about additional product info or reference to something in connection to the product.
I find this suitable when the type of content is not something to make a “real” page of the site.
Now, how do you dictate all of that to the client side?
Thanks
P.S.
Is there a specific official name for this?
If you wish to make forms of info-boxes, you can show or hide divs, absolutely positioned if you desire (with javascript).
<a href="http://page.com" onClick="javascript:window.open('http://page.com','Windows','width=650,height=350,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,directories=no,status=no');return false")">Link text</a>
That's it.
More often than not, they simply serve to illustrate that the developer has spent far too much time learning 'cool' tricks (to prove how clever they are) and no time at all learning about accessibility
Opening a new window (via a pop-up) can - all too easily - confuse a visitor... How did I get here? How do I get back?
All popular browsers have a pop-up blocker installed... this is a GOOD thing: It's my browser... I will decide when a new window (or tab) will open
The problem is many sites that use these types of pop-ups or new windows are more concerned about "losing the customer" than providing a rewarding navigation experience. Supplemental content, in the context you've mentioned it, is a very useful place for a pop-up window - but it does need to be accessible if Javascript is disabled.
One of my favorite uses (or excuses? :-) ) for a pop up is a complex submission form. The user gets halfway down the page and encounters a field they don't understand. Do they lose all their data by going to the contact page to ask for help? Lose their data by navigating away from the page to seek help documentation? A small contextual help link next to the form fields opens a convenient reference for them to review, right there and then, without leaving the form.
Note my changes to your initial code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
function newWin(url,w,h) {
var day = new Date();
var id= day.getTime();
var params = 'width='+w+',height='+h+',scrollbars,resizable';
var win = window.open(url,id,params);
return false;
}
</script>
</head>
<body>
<a href="http://example.com" onClick="return newWin('http://example.com',650,350);">Link text</a>
</body>
</html>
The window id is often misused or misunderstood. If you use the value of "window" for the window id, once it's open every new window you open will open in THAT window. This indeed serves to confuse the user, if they have returned focus to the main window and click a link, it will open the new content in the same window, which is now hidden behind the main window. Note the addition of a way of getting a window ID based on the time of day. This insures every click will reference a new window.
Second is the application of window attributes: you don't need to specify "yes" or "no" for all attributes. Include it if you want it, leave it out if you don't.
Another common misuse of pop-up windows is the absence of resizable and scrollbars. Don't become so arrogant that your design supersedes every environment you DON'T know; you may think you've tested it everywhere, but the possibility always exists the end user's font settings may overrun your carefully sized window. I personally have seen even FRAMESETS that I've had to open in a new window to navigate because a vital functional link is stuffed beyond the viewport of the frame. This problem exists X 1 million for pop up windows.
Never make the links Javascript-dependent. The code here is fine, it has a normal link with an onclick function that returns false - telling the browser to ignore the normal action of the link if Javascript is functioning. If Javascript is NOT functioning, it will never get the return false value and will execute the link normally, allowing those clients to access the content. Too often you will see
<a href="javascript:alert('not accessible');">oops</a>
or
<a href="#" onClick="alert('Stays on page'); return false;">oops</a>
all too easily - confuse a visitor... How did I get here? How do I get back?
This is especially true if those pop-ups are forced to go full screen, covering up the main window. This also happens when you open a new window without Javascript using target="". When opening a new window, make it small enough for the visitor to know the difference. The example here is fine, 650 X 350, but larger than that is a big mistake. I've even seen presumptive developers open a new window larger than my resolution, assuming everyone who visits SHOULD have "x size of resolution." As above, vital controls are missing - and always have the resizable attribute missing.
You can even make your code even cleaner by defining an external function that handles the onClick() function for a specific class,
<a class="new-window" href="http://example.com>example.com</a>
Which is really the way to go about it. The methods here are fine for the sporadic instances where you'd use a pop-up window. If they are anything more than "sporadic" you have a flaw in your site's logic, there's no reason to have hundreds of pop-ups.
My intention was to have such pop-ups be user initiated. Also to have them user friendly, for example, scrollable and resizable.
I would use them only when necessary.
