I work at a company where someone set up pop-ups using [removed] in the href. Besides all the problems described here, I’ve found it’s a mess when trying to programmatically changing all links on a site.
For instance, if you want to change popup.html to new.html, I would normally search for href=“popup.html”. But, this gets busted up. I confused programs like GoLive and Dreamweaver, too.
By using ‘this.href’ in a function and having the href be a real destination, this problem is solved.
Copy & paste the code below to embed this comment.
Nikolai Prokoschenko
Just consider some users, which do not even have such things as windows. I, for instance, use a frame-based window manager under Linux and every single browser window is opened full-screen. I’m really not amused about the whole pop-ups which only feature a small text about something completely irrelevant. I’m also not amused about the comments of some of the webdesigners, when I tell them they have too much surrounding yellow color in the page, they tell me “It’s no problem, the window will auto-size itself”. User having windows on the desktop is just a wrong assumtion!
As I wrote, Sergi, I know the code in that article isn’t perfect. But it gives a better solution than this article does, imho. It’s standard compliant, and extensible for anyone who wants to extend it, and anyone could improve it easilly. Maybe I will, and write and article about it.
And the extensibility in XHTML doesn’t lie in changing the DOCTYPE. Creating custom DTD’s is something you’ve been able to do since the birth of HTML some 12 years ago. The extensibility in XHTML lies within namespaces; you can create custom tags and attributes just by specifying a custom namespace (prefix) for them. Both custom DTD’s and tags present the same problem, though; nobody else but you understands what they mean, unless your DTD and/or tags get widely adopted.
And Strict DTD’s aren’t new either. They’ve been around since HTML 2.0, which is 10 years old. The point of using them, in both XHTML and HTML, is to try using HTML for structure and other means (e.g. CSS) for presentation. Behavior is typically a job for JavaScript, not HTML, hence the removal of ‘target’ in XHTML 1.1 and in all Strict DTD’s. Using strict DTD’s doesn’t give you worse backwards compatibility, it actually gives you better! It enforeces pure structural HTML which every browser in the world understands. It’s the CSS applied to it that might break backwards compatibility, but that’s not an issue here, because CSS has nothing to do with HTML in this context. It’s the content that matters, isn’t it?
People can and should use what they want. But they not call those who try to enforce W3C’s recommodations and separate structure from presentation and behavior «geeks», «uber cool standards guy» or someone who has to be at the bleeding edge. Why? Because this isn’t something new, and just because someone hasn’t discovered what a DOCTYPE is yet, doesn’t make everyone who has, übger-geeks or self-righteous and patronizing bastards, right?
When I made the comments about uber coolness and geeks, I said there was a mindset. And a mindset there is:
I’ve once showed my site (xhtml 1.0 transitional) someone and he answered back with a “hey, look at mine. it’s strict”, with an air of “I’m such a better coder than you are”.
Indeed his site was strict. But it was entirely built up of divs and spans. No semantics at all.
It doesn’t mean everyone who uses strict does it to look good. Perhaps, and most probably, strict is just what they need. But when you see people working on custom DTDs and stuff like that just to add to the language something that is already in it (albeit in a different doctype), that’s soemone trying too hard to stay strict, when what they need is something else.
The point I was trying to make is that using a transitional doctype is equally standards compliant to using a strict one. If there was no point at all in using a transitional doctype, than transitional doctypes wouldn’t be issued with the specs.
I think we agree. I don’t see as much need for Transitional DTD’s, and I don’t think ‘target’ is a good reason to drop down the notch from Strict. If Strict is the upper goal, why stop reaching for it just because you want functionality that doesn’t validate?
I think it’s better to try to stop using functionality that breaks the validation, and rather sit down and think for a while. I was very reluctant to stop using ‘target’ myself, until I realized users would come back either way if they liked my site (every browser has a back button), and creating windows for the users only confused them.
So, many users might not have the knowledge to open new windows. Well, it’s not our job to do that for them, I tell you. They will always be able to go back, and they will find the necessary information without us forcing it upon them.
Popup-windows have a slightly different range of application than ‘target’-windows, especially when used for small, informative texts and such. Here I think using JavaScript is OK, though I presonally still prefer opening windows myself. The article I’ve pointed at a couple of times now shows how you can have strict markup and still get popup windows, and I fail to see why that solution is worse than using ‘target’.
I’d like to represent the Lilliputians in the audience. I am a glorified copy and paster. I’m trying to keep up; honestly I am. I have a page that uses popups to display close ups of fabrics used in the most-interesting ScubaDoRags. I also use them for links. I did so to preserve stickiness. I can see that everyone here is anti-the-stickiness. I’m curious to know if the aversion to this argument is quantifiable, or if its the frustration of veterans like yourselves. I don’t wish to be maimed or ice-picked; but, I’d like to hear some ideas from user-based research rather than opinions. Of course, the stuff on which I’m working is not intended for a geek crowd (I use the term geek affectionately). If I were to target (couldn’t resist) a more educated bunch, I’d endeavor to remove the external links. Let’s say I’m undecided and need some empirical evidence to support the anti-sticky claims.
i don’t want to get totally laughed at (again) but is using onClick really an acceptable method. i thought we were meant to be staying away from anything ‘click’ specific and consider any method for selecting the link ?
feel free to enlighten me as i am clearly missing something ?
Burt: You’re missing the bit of the article headed “A note for accessibility aficionados”. OnClick works for the keyboard too (apparently).
Benjie: Apart from winding up power users, unnecessary new window opening can cause accessibility problems – see http://www.fixingyourwebsite.com/DiveIntoAccessibility/day_16.html for why. Using new windows for “stickiness” is just an illusion. If I want to leave your site, I will. If I want to come back to it, I can (except, oh dear, your new window just broke my [Back] button – so maybe I won’t find you again). Trust your users to know what they want to do, and don’t get in their way when they do it.
Asbjørn: There’s nothing (IMO) intrinsically better about strict doctypes than transitional ones – any more than english is any better or worse than french. It’s useful to declare a DOCTYPE, and sensible to stick to it when you’ve done so. Furthermore, I don’t see why this is unspeakable intermixing of content and behaviour:
<a href=“somepage.htm” target=“_new”>
but this isn’t:
<a href=“somepage.htm” rel=“new”>
You’re still hard-coding an attribute into each link aren’t you?
Although I wouldn’t use popups, this article is very interesting for providing a HTML-only way of using onclick handlers. For example, I needed to have a link that linked to one page if JS was available, or another page if not available. Problems I came across…
1. Using SCRIPT to generate a link to a JS-page, and NOSCRIPT to provide the alternative link doesn’t work, because in STRICT doctypes the content of NOSCRIPT has to be block level and this disrupts the flow of the page content (if the link is in a list item for example).
2. Using <a href=‘JS-link’> causes Bobby to fail the page at WCAG level 2, because it thinks the link is inaccessible to keyboard users. It isn’t. If their browser doesn’t trigger onclick by pressing Enter then they just get the non-JS link instead.
3. Putting onkeypress into the link, with the same JS content as onclick, satisfies Bobby, but makes any content below the link on the page inaccessible, as Tab is regarded as a valid keypress to activate the link (except in IE – another reason to ditch IE).
It didn’t actually occur to me that the onclick handler could itself be added to the link via Javscript, leaving the HTML clean and tidy.
“2. Using <a href=‘JS-link’> causes Bobby to fail the page at WCAG level 2, because it thinks the link is inaccessible to keyboard users. It isn’t. If their browser doesn’t trigger onclick by pressing Enter then they just get the non-JS link instead.”
c’mon… in this case, Bobby is obviously broken. That is no reason not to use the syntax. It has been pointed out on many sites, not the least of which is zeldman’s, that Bobby is sometimes straight-up wrong.
We should be designing/developing web pages to solve problems – users’ problems – not to cater to obscure bugs in validator code.
“1. Using SCRIPT to generate a link to a JS-page, and NOSCRIPT to provide the alternative link doesn’t work, because in STRICT doctypes the content of NOSCRIPT has to be block level and this disrupts the flow of the page content (if the link is in a list item for example).”
I feel the same way about this, though I recognize it’s a little harder to justify (which is why I put it second). The script/noscript solution is very elegant (I use it myself quite often). It works in every browser I have tested, and is a defacto standard which can be counted on to work more often than strict doctypes themselves!
Just my opinion, but in all but the most extreme cases (erm, library websites, government websites, etc), if you’re working to solve user problems, then you will put an elegant solution which works in every browser ahead of a cheesy solution which caters to a poorly-supported standard.
Copy & paste the code below to embed this comment.
david
Can someone please advise: which method described in the referenced article would be best for the following purpose: I wish to have a visitor come to my web page, click on a link on the page that says “photo,” and have a photo of the item appear in a small pop up window. Thanks.
Well, I take the point. Still, I’d be interested to see the results of some sort of usability survey. I got a book for my birthday: The Design of Sites
http://tinyurl.com/282g2.
I haven’t crawled all the way through it yet, but the authors advocate a user-centric rather than designer-centric approach. So, that’s really the source of my query.
You guys are the masters, however, so I do trust your opinions; heck, it’s why I’m here.
Thanks,
B.
I think its a good article and a good JavaScript. Not perfect, but at least as good as any other present solution!
Personally I’m interested in your library, I’ve been looking at cross-browser script libraries to avoid needing to repeatedly compensate for browser differences, and I’ll be taking a look at you library soon.
————
DHTML pop-ups are what I’ve used in the past, but obviously that can cause many more problems.
Whoever said we should not try to control presentation is wrong. We can’t trust the browser or user to be able to interact with our pages in the most efficient or effective way. The only problem arises when ‘far from average’ users CAN’T access the content or function, as long as it is still POSSIBLE for EVERY user to use my web site then it is OK to add more usability for a subset of the users.
As ‘far-from-average’ users are in the minority, no user-focused designer would sacrifice good usability for the sake of a few.
Did God make the world flat so that everyone could got the same experience out of it? No.
Er anyway what was I saying? Oh yeah…
If pop-ups add value, then I will use pop-ups. If they can be implimented with no negative affect on ‘far-from-average’ users, then that’s how I want to impliment them.
So, good article!
———-
I presume the use of having a DOCTYPE is so that computer programs and other non-human web browsers know what html/xml tags are being used and what attribues/values they can have.
The biggest problem with DOCTYPEs is that IE stops working in any predictable way. (IE’s quirks may be annoying but at least when it is in ‘quirks mode’ we can predict problems and take evasive action! Although I had hoped IE in strict mode would behave better and more predictably, I have not seen it do so yet).
———
Here’s an example of when using eXtensibility in documents is good…
meta-data is meta-data, it is information about information, why should we limit ourselves to the types/categories/headings of meta information that the W3C predicts to be a general range of good attributs for everyone?
Each web page is different, if you need to break the mould, then do so! (The W3C aren’t stupid, they made sure the functionality exists – custom DTDs).
In many cases I have HTML elements that have a peice of info specific to that element, where is the best place to put that info? answer – In an attribute of that tag!
It may not be standard but it’s useful for that element.
For example, if I want some abitary images in my page to change when the mouse hovers over them, I will write a generic script that swaps images, but because each image using that script needs to have its own individual hover-state image, I record the hover-image src in each individual IMG element:
[img]image.gifBWnjx9Vde04IWSnIfCGnznYJfdAE411stypography_img_src_endsrc=“anotherimage.gif”
[/img]
Now in my behaviour layer I can make a script that swaps image “src=” with the “hover_src=” if/when it exists on the element.
Another example can be seen on my site:
http://www.alpha-matrix-design.co.uk?section=contact
Each form field has attributes providing specific information on how to validate its value.
My custom attribute “validate_pattern=” contains a regular expression pattern, which is used by my JavaScript to test against the “value=” value of the field.
I hope you agree these are good uses of HTML. In addition they do no harm.
“My script also works without using target, you can use strict doctypes with it fine. It only requires target if you’re using named windows, or to cause new windows to open for users without javascript.”
Another option for named windows would be to use element.setAttribute() for the target attribute of the anchor, but this essentially does the same thing the JavaScript would do with the name parameter of the window.open() method. It still wouldn’t open a new window without JavaScript, but that’s probably a good thing. ;)
If we’re using javascript, the target attr is only used to grab the name of the target window, hence to set it, we would already need to have the name, but the name would be read from target… so you get the point.
If you can’t use target and still need a named window, the best option is to use a similar attribute in a custom namespace, and addapt the script.
regarding the comments that say using a custom attribute from a custom namespace is useless because unless you’re using a popular format, machines will have no use for it:
I agree that there’s no point, for example, to invent a new way to mark up content and hope the web to make sense of it, but the attribute in question is only useful to the behavior script which we have full control of. It’s a local use attribute. It has no deeper meaning that would somehow empower thee semantic web and stuff. So in these self-contained cases we’re free to come up with whatever we want.
LazyJim has a good example of using custom attributes, although he fails to use a custom namespace for them.
Would doing something like this work? pop()” accesskey=“p”]Popup
Not saying you should use it, just wondering.
I understand ALA published a really bad article about Accesskeys. In my opinion it was the worst article ever.
Oh and if you stick to Quirks Mode you don’t need a namespace.
javascript isnt necessary for new windows as has already been mentioned, just use the modular XHTML 1.1 dtd with the target element included – problem solved
the only time i feel that js is useful is for a flash presentation or something which opens in a new window of a set size in which case js is the only way to control that, otherwise just use the XHTML thats there and stop coming up with fancy workarounds for problems that dont exist
It’s nice to be shown how to use techniques like these properly. If for no other reason then to broarden our understanding and to know that it’s there to use should we require it. It’s all about usability. If your going to do the time, you might as well commit the crime. I know many people hate popups but you should never write anything off totaly. You never know when you may need it.
I personally hate popups, but they are very popular (only God knows why) with the graphic design community. Maybe this article will at least help them make popups a little more accessable.
Now I have a place to point to when someone asks about popups. After they hear my “I hate popups speech”, of course.
Caio, are you a hacker?
According to this (http://adequacy.org/public/stories/2001.12.2.42056.2147.html) you probably are. Stop right now!
Just kidding, of course. :)
Popups are one of those “with great power comes great responsibility” dealies. Say NO to using them irresponsibly.
BTW I live in San Francisco and I insert Us into colour. Of course I AM European.
Copy & paste the code below to embed this comment.
david
Thank you for replying Caio. I should have mentioned that I have at least 100 such photo links scattered amongst 12 pages. Would you be so kind to explain to me how to use the “going wild with dom” functions for more than one link? Your article is quite advanced and over my head. Thanks.
Copy & paste the code below to embed this comment.
Anthony
Hi, I like this script (so sue me). But is there a way to make the visited links change to their visited colour immediately? They currently don’t on my setup (IE 6, Win 98).
Thanks for the fix on line 18 – invalid property value. I am getting another error: Line 160 – Exception thrown and not caught. This in IE (6) of course – not NS/Firebird or Firefox. Thanks.
This is a great article, even though some may find it boring. Popups are one of the simplest things that people absolutely butcher. I think 90% of the value is in the first half before you even go into the Javascript madness.
An unmentioned benefit of using (this) in your function is that link validators/checkers will spider the one href link and you are still covered on the javascript link – as opposed to including a seperate url in the onclick like I’ve seen done often.
But in the end, popups should and can be avoided. Just like frames. But with all the third party popup killers, Opera 6’s horrible popup-killing behavior, and the option in many browsers (IE 6 : WinXP SP2 included!) to turn off ALL popups including those initiated by a user click, relying on popups in anything short of a tightly controlled environment (Intranet) is even worse than using frames. Anyone can get around using either with some creative coding.
david, why don’t you explain where you got stuck or what specific part of the article/script you don’t understand?
i’ll give a brief description of the stuff involved…
to add a listener to a bunch of links you use mlisten, it takes as parameters an event name, a list of elements to attach the event, and the function that’ll handle the event:
mlisten(‘click’, my_img_links, link_popup)
you’d call mlisten inside the window load event function (see source code of example page for an example)
to generate the my_img_links var I’d need to know the structure of your document. a safe way would be as I do partly in the examples page, add a “popup” class to each a element. a more savvy way would be to grab the element that contains the links, then get the links:
my_img_links = document.getElementById(‘my-links-container’).getElementsByTagName(‘a’)
Copy & paste the code below to embed this comment.
Marcel
What is the reason the TARGET attribute is deceprated in xHTML Strict? I really don’t get it, we are there to provide user friendly environments to our visitors and customers. They don’t even know you can Ctrl + Click a link (or Alt + Click) to open it in a new window/tab.
The reasoning was what? They need to decide for themselves whether or not they want a new window? Isn’t that more of a BROWSER feature, and not something to limit me in?
Sounds equally rediculous to me as removing LINKS all together, just because someone might not want a link at that location where you put it – instead you are to provide an external page with all links in it, that the browser will read and put in a nice overview.
The solution is nice. But the problem is… dumb.
Re: Frames:
Frames are not necessarily bad, it’s just not the fashion this year ;)
As I see it, strict doctypes are meant to markup documents.
A great part of the web pages we have on the web nowadays are not documents, they are application screens.
Aplications have behavior specifications. Documents do not. And that’s why strict doctypes don’t have target.
Now, using a transitional doctype is not the ultimate solution for coding web applications. Target is the least of our concerns when developing applications in HTML.
The problem is that there’s no W3C sanctioned solution for web apps. Some like Flash, I find XUL delightful but unusable (moz-specific). In the future some SVG + JS could do it, although something more specific would be better.
Ian Hickson is apparently working on bringing the lack of web app language issue to W3C’s attention:
http://ln.hixie.ch/?start=1074466808&count=1
I’m hoping something like XUL comes out of it, at least in regard to the box model and XBL.
(Maybe with XBL we could create a XUL-inspired language implemented in SVG? Well, whatever, this is definitely not the place to discuss it)
So putting presentation and behavior in HTML is bad but putting structure in CSS (element { content: url() }) isn’t?
Tsk tsk. I’m not sure what web standards wants anymore…
Background info: In IE 6 win I have checked “display a notification about every script error” (not the default) and have enabled script debugging.
When I click on the links at http://www.site-shack.com/test/ I receive the runtime error line 160 “exception thrown and not caught”—I am hoping to implement your very nice script on a client site, but am concerned about this error. Thanks for your help!
The problem boils down somewhere to getElem. getElem will throw if there’s no element having the id string you passed to it.
You are probably not calling it directly, but perhaps via listen.
Anyway, check to see if the IDs you’re passing are correct.
The error throws in mozilla also, where you’ll get the thrown message: “cannot get element: element does not exist”. I mention this because you could use venkman (mozilla’s js debuger) to track down which exact call is causing the error. If you are not familiar with venkman, you can try loading the page isolating each suspect call via comments and watch the js console for the error.
Copy & paste the code below to embed this comment.
Justin
I enjoyed this article because it showed us a nice, clean way to generate a pop-up window without all the nasty “onclick=[removed]…”
mumbo jumbo. However, the “target” attribute of an anchor tag is not supported in XHTML 1.0 Strict, thereby causing previously valid pages to become invalid just by adding the attribute.
I suppose I see the need for pop-up windows, but possibly the W3C doesn’t want them around anymore??
The only available alternatives would be:
-solely use listeners to capture the events and handle them (one of the examples does this)
-use the tried and true technique of placing the function calling javascript in the HREF value.
Copy & paste the code below to embed this comment.
Michael Ivey
Am I the only one or is the Examples page faulty? The examples don’t actually work on any of my computers (one uses MSJVM and two are using JRE 1.4.2_04).
Not to say the technique doesn’t work, the technique works just fine. I’ve been using it to build a nice web app since the article was published. The specific errors are a syntax error and “event_popup is undefinied”
Copy & paste the code below to embed this comment.
Kenn
1. a href=“foo” onclick=‘this.target=“_blank”;’
2. It’s valid XHTML strict, works on every 4.x – 6.x browser I’ve tried, doesn’t break Right Click/Open In New tab|window|whatever.
3. Sometimes those of us who do care about web applications, actually have given this some serious thought. Browsing a document != using a thin-client application. A good case for separate windows is when viewing an Excel attachment, or reading a help page in the middle of a partly-completed non-trivial form. For many real-time applications which have to issue nocache directives, using the back button will destroy previously typed content. You don’t want a separate window/tab, fine. Finish the form, then click Help. But I think it’s foolish to assume that most casual business users are even aware of the right click option. If this is my audience, why would I intentionally put a link that would wipe out edited input?
4. I like Zeldman’s idea of the web triumvirate: XHTML=structured content CSS=presentation
JavaScript/ECMAScript=behavior
Some folks seem to have a knee-jerk reaction to the third component from bad experiences with stupid DHTML-because-I-can design. But this is not 1998, and browsers are more than just content readers.
This is not 1998, the last time I checked (unless I walked into a time machine).
The days of flashy DHTML design are over. DHTML can still serve a useful purpose. The Behaviour layer can offer us amazing possibilities, and if some people don’t accept that that’s their problem.
I am one of those asked to use popups. Unfortunately mine don’t work properly at the moment and I don’t see why. http;//www.flcc.org/e107/content.php?content10 is the address. Can I bug someone to take a look. It may just be that I’m tired and am missing something, but still help is appreciated. BTW This, and many other articles at ALA have helped me out quite a bit. Thanks!
I think I see the problem with my modification of your code in Opera – I used mlisten but contrary to your example (with features), I used class rather than id. I would like to use mlisten combined with class because id shouldn’t be repeated on a page and I have a planned use for this popup which could be used multiple times on a page.
I think I see the problem with my modification of your code in Opera – I used mlisten but contrary to your example (with features), I used class rather than id. I would like to use mlisten combined with class because id shouldn’t be repeated on a page and I have a planned use for this popup which could be used multiple times on a page.
I think I see the problem with my modification of your code in Opera – I used mlisten but contrary to your example (with features), I used class rather than id. I would like to use mlisten combined with class because id shouldn’t be repeated on a page and I have a planned use for this popup which could be used multiple times on a page.
One aspect of accessibility was overlooked and I haven’t seen reference to it in this forum – alerting the user that a popup link will open a new window. I tried to modify popup.js by adding title to the raw_popup function:
function raw_popup(url, target, title, features) {
and
if(isUndefined(title)) title=‘Link opens in new Window’;
and
var theWindow = window.open(url, target, title, features);
and title to the link_popup function such as after ‘_blank’
,src.getAttribute(‘title’) || ‘Link opens in new window’,
but I think I am missing something because I am not seeing the tooltip of with the title text. Maybe this is not possible, I don’t know.
If anyone has a solution, please contact me at julian dot rickards at ndm.gov.on.ca.
I think a better way to warn the user is to provide a small image as an indicator by the side of the link. That could be achieved with a[target=“_blank”] selector (of course not working in IE), or, if we’re using the popup class, with a.popup
To use the title though, I don’t think the popup functions are the appropriate place to pass the attribute value. A better way would indeed be in the html itself <a title=”…”>, or, if it should be done by script, then it should be done by the time we assign the event handlers.
So, say we have an array or NodeList of popup links called popup_list, onload we’ll have the following code:
mlisten(‘click’,popup_list,link_popup);
map(popup_list,function(a){
a.title=‘opens in a new window’});
Adds the title attribute where anchor tags have class=“popup”.
onload = function()
{
var i = 0, thislink, poplinks = getElementsByClass(‘popup’,‘a’);
while (thislink = poplinks[i++]) {
thislink.setAttribute(‘title’, ‘Link opens in new window’);
}
}
Variation 2:
Adds additional text where anchor tags have class=“popup”.
onload = function()
{
var i = 0, thislink, poplinks = getElementsByClass(‘popup’,‘a’);
while (thislink = poplinks[i++]) {
var title_text = document.createTextNode(” [Link opens in new window]”)
thislink.appendChild(title_text);
}
}
Now I am going to try to see if these functions may be built into Caio’s lib.js
Julian, I’d advise against directly setting window.onload, due to imminent script clashing.
A better way to ensure script interoperability and concurrency would be to use listeners, by using the DOM’s “addEventListener”, or my x-browser wrapper “listen”. This way many scripts may assign different handlers to the same event.
On an unrelated note and a matter of personal style, I’d suggest that you check out my “map” function, as I find it a much cleaner means to traverse a list and do something to it than for or while loops with an increment counter.
I appreciate your comments Caio. I am for the most part, just a newbie at JS but I am able to understand what I have done. I use the word “I” loosely because it was with some help from another member of SitePointForums.com that I was able to put this together. The other person wrote most of the code and left it for me. I then tried it, found it didn’t work, using the Moz JS console, I deduced the problem, made the fix and offer it. If I have a look at your code (your skills are much greater than mine), I would go dizzy. However, what I/we have done is added a functionality (however poorly) that I felt was missing from your excellent application. As I have mentioned before, if you would like to take what I have done and incorporate it into yours however you feel it should be done, please do so.
I personally would feel much more comfortable if either the title text or additional link text were added to the application. It fits in much better with checkpoint 10.1 of the WCAG which says (from my memory) that either don’t use popups or open new windows or if you do either, warn the user. Nevertheless, friends of mine argue against any target attribute or JS popups but others are not quite so opposed. For those, including myself, who take the more lenient approach, I feel that this one inclusion now raises this application up to the bar set by 10.1 of the WCAG.
One more thing. I understand what you mean by event listener and most certainly, I can see how it applies to your original code: listen for a click, then run code. However, can the event listener be told to listen to onload? In the case of my first snippet of code, onmouseover would be sufficient to generate the title attribute because you can’t see the title text until the mouse is over the link text (in addition to onmouseover, onfocus should be accounted for too). However, in the second case, the modification of the link text would have to occur at load time.
Julian, you can add a listener to onload, in fact, I do it in the article when I first mention my listen function under the “separate logic and presentation” section:
This listen block sets a function to be called when the document is loaded, which will then call listen again, this time to add the listener to a popup link.
You probably could use the following code to add the title attribute:
listen(‘load’, window, function() {
popup_list = getElementsByClass(‘popup’);
mlisten(‘click’, popup_list, event_popup);
map(popup_list, function(a){a.title=‘opens in a new window’});
}
);
Regarding adding this functionality to the script core, it’s such a one-liner that I don’t see how it could be “integrated” into it, or how it would be advantageous, specially since I don’t provide specific means to add the popup handlers (we use the general-purpose listen), and thus cannot modify it.
I guess you just type it when you need it. Or, well, we could just wrap the code I provided above in a function called add_listener_and_title_to_popup_class_links or something shorter.
I joined this late… and I’m a marketer, not a site builder – so I get confused easily and I don’t pretend to grasp much of this.
I’m going back for a re-read to better understand.
Meantime, I’m looking for some practical clarity.
Advice appreciated. Please and thanks.
At risk of drifting off subject…
As a marketer I need to advise clients appropriately.
In liasing with their developers/staff, I often encounter ‘existing practices’ which are ‘perhaps not optimal’. An easily accepted simple example? …some enthusiastically use frames/tables. (Sadly, this includes webdevelopers delivering substandard service – either knowingly or through simple lack of awareness).
My ‘problem’ is that as a sole practitioner, I have to cover a lot of ground – too much to have all-areas expert knowledge. There’s much I don’t understand and, in efforts to develop a working awareness, I spend a lot of time here – frequently getting lost in tech stuff way beyond my competence and interest.
I got lost in this one very early on – and even more confused by 12 pages of follow-on. As I said ‘I’m going back for a re-read to better understand.’ And meantime, I want to know what to do – and no tpass-on poor advice.
I tried the examples at http://www.alistapart.com/d/popuplinks/examples.html
When clicked normally (on my aging IE5/OS9/Mac)…
1-3 open new small window.
4-5 open in main window.
6-9 open in new full size window.
When holddown/right click (intentionally open in a new window)…
1 blank new full size window
2-3 new small popup.
4-9 new fullsize window.
I’m guessing they’ll behave ‘better’ with more modern browsers on my OSX-equpiped laptop.
Thing is though – only 2 and 3 work on a machine/browser combo still in common use. Do I use them and ignore the others?
gulliver, apparently IE5/OS9 is having a problem with some code of my library that is relevant in setting up event listeners (perhaps it doesn’t support them at all, but I really can’t tell)
So the short answer is indeed, stick to examples 2 and 3 if the popup behavior for IE5/OS9 is important.
The long answer is that you can either get a coder to debug my library and find out what in it IE5/OS9 doesn’t like, or you can treat IE5/OS9 as an aging browser and let it fall back on the sub-optimal behavior that you describe: loading on a normal size (either new or same) window.
Notice that letting this happen does result in an accessibility issue since the documents still open, even if not in the desired popup fashion.
Sorry to burst your bubble, but this script is partly broken in Opera as I had first suggested but I couldn’t see the pattern. From what I was told after asking around, it is a built in permissions thing that Opera is more strict about and other browsers seem not to be as strict. Set a popup link to open a page from a different domain and both the popup and the main window will go to the destination.
I don’t know JS so I don’t know if there is a fix. However, as long as you are creating popups from pages within your domain, you won’t see this problem.
Copy & paste the code below to embed this comment.
Nathan Cocks
As a person who consistantly searches news feeds from a variety of sources, some using popups others not, I generally open new windows to view information.
It is heartening to see people advocating pop up code that will allow me to do my traditional ‘open in new window’ actions on links that use javascript.
Nothing more frustrating than opening the new window, having it fail, shutting that window down and clicking on the link normally.
Copy & paste the code below to embed this comment.
michael schieben
Gulliver/Caio, some information i found concering event listeners and IE5/OS9 at http://developer.apple.com/internet/webcontent/eventmodels.html
“If you plan to support IE5/Mac, you can dismiss the attachEvent() and addEventListener() methods because IE5/Mac supports neither of these.”
There is only on way left to apply a function to an event (beside coding in the document structure):
element.onclick = myFunc;
I extended Caios listen function:
function listen(event, elem, func) {
elem = getElem(elem);
if (elem.addEventListener) // W3C DOM
elem.addEventListener(event,func,false);
else if (elem.attachEvent) // IE DOM
elem.attachEvent(‘on’+event, function(){ func(new W3CDOM_Event(elem)) } );
// for IE we use a …
else // IE5/OS9 elder browsers
eval(“elem.on” + event + “= func”);
}
The examples all work fine now.
Thanks a lot for your great article and the cclib.js!
michael, actually the thing (handling ie5/os9) is a bit more complicated than that: the function handling the event will expect an event object, but when a function is assigned to handle an event via “element.onevent = fn” it element itself will be passed as parameter to the function, so we must use the same wrapper we used for IE/win:
This was an excellent article, which demonstrated a lot of very usefull techniques, especially the listener model.
And, yes, I’m one of those users who usually opens up links in new windows and gets REALLY frustrated when some lame webdeveloper has javascript’ed their links.
Well, I came to this article hoping to find a way to stay XHTML 1.0 validated, but open offsite links in a new window (can’t be validated with target in your links) saddly, you can’t be validated with onclick in your links, either… anyone know of any other solutions?
Copy & paste the code below to embed this comment.
Ondrej Valek
Haven’t tried this way yet. I’m interested in what happens, when you click on this right-way-made popup link with popups banned in your browser (such as Mozilla or some commercial popup-blocking proxies for IE).
Does it open at least the normal href link?
In my opinion, popus should not be used, unless necessary, and should be announced in advance (with some icon like for those abroad-targeting links). For example, it’s nice to use popups for internet radios’ “Now playing” windows.
Due to a discussion in a recent post on Simon Willison’s blog (http://simon.incutio.com/archive/2004/05/26/addLoadEvent), I’ve updated “listen” in a more backwards compatible way, that may solve IE5/mac issues. Here’s the new code with a simple event test case: http://v2studio.com/k/code/newlisten.html
130 Reader Comments
Back to the ArticleJonathan
I work at a company where someone set up pop-ups using [removed] in the href. Besides all the problems described here, I’ve found it’s a mess when trying to programmatically changing all links on a site.
For instance, if you want to change popup.html to new.html, I would normally search for href=“popup.html”. But, this gets busted up. I confused programs like GoLive and Dreamweaver, too.
By using ‘this.href’ in a function and having the href be a real destination, this problem is solved.
Good article and good reference for the future.
Nikolai Prokoschenko
Just consider some users, which do not even have such things as windows. I, for instance, use a frame-based window manager under Linux and every single browser window is opened full-screen. I’m really not amused about the whole pop-ups which only feature a small text about something completely irrelevant. I’m also not amused about the comments of some of the webdesigners, when I tell them they have too much surrounding yellow color in the page, they tell me “It’s no problem, the window will auto-size itself”. User having windows on the desktop is just a wrong assumtion!
Dante-Cubed
I don’t see popups. I use MyIE2, and popups are either blocked or opened in a new tab.
I agree with Sergi, popups are behaviour.
Asbjørn Ulsberg
As I wrote, Sergi, I know the code in that article isn’t perfect. But it gives a better solution than this article does, imho. It’s standard compliant, and extensible for anyone who wants to extend it, and anyone could improve it easilly. Maybe I will, and write and article about it.
And the extensibility in XHTML doesn’t lie in changing the DOCTYPE. Creating custom DTD’s is something you’ve been able to do since the birth of HTML some 12 years ago. The extensibility in XHTML lies within namespaces; you can create custom tags and attributes just by specifying a custom namespace (prefix) for them. Both custom DTD’s and tags present the same problem, though; nobody else but you understands what they mean, unless your DTD and/or tags get widely adopted.
And Strict DTD’s aren’t new either. They’ve been around since HTML 2.0, which is 10 years old. The point of using them, in both XHTML and HTML, is to try using HTML for structure and other means (e.g. CSS) for presentation. Behavior is typically a job for JavaScript, not HTML, hence the removal of ‘target’ in XHTML 1.1 and in all Strict DTD’s. Using strict DTD’s doesn’t give you worse backwards compatibility, it actually gives you better! It enforeces pure structural HTML which every browser in the world understands. It’s the CSS applied to it that might break backwards compatibility, but that’s not an issue here, because CSS has nothing to do with HTML in this context. It’s the content that matters, isn’t it?
People can and should use what they want. But they not call those who try to enforce W3C’s recommodations and separate structure from presentation and behavior «geeks», «uber cool standards guy» or someone who has to be at the bleeding edge. Why? Because this isn’t something new, and just because someone hasn’t discovered what a DOCTYPE is yet, doesn’t make everyone who has, übger-geeks or self-righteous and patronizing bastards, right?
Caio Chassot
Asbjørn,
When I made the comments about uber coolness and geeks, I said there was a mindset. And a mindset there is:
I’ve once showed my site (xhtml 1.0 transitional) someone and he answered back with a “hey, look at mine. it’s strict”, with an air of “I’m such a better coder than you are”.
Indeed his site was strict. But it was entirely built up of divs and spans. No semantics at all.
It doesn’t mean everyone who uses strict does it to look good. Perhaps, and most probably, strict is just what they need. But when you see people working on custom DTDs and stuff like that just to add to the language something that is already in it (albeit in a different doctype), that’s soemone trying too hard to stay strict, when what they need is something else.
The point I was trying to make is that using a transitional doctype is equally standards compliant to using a strict one. If there was no point at all in using a transitional doctype, than transitional doctypes wouldn’t be issued with the specs.
boogs
and a little bit more mature than my rant on the subject – http://youngpup.net/2003/popups ;)
Asbjørn Ulsberg
Caio,
I think we agree. I don’t see as much need for Transitional DTD’s, and I don’t think ‘target’ is a good reason to drop down the notch from Strict. If Strict is the upper goal, why stop reaching for it just because you want functionality that doesn’t validate?
I think it’s better to try to stop using functionality that breaks the validation, and rather sit down and think for a while. I was very reluctant to stop using ‘target’ myself, until I realized users would come back either way if they liked my site (every browser has a back button), and creating windows for the users only confused them.
So, many users might not have the knowledge to open new windows. Well, it’s not our job to do that for them, I tell you. They will always be able to go back, and they will find the necessary information without us forcing it upon them.
Popup-windows have a slightly different range of application than ‘target’-windows, especially when used for small, informative texts and such. Here I think using JavaScript is OK, though I presonally still prefer opening windows myself. The article I’ve pointed at a couple of times now shows how you can have strict markup and still get popup windows, and I fail to see why that solution is worse than using ‘target’.
Caio Chassot
Asbjørn,
My script also works without using target, you can use strict doctypes with it fine.
It only requires target if you’re using named windows, or to cause new windows to open for users without javascript.
Benjie
I’d like to represent the Lilliputians in the audience. I am a glorified copy and paster. I’m trying to keep up; honestly I am. I have a page that uses popups to display close ups of fabrics used in the most-interesting ScubaDoRags. I also use them for links. I did so to preserve stickiness. I can see that everyone here is anti-the-stickiness. I’m curious to know if the aversion to this argument is quantifiable, or if its the frustration of veterans like yourselves. I don’t wish to be maimed or ice-picked; but, I’d like to hear some ideas from user-based research rather than opinions. Of course, the stuff on which I’m working is not intended for a geek crowd (I use the term geek affectionately). If I were to target (couldn’t resist) a more educated bunch, I’d endeavor to remove the external links. Let’s say I’m undecided and need some empirical evidence to support the anti-sticky claims.
Thanks,
B
burt
i don’t want to get totally laughed at (again) but is using onClick really an acceptable method. i thought we were meant to be staying away from anything ‘click’ specific and consider any method for selecting the link ?
feel free to enlighten me as i am clearly missing something ?
Chris Hunt
Burt: You’re missing the bit of the article headed “A note for accessibility aficionados”. OnClick works for the keyboard too (apparently).
Benjie: Apart from winding up power users, unnecessary new window opening can cause accessibility problems – see http://www.fixingyourwebsite.com/DiveIntoAccessibility/day_16.html for why. Using new windows for “stickiness” is just an illusion. If I want to leave your site, I will. If I want to come back to it, I can (except, oh dear, your new window just broke my [Back] button – so maybe I won’t find you again). Trust your users to know what they want to do, and don’t get in their way when they do it.
Asbjørn: There’s nothing (IMO) intrinsically better about strict doctypes than transitional ones – any more than english is any better or worse than french. It’s useful to declare a DOCTYPE, and sensible to stick to it when you’ve done so. Furthermore, I don’t see why this is unspeakable intermixing of content and behaviour:
<a href=“somepage.htm” target=“_new”>
but this isn’t:
<a href=“somepage.htm” rel=“new”>
You’re still hard-coding an attribute into each link aren’t you?
Chris Simon
Although I wouldn’t use popups, this article is very interesting for providing a HTML-only way of using onclick handlers. For example, I needed to have a link that linked to one page if JS was available, or another page if not available. Problems I came across…
1. Using SCRIPT to generate a link to a JS-page, and NOSCRIPT to provide the alternative link doesn’t work, because in STRICT doctypes the content of NOSCRIPT has to be block level and this disrupts the flow of the page content (if the link is in a list item for example).
2. Using <a href=‘JS-link’> causes Bobby to fail the page at WCAG level 2, because it thinks the link is inaccessible to keyboard users. It isn’t. If their browser doesn’t trigger onclick by pressing Enter then they just get the non-JS link instead.
3. Putting onkeypress into the link, with the same JS content as onclick, satisfies Bobby, but makes any content below the link on the page inaccessible, as Tab is regarded as a valid keypress to activate the link (except in IE – another reason to ditch IE).
It didn’t actually occur to me that the onclick handler could itself be added to the link via Javscript, leaving the HTML clean and tidy.
boogs
“2. Using <a href=‘JS-link’> causes Bobby to fail the page at WCAG level 2, because it thinks the link is inaccessible to keyboard users. It isn’t. If their browser doesn’t trigger onclick by pressing Enter then they just get the non-JS link instead.”
c’mon… in this case, Bobby is obviously broken. That is no reason not to use the syntax. It has been pointed out on many sites, not the least of which is zeldman’s, that Bobby is sometimes straight-up wrong.
We should be designing/developing web pages to solve problems – users’ problems – not to cater to obscure bugs in validator code.
“1. Using SCRIPT to generate a link to a JS-page, and NOSCRIPT to provide the alternative link doesn’t work, because in STRICT doctypes the content of NOSCRIPT has to be block level and this disrupts the flow of the page content (if the link is in a list item for example).”
I feel the same way about this, though I recognize it’s a little harder to justify (which is why I put it second). The script/noscript solution is very elegant (I use it myself quite often). It works in every browser I have tested, and is a defacto standard which can be counted on to work more often than strict doctypes themselves!
Just my opinion, but in all but the most extreme cases (erm, library websites, government websites, etc), if you’re working to solve user problems, then you will put an elegant solution which works in every browser ahead of a cheesy solution which caters to a poorly-supported standard.
</justmyopinion>
Chris Simon
> c’mon… in this case, Bobby is obviously
> broken. That is no reason not to use the
> syntax.
Absolutely – which is why I’ve left it like that with a disclaimer that I’m still claiming WCAG AAA accessibility even though Bobby fails it!
However, this article has given me the way of stripping the HTML source of all Javascript AND satisfying Bobby at the same time!
david
Can someone please advise: which method described in the referenced article would be best for the following purpose: I wish to have a visitor come to my web page, click on a link on the page that says “photo,” and have a photo of the item appear in a small pop up window. Thanks.
Benjie
Well, I take the point. Still, I’d be interested to see the results of some sort of usability survey. I got a book for my birthday: The Design of Sites
http://tinyurl.com/282g2.
I haven’t crawled all the way through it yet, but the authors advocate a user-centric rather than designer-centric approach. So, that’s really the source of my query.
You guys are the masters, however, so I do trust your opinions; heck, it’s why I’m here.
Thanks,
B.
LazyJim
I think its a good article and a good JavaScript. Not perfect, but at least as good as any other present solution!
Personally I’m interested in your library, I’ve been looking at cross-browser script libraries to avoid needing to repeatedly compensate for browser differences, and I’ll be taking a look at you library soon.
————
DHTML pop-ups are what I’ve used in the past, but obviously that can cause many more problems.
Whoever said we should not try to control presentation is wrong. We can’t trust the browser or user to be able to interact with our pages in the most efficient or effective way. The only problem arises when ‘far from average’ users CAN’T access the content or function, as long as it is still POSSIBLE for EVERY user to use my web site then it is OK to add more usability for a subset of the users.
As ‘far-from-average’ users are in the minority, no user-focused designer would sacrifice good usability for the sake of a few.
Did God make the world flat so that everyone could got the same experience out of it? No.
Er anyway what was I saying? Oh yeah…
If pop-ups add value, then I will use pop-ups. If they can be implimented with no negative affect on ‘far-from-average’ users, then that’s how I want to impliment them.
So, good article!
———-
I presume the use of having a DOCTYPE is so that computer programs and other non-human web browsers know what html/xml tags are being used and what attribues/values they can have.
The biggest problem with DOCTYPEs is that IE stops working in any predictable way. (IE’s quirks may be annoying but at least when it is in ‘quirks mode’ we can predict problems and take evasive action! Although I had hoped IE in strict mode would behave better and more predictably, I have not seen it do so yet).
———
Here’s an example of when using eXtensibility in documents is good…
meta-data is meta-data, it is information about information, why should we limit ourselves to the types/categories/headings of meta information that the W3C predicts to be a general range of good attributs for everyone?
Each web page is different, if you need to break the mould, then do so! (The W3C aren’t stupid, they made sure the functionality exists – custom DTDs).
In many cases I have HTML elements that have a peice of info specific to that element, where is the best place to put that info? answer – In an attribute of that tag!
It may not be standard but it’s useful for that element.
For example, if I want some abitary images in my page to change when the mouse hovers over them, I will write a generic script that swaps images, but because each image using that script needs to have its own individual hover-state image, I record the hover-image src in each individual IMG element:
[img]image.gifBWnjx9Vde04IWSnIfCGnznYJfdAE411stypography_img_src_endsrc=“anotherimage.gif”
[/img]
Now in my behaviour layer I can make a script that swaps image “src=” with the “hover_src=” if/when it exists on the element.
Another example can be seen on my site:
http://www.alpha-matrix-design.co.uk?section=contact
Each form field has attributes providing specific information on how to validate its value.
My custom attribute “validate_pattern=” contains a regular expression pattern, which is used by my JavaScript to test against the “value=” value of the field.
I hope you agree these are good uses of HTML. In addition they do no harm.
James Craig
Caio Chassot wrote:
“My script also works without using target, you can use strict doctypes with it fine. It only requires target if you’re using named windows, or to cause new windows to open for users without javascript.”
Another option for named windows would be to use element.setAttribute() for the target attribute of the anchor, but this essentially does the same thing the JavaScript would do with the name parameter of the window.open() method. It still wouldn’t open a new window without JavaScript, but that’s probably a good thing. ;)
Caio Chassot
James,
If we’re using javascript, the target attr is only used to grab the name of the target window, hence to set it, we would already need to have the name, but the name would be read from target… so you get the point.
If you can’t use target and still need a named window, the best option is to use a similar attribute in a custom namespace, and addapt the script.
regarding the comments that say using a custom attribute from a custom namespace is useless because unless you’re using a popular format, machines will have no use for it:
I agree that there’s no point, for example, to invent a new way to mark up content and hope the web to make sense of it, but the attribute in question is only useful to the behavior script which we have full control of. It’s a local use attribute. It has no deeper meaning that would somehow empower thee semantic web and stuff. So in these self-contained cases we’re free to come up with whatever we want.
LazyJim has a good example of using custom attributes, although he fails to use a custom namespace for them.
Caio Chassot
David,
All methods are fine. If it’s just a single link and you want to have it solved quickly, the inline link_popup code should do it:
photo
If on the other hand there are plenty of photo links, the “Going wild with the DOM” examples are more scalable and a better fit.
I guess, in the end, evaluating which method will work best with your situation is a task better handled by yourself.
Dante-Cubed
Would doing something like this work?
pop()” accesskey=“p”]Popup
Not saying you should use it, just wondering.
I understand ALA published a really bad article about Accesskeys. In my opinion it was the worst article ever.
Oh and if you stick to Quirks Mode you don’t need a namespace.
maxblue
Pop-ups, like message boxes, are evil and should be banned from this planet.
Evil I say, just plain evil.
Adam
javascript isnt necessary for new windows as has already been mentioned, just use the modular XHTML 1.1 dtd with the target element included – problem solved
the only time i feel that js is useful is for a flash presentation or something which opens in a new window of a set size in which case js is the only way to control that, otherwise just use the XHTML thats there and stop coming up with fancy workarounds for problems that dont exist
all IMO of course
Tim Woolfenden
It’s nice to be shown how to use techniques like these properly. If for no other reason then to broarden our understanding and to know that it’s there to use should we require it. It’s all about usability. If your going to do the time, you might as well commit the crime. I know many people hate popups but you should never write anything off totaly. You never know when you may need it.
FYI In England and we spell Color with a u.
Ryan
I personally hate popups, but they are very popular (only God knows why) with the graphic design community. Maybe this article will at least help them make popups a little more accessable.
Now I have a place to point to when someone asks about popups. After they hear my “I hate popups speech”, of course.
Dante-Cubed
Caio, are you a hacker?
According to this (http://adequacy.org/public/stories/2001.12.2.42056.2147.html) you probably are. Stop right now!
Just kidding, of course. :)
Popups are one of those “with great power comes great responsibility” dealies. Say NO to using them irresponsibly.
BTW I live in San Francisco and I insert Us into colour. Of course I AM European.
Caio Chassot
Dante,
The accesskey thing worked in Firefox with the article examples page.
(Tested doing a quick hack with jesse ruderman’s jsshell. Since jsshell won’t run in a page context in IE, I didn’t test it)
david
Thank you for replying Caio. I should have mentioned that I have at least 100 such photo links scattered amongst 12 pages. Would you be so kind to explain to me how to use the “going wild with dom” functions for more than one link? Your article is quite advanced and over my head. Thanks.
Anthony
Hi, I like this script (so sue me). But is there a way to make the visited links change to their visited colour immediately? They currently don’t on my setup (IE 6, Win 98).
Judy Wilson
Thanks for the fix on line 18 – invalid property value. I am getting another error: Line 160 – Exception thrown and not caught. This in IE (6) of course – not NS/Firebird or Firefox. Thanks.
Doug Gibson
This is a great article, even though some may find it boring. Popups are one of the simplest things that people absolutely butcher. I think 90% of the value is in the first half before you even go into the Javascript madness.
An unmentioned benefit of using (this) in your function is that link validators/checkers will spider the one href link and you are still covered on the javascript link – as opposed to including a seperate url in the onclick like I’ve seen done often.
But in the end, popups should and can be avoided. Just like frames. But with all the third party popup killers, Opera 6’s horrible popup-killing behavior, and the option in many browsers (IE 6 : WinXP SP2 included!) to turn off ALL popups including those initiated by a user click, relying on popups in anything short of a tightly controlled environment (Intranet) is even worse than using frames. Anyone can get around using either with some creative coding.
Dante-Cubed
Why do people hate frames so much? There is a noframes tag which you can use with a link to the regular homepage.
Caio Chassot
judy, what are the steps to reproduce this error? it doesn’t happen here.
Caio Chassot
david, why don’t you explain where you got stuck or what specific part of the article/script you don’t understand?
i’ll give a brief description of the stuff involved…
to add a listener to a bunch of links you use mlisten, it takes as parameters an event name, a list of elements to attach the event, and the function that’ll handle the event:
mlisten(‘click’, my_img_links, link_popup)
you’d call mlisten inside the window load event function (see source code of example page for an example)
to generate the my_img_links var I’d need to know the structure of your document. a safe way would be as I do partly in the examples page, add a “popup” class to each a element. a more savvy way would be to grab the element that contains the links, then get the links:
my_img_links = document.getElementById(‘my-links-container’).getElementsByTagName(‘a’)
Marcel
What is the reason the TARGET attribute is deceprated in xHTML Strict? I really don’t get it, we are there to provide user friendly environments to our visitors and customers. They don’t even know you can Ctrl + Click a link (or Alt + Click) to open it in a new window/tab.
The reasoning was what? They need to decide for themselves whether or not they want a new window? Isn’t that more of a BROWSER feature, and not something to limit me in?
Sounds equally rediculous to me as removing LINKS all together, just because someone might not want a link at that location where you put it – instead you are to provide an external page with all links in it, that the browser will read and put in a nice overview.
The solution is nice. But the problem is… dumb.
Re: Frames:
Frames are not necessarily bad, it’s just not the fashion this year ;)
JamesC
It’s depreciated cause it’s a behaviour – should be scripted rather than mark-up.
Caio Chassot
As I see it, strict doctypes are meant to markup documents.
A great part of the web pages we have on the web nowadays are not documents, they are application screens.
Aplications have behavior specifications. Documents do not. And that’s why strict doctypes don’t have target.
Now, using a transitional doctype is not the ultimate solution for coding web applications. Target is the least of our concerns when developing applications in HTML.
The problem is that there’s no W3C sanctioned solution for web apps. Some like Flash, I find XUL delightful but unusable (moz-specific). In the future some SVG + JS could do it, although something more specific would be better.
Ian Hickson is apparently working on bringing the lack of web app language issue to W3C’s attention:
http://ln.hixie.ch/?start=1074466808&count=1
I’m hoping something like XUL comes out of it, at least in regard to the box model and XBL.
(Maybe with XBL we could create a XUL-inspired language implemented in SVG? Well, whatever, this is definitely not the place to discuss it)
Dante
So putting presentation and behavior in HTML is bad but putting structure in CSS (element { content: url() }) isn’t?
Tsk tsk. I’m not sure what web standards wants anymore…
Judy Wilson
Hello Caio,
Background info: In IE 6 win I have checked “display a notification about every script error” (not the default) and have enabled script debugging.
When I click on the links at http://www.site-shack.com/test/ I receive the runtime error line 160 “exception thrown and not caught”—I am hoping to implement your very nice script on a client site, but am concerned about this error. Thanks for your help!
Judy Wilson
Caio Chassot
The problem boils down somewhere to getElem. getElem will throw if there’s no element having the id string you passed to it.
You are probably not calling it directly, but perhaps via listen.
Anyway, check to see if the IDs you’re passing are correct.
The error throws in mozilla also, where you’ll get the thrown message: “cannot get element: element does not exist”. I mention this because you could use venkman (mozilla’s js debuger) to track down which exact call is causing the error. If you are not familiar with venkman, you can try loading the page isolating each suspect call via comments and watch the js console for the error.
Derek Gomez
I was hoping there was going to be an alternative solution described here so that target=“_blank” wasn’t used when the DOC type is set to strict.
Justin
I enjoyed this article because it showed us a nice, clean way to generate a pop-up window without all the nasty “onclick=[removed]…”
mumbo jumbo. However, the “target” attribute of an anchor tag is not supported in XHTML 1.0 Strict, thereby causing previously valid pages to become invalid just by adding the attribute.
I suppose I see the need for pop-up windows, but possibly the W3C doesn’t want them around anymore??
The only available alternatives would be:
-solely use listeners to capture the events and handle them (one of the examples does this)
-use the tried and true technique of placing the function calling javascript in the HREF value.
Justin
.. I guess that’s what I get for not reading all the thread replies first, didn’t see that my point is already being discussed.
Sorry :)
Michael Ivey
Am I the only one or is the Examples page faulty? The examples don’t actually work on any of my computers (one uses MSJVM and two are using JRE 1.4.2_04).
Not to say the technique doesn’t work, the technique works just fine. I’ve been using it to build a nice web app since the article was published. The specific errors are a syntax error and “event_popup is undefinied”
justir
What’s your browser?
Michael Ivey
I’m using Win/IE6. I thought it was strange that the examples didn’t work, considering my own pages using the same code work.
Kenn
1. a href=“foo” onclick=‘this.target=“_blank”;’
2. It’s valid XHTML strict, works on every 4.x – 6.x browser I’ve tried, doesn’t break Right Click/Open In New tab|window|whatever.
3. Sometimes those of us who do care about web applications, actually have given this some serious thought. Browsing a document != using a thin-client application. A good case for separate windows is when viewing an Excel attachment, or reading a help page in the middle of a partly-completed non-trivial form. For many real-time applications which have to issue nocache directives, using the back button will destroy previously typed content. You don’t want a separate window/tab, fine. Finish the form, then click Help. But I think it’s foolish to assume that most casual business users are even aware of the right click option. If this is my audience, why would I intentionally put a link that would wipe out edited input?
4. I like Zeldman’s idea of the web triumvirate:
XHTML=structured content
CSS=presentation
JavaScript/ECMAScript=behavior
Some folks seem to have a knee-jerk reaction to the third component from bad experiences with stupid DHTML-because-I-can design. But this is not 1998, and browsers are more than just content readers.
Just my $.02 …
Dante-Cubed
This is not 1998, the last time I checked (unless I walked into a time machine).
The days of flashy DHTML design are over. DHTML can still serve a useful purpose. The Behaviour layer can offer us amazing possibilities, and if some people don’t accept that that’s their problem.
Mike
I am one of those asked to use popups. Unfortunately mine don’t work properly at the moment and I don’t see why. http;//www.flcc.org/e107/content.php?content10 is the address. Can I bug someone to take a look. It may just be that I’m tired and am missing something, but still help is appreciated. BTW This, and many other articles at ALA have helped me out quite a bit. Thanks!
Julian Rickards
I haven’t seen anyone else comment on this but Opera 7 loads the link page into both the popup window and the main window – is there a fix?
Caio Chassot
Works fine here. op 7.23 win2k
Julian Rickards
I think I see the problem with my modification of your code in Opera – I used mlisten but contrary to your example (with features), I used class rather than id. I would like to use mlisten combined with class because id shouldn’t be repeated on a page and I have a planned use for this popup which could be used multiple times on a page.
Julian Rickards
I think I see the problem with my modification of your code in Opera – I used mlisten but contrary to your example (with features), I used class rather than id. I would like to use mlisten combined with class because id shouldn’t be repeated on a page and I have a planned use for this popup which could be used multiple times on a page.
Julian Rickards
I think I see the problem with my modification of your code in Opera – I used mlisten but contrary to your example (with features), I used class rather than id. I would like to use mlisten combined with class because id shouldn’t be repeated on a page and I have a planned use for this popup which could be used multiple times on a page.
Caio Chassot
Julian, I’m not sure what you mean. In the example page I use mlisten with classes:
mlisten(‘click’, getElementsByClass(‘popup’,‘a’), event_popup)
Julian Rickards
Hmmm, I will have a go at it again. Your example works, my application of your technique failed – my fault, not yours.
Julian Rickards
One aspect of accessibility was overlooked and I haven’t seen reference to it in this forum – alerting the user that a popup link will open a new window. I tried to modify popup.js by adding title to the raw_popup function:
function raw_popup(url, target, title, features) {
and
if(isUndefined(title)) title=‘Link opens in new Window’;
and
var theWindow = window.open(url, target, title, features);
and title to the link_popup function such as after ‘_blank’
,src.getAttribute(‘title’) || ‘Link opens in new window’,
but I think I am missing something because I am not seeing the tooltip of with the title text. Maybe this is not possible, I don’t know.
If anyone has a solution, please contact me at julian dot rickards at ndm.gov.on.ca.
Caio Chassot
I think a better way to warn the user is to provide a small image as an indicator by the side of the link. That could be achieved with a[target=“_blank”] selector (of course not working in IE), or, if we’re using the popup class, with a.popup
To use the title though, I don’t think the popup functions are the appropriate place to pass the attribute value. A better way would indeed be in the html itself <a title=”…”>, or, if it should be done by script, then it should be done by the time we assign the event handlers.
So, say we have an array or NodeList of popup links called popup_list, onload we’ll have the following code:
mlisten(‘click’,popup_list,link_popup);
map(popup_list,function(a){
a.title=‘opens in a new window’});
Sergi
why not this code (as explained in page 3):
a[href^=“http”] {
padding-right: 10px;
background-image: url(external.gif);
background-position: right !important;
background-repeat: no-repeat;
}
Julian Rickards
Got it!!
Two variations:
Variation 1:
Adds the title attribute where anchor tags have class=“popup”.
onload = function()
{
var i = 0, thislink, poplinks = getElementsByClass(‘popup’,‘a’);
while (thislink = poplinks[i++]) {
thislink.setAttribute(‘title’, ‘Link opens in new window’);
}
}
Variation 2:
Adds additional text where anchor tags have class=“popup”.
onload = function()
{
var i = 0, thislink, poplinks = getElementsByClass(‘popup’,‘a’);
while (thislink = poplinks[i++]) {
var title_text = document.createTextNode(” [Link opens in new window]”)
thislink.appendChild(title_text);
}
}
Now I am going to try to see if these functions may be built into Caio’s lib.js
Caio Chassot
Julian, I’d advise against directly setting window.onload, due to imminent script clashing.
A better way to ensure script interoperability and concurrency would be to use listeners, by using the DOM’s “addEventListener”, or my x-browser wrapper “listen”. This way many scripts may assign different handlers to the same event.
On an unrelated note and a matter of personal style, I’d suggest that you check out my “map” function, as I find it a much cleaner means to traverse a list and do something to it than for or while loops with an increment counter.
Julian Rickards
I appreciate your comments Caio. I am for the most part, just a newbie at JS but I am able to understand what I have done. I use the word “I” loosely because it was with some help from another member of SitePointForums.com that I was able to put this together. The other person wrote most of the code and left it for me. I then tried it, found it didn’t work, using the Moz JS console, I deduced the problem, made the fix and offer it. If I have a look at your code (your skills are much greater than mine), I would go dizzy. However, what I/we have done is added a functionality (however poorly) that I felt was missing from your excellent application. As I have mentioned before, if you would like to take what I have done and incorporate it into yours however you feel it should be done, please do so.
I personally would feel much more comfortable if either the title text or additional link text were added to the application. It fits in much better with checkpoint 10.1 of the WCAG which says (from my memory) that either don’t use popups or open new windows or if you do either, warn the user. Nevertheless, friends of mine argue against any target attribute or JS popups but others are not quite so opposed. For those, including myself, who take the more lenient approach, I feel that this one inclusion now raises this application up to the bar set by 10.1 of the WCAG.
Julian Rickards
One more thing. I understand what you mean by event listener and most certainly, I can see how it applies to your original code: listen for a click, then run code. However, can the event listener be told to listen to onload? In the case of my first snippet of code, onmouseover would be sufficient to generate the title attribute because you can’t see the title text until the mouse is over the link text (in addition to onmouseover, onfocus should be accounted for too). However, in the second case, the modification of the link text would have to occur at load time.
Caio Chassot
Julian, you can add a listener to onload, in fact, I do it in the article when I first mention my listen function under the “separate logic and presentation” section:
listen(‘load’, window, function() {
listen(‘click’, ‘my-popup-link’, event_popup);
}
);
This listen block sets a function to be called when the document is loaded, which will then call listen again, this time to add the listener to a popup link.
You probably could use the following code to add the title attribute:
listen(‘load’, window, function() {
popup_list = getElementsByClass(‘popup’);
mlisten(‘click’, popup_list, event_popup);
map(popup_list, function(a){a.title=‘opens in a new window’});
}
);
Regarding adding this functionality to the script core, it’s such a one-liner that I don’t see how it could be “integrated” into it, or how it would be advantageous, specially since I don’t provide specific means to add the popup handlers (we use the general-purpose listen), and thus cannot modify it.
I guess you just type it when you need it. Or, well, we could just wrap the code I provided above in a function called add_listener_and_title_to_popup_class_links or something shorter.
lebenslauf
Your site looks great! Best of luck to you.
hauptschule
I like the way you set up that your info is the homepage, nicely done. Thanks!
gulliver
I joined this late… and I’m a marketer, not a site builder – so I get confused easily and I don’t pretend to grasp much of this.
I’m going back for a re-read to better understand.
Meantime, I’m looking for some practical clarity.
Advice appreciated. Please and thanks.
At risk of drifting off subject…
As a marketer I need to advise clients appropriately.
In liasing with their developers/staff, I often encounter ‘existing practices’ which are ‘perhaps not optimal’. An easily accepted simple example? …some enthusiastically use frames/tables. (Sadly, this includes webdevelopers delivering substandard service – either knowingly or through simple lack of awareness).
My ‘problem’ is that as a sole practitioner, I have to cover a lot of ground – too much to have all-areas expert knowledge. There’s much I don’t understand and, in efforts to develop a working awareness, I spend a lot of time here – frequently getting lost in tech stuff way beyond my competence and interest.
I got lost in this one very early on – and even more confused by 12 pages of follow-on. As I said ‘I’m going back for a re-read to better understand.’ And meantime, I want to know what to do – and no tpass-on poor advice.
I tried the examples at http://www.alistapart.com/d/popuplinks/examples.html
When clicked normally (on my aging IE5/OS9/Mac)…
1-3 open new small window.
4-5 open in main window.
6-9 open in new full size window.
When holddown/right click (intentionally open in a new window)…
1 blank new full size window
2-3 new small popup.
4-9 new fullsize window.
I’m guessing they’ll behave ‘better’ with more modern browsers on my OSX-equpiped laptop.
Thing is though – only 2 and 3 work on a machine/browser combo still in common use. Do I use them and ignore the others?
Caio Chassot
gulliver, apparently IE5/OS9 is having a problem with some code of my library that is relevant in setting up event listeners (perhaps it doesn’t support them at all, but I really can’t tell)
So the short answer is indeed, stick to examples 2 and 3 if the popup behavior for IE5/OS9 is important.
The long answer is that you can either get a coder to debug my library and find out what in it IE5/OS9 doesn’t like, or you can treat IE5/OS9 as an aging browser and let it fall back on the sub-optimal behavior that you describe: loading on a normal size (either new or same) window.
Notice that letting this happen does result in an accessibility issue since the documents still open, even if not in the desired popup fashion.
Caio Chassot
In the lasr paragraph:
Notice that letting this happen DOES NOT result in an accessibility issue since the documents still open (…)
Sorvoja
It was a good article, but it havn’t changed my opinion about popups. I will never use them.
gulliver
>treat IE5/OS9 as an aging browser and let it fall back on the sub-optimal behavior that you describe…
Thanks, C. That’s sound advice and something I’m increasingly accepting.
Julian Rickards
Hi:
Sorry to burst your bubble, but this script is partly broken in Opera as I had first suggested but I couldn’t see the pattern. From what I was told after asking around, it is a built in permissions thing that Opera is more strict about and other browsers seem not to be as strict. Set a popup link to open a page from a different domain and both the popup and the main window will go to the destination.
I don’t know JS so I don’t know if there is a fix. However, as long as you are creating popups from pages within your domain, you won’t see this problem.
Nathan Cocks
As a person who consistantly searches news feeds from a variety of sources, some using popups others not, I generally open new windows to view information.
It is heartening to see people advocating pop up code that will allow me to do my traditional ‘open in new window’ actions on links that use javascript.
Nothing more frustrating than opening the new window, having it fail, shutting that window down and clicking on the link normally.
Here’s hoping everyone takes this up.
michael schieben
Gulliver/Caio, some information i found concering event listeners and IE5/OS9 at http://developer.apple.com/internet/webcontent/eventmodels.html
“If you plan to support IE5/Mac, you can dismiss the attachEvent() and addEventListener() methods because IE5/Mac supports neither of these.”
There is only on way left to apply a function to an event (beside coding in the document structure):
element.onclick = myFunc;
I extended Caios listen function:
function listen(event, elem, func) {
elem = getElem(elem);
if (elem.addEventListener) // W3C DOM
elem.addEventListener(event,func,false);
else if (elem.attachEvent) // IE DOM
elem.attachEvent(‘on’+event, function(){ func(new W3CDOM_Event(elem)) } );
// for IE we use a …
else // IE5/OS9 elder browsers
eval(“elem.on” + event + “= func”);
}
The examples all work fine now.
Thanks a lot for your great article and the cclib.js!
Caio Chassot
michael, actually the thing (handling ie5/os9) is a bit more complicated than that: the function handling the event will expect an event object, but when a function is assigned to handle an event via “element.onevent = fn” it element itself will be passed as parameter to the function, so we must use the same wrapper we used for IE/win:
elem[‘on’+event] = function(){ func(new W3CDOM_Event(elem)) }
(also see there’s no need to use eval)
Terry
This was an excellent article, which demonstrated a lot of very usefull techniques, especially the listener model.
And, yes, I’m one of those users who usually opens up links in new windows and gets REALLY frustrated when some lame webdeveloper has javascript’ed their links.
Thanks again
Terry
Kali
Well, I came to this article hoping to find a way to stay XHTML 1.0 validated, but open offsite links in a new window (can’t be validated with target in your links) saddly, you can’t be validated with onclick in your links, either… anyone know of any other solutions?
Ondrej Valek
Haven’t tried this way yet. I’m interested in what happens, when you click on this right-way-made popup link with popups banned in your browser (such as Mozilla or some commercial popup-blocking proxies for IE).
Does it open at least the normal href link?
In my opinion, popus should not be used, unless necessary, and should be announced in advance (with some icon like for those abroad-targeting links). For example, it’s nice to use popups for internet radios’ “Now playing” windows.
User just should now that it is a popup.
Caio Chassot
Kali, there’s a solution in the article that works without onclick, and the target attribute is completely optional.
Caio Chassot
Due to a discussion in a recent post on Simon Willison’s blog (http://simon.incutio.com/archive/2004/05/26/addLoadEvent), I’ve updated “listen” in a more backwards compatible way, that may solve IE5/mac issues. Here’s the new code with a simple event test case: http://v2studio.com/k/code/newlisten.html