Interesting, didn’t know that. I just went through his script and saw what you mean:
var y = document.getElementsByTagName(‘link’);
var links = ‘’;
for (var i=0;i<y.length;i++)
{
if (y.getAttribute(‘rel’) == ‘stylesheet’) continue;
links += ‘ ’ + y.getAttribute(‘rel’) + ‘’;
}
links += ‘
‘;
links += ‘home’;
links += ‘sitemap’;
links += ‘contact’;
links += ‘copyright’;
However, I was not aware of it and unless you read the “making of quirksmode” article on the site you wouldn’t be either. So let’s be a bit more careful assuming that some ideas were taken from somewhere else, shall we?
Personally I am not a big fan of writing out HTML without generating it via DOM, but that is just me.
Copy & paste the code below to embed this comment.
manu
I have a website that must be accessible for non Javascript users, yet I want Javascript users to navigate the site usings a drop down menu (with Javascript redirection).
With this technique non-Javascript users do not have to see the (then useless) menu and only see the textual links I’ve placed in a noscript tag.
We are talking about two different things here. This technique is there to show accessibility enhancing LINK info for IE. A Javascript Navigation can be made accessible by simply making it non-dependent on Javascript but enhance it by it.
It works in IE5, you can test it by downloading the standalone IE5 versions out there on the web.
http://www.skyzyx.com/archives/000094.php
You can make a dropdown with javascript redirection accessible by applying the javascript onsubmit rather than onchange on the select. All you need is a Javascript fallback on the server side.
http://www.evolt.org/forms_javascript/
1. some good ideas on using existing markup in other ways
2. every idea at ala (and elsewhere) is to be built upon and explored (it still humors me to see the ‘I already did that’ post, or ’ I can do one better’… …that’s great…
but, man, sometimes these discussions make you not wanna write another article, huh?
so, nothing but thanks for your time and effort trying to help people.
Dante, as pointed out by Chris, using onsubmit on a button rather than onchange on the drop-down menu is the accessible option. The reason for this is the browser will only go to get a page when the user confirms they want that to happen.
If the user had limited mobility with a pointing device they may accidentally change the drop-down menu to an option they actually do not want. Or, maybe the user is negotiating the drop-down menu using the keyboard: they would use arrow keys to select the option they want and would then tab to the submit button.
Cheers, that was the reason. It is negotiable though if users who rely on keyboard navigation don’t actually know that a dropdown onselect is accessible when you pressl alt+arrow down first to expand it and then choose by using arrow up and down and submitting with enter.
Lynx, and maybe other text browsers, display the <link> links at the beginning of the document. If you include too many, it takes a long time to tab past them all to get to any links in the content.
A workaround is to make the first <link> point to an anchor at the beginning of the content, effectively skipping the <link> links.
My site uses next, prev, up and start “special” links extensively, with a “control bar” in the header to allow those without Opera/Mozilla to access them.
Copy & paste the code below to embed this comment.
Chris
What is a BFU? And let’s not forget that a lot of alternative User agents do support LINK to start with, and the dropdown only appears when DOM is available. This means that the chances of a User agent creating the dropdown not being able to render it is very slim.
Copy & paste the code below to embed this comment.
lunchmeat
i think this is a really cool idea, but the main problem i have with it isn’t the HTML bloating or the non-javascript browsers and whatnot. My question is: don’t browsers preload anything within a link attribute? anything in a link tag will be preloaded because of the html DOM. if there’s a way to turn off that option in the HTML somehow, that would make this much more worthwhile for me. i personally wouldn’t want to link a multitude of documents only to make my visitors wait for them to preload.
that’s really my one question, unless there’s a way to link to a document that contains all the links, a table of contents or index or sorts…i dunno, my mind is running away with the possibilities.
(i don’t know if anyone pays attention to these threads anymore, since the article’s a bit old…but there seems to be a tiny issue with spam up there.)
Copy & paste the code below to embed this comment.
rehfeld
some browsers may preload certain types of links, but unless the link is something like a stylesheet or a favicon etc… it will not delay the display of the page. but to my knowledge, most will not be preloaded at all.
i beleive in all newer gecko based browsers you can make the browser preload/prefetch by using:
<link rel=“prefetch” href=”/foo.html” />
again, this will not delay the display of the current page. it will be processed after the current page is done displaying.
Eric Meyer’s standards-based slide show (11-12/04), like Christian’s drop-down (5/04) splits one page into many “slides” and automatically generates a dropdown menu by which to navigate from one “slide” to another.
As you might expect, the differences between Eric’s and Christian’s ideas are as interesting as the similarities.
38 Reader Comments
Back to the ArticleChris
Interesting, didn’t know that. I just went through his script and saw what you mean:
var y = document.getElementsByTagName(‘link’);
var links = ‘’;
for (var i=0;i<y.length;i++)
{
if (y.getAttribute(‘rel’) == ‘stylesheet’) continue;
links += ‘ ’ + y.getAttribute(‘rel’) + ‘’;
}
links += ‘
‘;
links += ‘home’;
links += ‘sitemap’;
links += ‘contact’;
links += ‘copyright’;
However, I was not aware of it and unless you read the “making of quirksmode” article on the site you wouldn’t be either. So let’s be a bit more careful assuming that some ideas were taken from somewhere else, shall we?
Personally I am not a big fan of writing out HTML without generating it via DOM, but that is just me.
manu
I have a website that must be accessible for non Javascript users, yet I want Javascript users to navigate the site usings a drop down menu (with Javascript redirection).
With this technique non-Javascript users do not have to see the (then useless) menu and only see the textual links I’ve placed in a noscript tag.
My concern: does it work in IE5 (DOM support) ?
Chris
We are talking about two different things here. This technique is there to show accessibility enhancing LINK info for IE. A Javascript Navigation can be made accessible by simply making it non-dependent on Javascript but enhance it by it.
It works in IE5, you can test it by downloading the standalone IE5 versions out there on the web.
http://www.skyzyx.com/archives/000094.php
You can make a dropdown with javascript redirection accessible by applying the javascript onsubmit rather than onchange on the select. All you need is a Javascript fallback on the server side.
http://www.evolt.org/forms_javascript/
Dante
I’m posting from Northern Ireland right now so I won’t say too much…
Opera 7 already has this feature. But maybe you should use onchange for the form instead of a button.
Chris
And yes, as stated “Some browsers use its data to show a toolbar — alas, the son of the giant of Redmond does not, and his followers are legion.”
zack
1. some good ideas on using existing markup in other ways
2. every idea at ala (and elsewhere) is to be built upon and explored (it still humors me to see the ‘I already did that’ post, or ’ I can do one better’… …that’s great…
but, man, sometimes these discussions make you not wanna write another article, huh?
so, nothing but thanks for your time and effort trying to help people.
[undisclosed location]
peace
z
Lewis
Dante, as pointed out by Chris, using onsubmit on a button rather than onchange on the drop-down menu is the accessible option. The reason for this is the browser will only go to get a page when the user confirms they want that to happen.
If the user had limited mobility with a pointing device they may accidentally change the drop-down menu to an option they actually do not want. Or, maybe the user is negotiating the drop-down menu using the keyboard: they would use arrow keys to select the option they want and would then tab to the submit button.
:-)
Chris
Cheers, that was the reason. It is negotiable though if users who rely on keyboard navigation don’t actually know that a dropdown onselect is accessible when you pressl alt+arrow down first to expand it and then choose by using arrow up and down and submitting with enter.
Mark
Lynx, and maybe other text browsers, display the <link> links at the beginning of the document. If you include too many, it takes a long time to tab past them all to get to any links in the content.
A workaround is to make the first <link> point to an anchor at the beginning of the content, effectively skipping the <link> links.
My site uses next, prev, up and start “special” links extensively, with a “control bar” in the header to allow those without Opera/Mozilla to access them.
PNDesign
This is nice, but one problem is, that much BFUs don’t use drop-down list..or it is not effective way of navigation.
Chris
What is a BFU? And let’s not forget that a lot of alternative User agents do support LINK to start with, and the dropdown only appears when DOM is available. This means that the chances of a User agent creating the dropdown not being able to render it is very slim.
Rolex Replica
Opera 7 already has this feature…..
diseño web
congratulations for the article.
lunchmeat
i think this is a really cool idea, but the main problem i have with it isn’t the HTML bloating or the non-javascript browsers and whatnot. My question is: don’t browsers preload anything within a link attribute? anything in a link tag will be preloaded because of the html DOM. if there’s a way to turn off that option in the HTML somehow, that would make this much more worthwhile for me. i personally wouldn’t want to link a multitude of documents only to make my visitors wait for them to preload.
that’s really my one question, unless there’s a way to link to a document that contains all the links, a table of contents or index or sorts…i dunno, my mind is running away with the possibilities.
(i don’t know if anyone pays attention to these threads anymore, since the article’s a bit old…but there seems to be a tiny issue with spam up there.)
thanks.
rehfeld
some browsers may preload certain types of links, but unless the link is something like a stylesheet or a favicon etc… it will not delay the display of the page. but to my knowledge, most will not be preloaded at all.
i beleive in all newer gecko based browsers you can make the browser preload/prefetch by using:
<link rel=“prefetch” href=”/foo.html” />
again, this will not delay the display of the current page. it will be processed after the current page is done displaying.
heres an nice link
http://www.mozilla.org/projects/netlib/Link_Prefetching_FAQ.html
Neal Krouse
I see nothing, and I get several error messages in my Internet Explorer for Mac.
lunchmeat
thanks, very helpful. i might use that with my small site, which is only a few pages really.
apartness
Creatively related (but developed independently):
http://meyerweb.com/eric/tools/s5/
Eric Meyer’s standards-based slide show (11-12/04), like Christian’s drop-down (5/04) splits one page into many “slides” and automatically generates a dropdown menu by which to navigate from one “slide” to another.
As you might expect, the differences between Eric’s and Christian’s ideas are as interesting as the similarities.