Fat links, using JavaScript and CSS

Introduction

Fat links (also, one-to-many links, or multi-tailed links) are links that leads to multiple destinations. Futher discusion of why they are important. For more information, the Wikipedia article on the subject is suggested (though it is poor), and also Reviving Advanced Hypertext, an article from Jakob Nielsen written in 2005.

Fat links, where there is one link leading to multiple destinations, are not possible at this stage using just HTML. There are two work-arounds that many people use. One is to have multiple links in a sentence. E.g. These are some web pages on the subject of fatlinks (or similar). Another work around is to have the sentence, and then have multiple numbers (as references) at the end, hyperlinked to the relevant pages. E.g. These are some web pages on the subject of fatlinks (or similar) [1][2][3][4][5]. However, I thought that with some JavaScript (JS) added to the mix, it would be possible to not have to use such work-arounds, and instead have "true" fatlinks. This page demonstrates that I am correct. Later, after, after perfecting the JS method, but fiddling with the display, I thought, maybe it's possible to use CSS on it's own. Again, I believe this page demonstrates I'm correct. (Of course, the method used for CSS is not new. Menus have been created using only lists of links and the CSS hover pseudo element for ages. What I think is new is the inline nature of these, using spans rather than li lists or divs.)

There are two types of fat link. The first offers a list of options, and the user can select one. The second type opens all the linked to destinations at once. The example JS script offers both sorts, while the CSS version only offers the first sort.

Reasons people might use 'fat links' are many. They might offer a resource in multiple languages or formats, and want the user to choose (this is what the HTTP 1.1 header 300 is used for).

"Fat link" like menus have been used on the web for years. However, the difference between those and the attempts on this page, is two fold. Menus tend to be block elements, or within block elements, whereas I am attempting to make inline fat links. Secondly, I want as simple markup possible, so that the fat links can be entered by hand easily, if necessary. One further design aim is to make the whole thing look fine if there is no JavaScript or CSS (depending on which is being used).

JavaScript Examples

Using an external file

Want to see (will open four new windows/tabs) four example domains? I think you do. Go on, click it... And what about a list of HTML specifications?

You want more? Create your own damn examples. Those two should be sufficient.

Internal links

This uses links inside the HTML, with the links inside the span. four HTML specifications HTML 4.01, HTML 3.2, HTML 2, HTML+.

CSS Examples

While trying to perfect the layout for the first JS display example, I thought, maybe it's possible using just CSS.

Attempt 1

So, here are four example domains example.com, example.org, example.net, example.edu as demonstration. (I think they all link to a place on the IANA website, rather than display on their own now though). As another demonstration, here are four HTML specifications HTML 4.01, HTML 3.2, HTML 2, HTML+. (Based on CSS originally found at snook.ca.)

Attempt 2

A slightly nicer looking, but not as nice working, method is to make use of the CSS3 Target pseudo-class. Unlike the previous method, which just requires a hover, this requires an actual click to see the links. Four example domains example.com, example.org, example.net, example.edu as demonstration. Here are four HTML specifications HTML 4.01, HTML 3.2, HTML 2, HTML+.

Attempt 3

Third CSS attempt. So, here are four example domains example.com, example.org, example.net, example.edu as demonstration. As another demonstration, here are four HTML specifications HTML 4.01, HTML 3.2, HTML 2, HTML+.

Attempt 4

This uses different HTML to the previous attempts. The obvious problem is that the text following the 'fat link' squashes into the fat link. So, here are four HTML specifications HTML 4.01, HTML 3.2, HTML 2, HTML+ . I think another problem with the whole affair is the extra, horrid, markup required. Bleh. (Originally based on CSS and HTML from surguy.net.)

Attempt 5

This is text. And here are four HTML specifications HTML 4.01, HTML 3.2, HTML 2, HTML+ . This is more text.

Attempt 6

This attempt uses inline, rather than block, to display the fat links. It works well. Here are four HTML specifications HTML 4.01, HTML 3.2, HTML 2, HTML+ . One major problem is that if the 'fat' links go on to the next line, there is no way to click them.

Attempt 7

This attempt is identical to the previous attempt, uses inline-block. Here are: four HTML specifications HTML 4.01, HTML 3.2, HTML 2, HTML+ . One major problem is that if the 'fat' links go on to the next line, there is no way to click them.

Attempt 8

This is the same as attempt 1, except that there is no absolute. Which means it doesnt head off to the left. Here are four example domains example.com, example.org, example.net, example.edu as demonstration. (I think they all link to a place on the IANA website, rather than display on their own now though). As another demonstration, here are four HTML specifications HTML 4.01, HTML 3.2, HTML 2, HTML+. (Based on CSS originally found at snook.ca.)

Attempt 9

And what about a list of HTML specifications

Attempt 10

This one has simple CSS, only two spans plus the anchors. Four HTML specifications HTML 4.01, HTML 3.2, HTML 2, HTML+. But, as with ones above, if the link goes to the next line, it is impossible to click on them.

Attempt 11

This one has simple CSS, using the focus pseudo-classes on an anchor, with the rest of the anchors in a sibling span. Four HTML specifications HTML 4.01, HTML 3.2, HTML 2, HTML+. It only works if you give the anchor focus, and then do not actually activate it. The first anchor also must have a href attribute, otherwise it can't be given focus.

Attempt 12

This one has simple CSS, using the focus pseudo-classes on an anchor, with the rest of the anchors in a sibling span. Four HTML specifications HTML 4.01, HTML 3.2, HTML 2, HTML+. Let's see now. Same problem as 10 above.

Attempt 13

and again, Four HTML specifications More stuff here

Attempt 14

and again, Four HTML specifications More stuff here

Attempt 15

four HTML specifications HTML 4.01, HTML 3.2, HTML 2, HTML+

Potential problems, and design decisions

How to record destinations

The problem with fat links in the present system of HTML is how to record the destination URLs. There are a few potential answers to this, including: in variables in the JS; having the destination URLs somehow in the HTML (perhaps in a class attribute); in a separate file, loaded by the JS. I use two different methods, for the first JS method, I load an external file. For the CSS methods and the second JS method, the anchors are inline in the text, but with "display:none". This is then changed when you click, or hover (depending on the method).

In the first JS example, a fatlink is just an ordinary link, using the <a> tag, linking to an ordinary XHTML file. While with the CSS methods and the second JS method,, the "fatlink" isn't actually a HTML <a> tag at all.

JavaScript method specifics

Which fat, what not?

The method decided upon to distinguish between a fatlink and an anchor which is not a fatlink is a simple class. <a class="fatlink">

What if a user doesn't have JavaScript?

Because the initial anchor tag simply points to another file on the server, which lists all the destination URLs. If JavaScript is turned off, the browser will load that file, and the user will select the URL as if the page were just another XHTML page. However, with JavaScript turned on, this file is fetched, and the options are presented for selection to the user (or simply all are loaded).

What format should the file take

Due to limitations in JS and my understanding of JS, the file must be a valid XHTML file, with an extension of either "xhtml" or "xml". This file should contain at least one list (unordered <ul>) or ordered (<ol>)) with one or more list items (<li>). Each list item must contain only an anchor tag. This anchor tag must have a href attribute, and must have some text between the opening and closing tag. The rest of the file can be an ordinary XHTML file, perhaps with an explanation of its purpose.

How does this script work?

On page load, the script adds a "onclick" with with a return of whichever function, to each anchor with a class "fatlink" (it also makes sure that each anchor with that class has a unique id). When a fatlink is clicked, the XHTML file is loaded, and each <a> in a <li> is raided for the href attribute, and, if relevant, the text between the tags. Each location in a href is loaded if "loadall" is the fatlink type, else displayed in an unordered list next to the original anchor if displayall is the fatlink type.

How to use

Download the script, make your files as above, link to them from anchors with class "fatlink", preferably make sure that the fat links are different visually to ordinary links, add the load script to the file. This second step basically is: "window.onload = fat_addlink('displayall');" or "window.onload = fat_addlink('loadall');", depending on whether you want to display the link list, or just load all the anchors. (Note, unless you are manually adding onclick to the fatlinks (as is done in the examples above), you can only have one sort of fatlink on each page.)

CSS specific - What if a user doesn't have CSS

The links simply display after the "link" as ordinary text.

Which is better?

It depends on what you want. Neither JS method appears to work in MSIE 6, and I don't have access to any other version. The JS loadall method doesn't work in Ephinany 2.28 (with Webkit). The CSS methods all have problems, which vary, depending on the layout of the screen, and ordering of the text. And will probably not work in MSIE.

Other possibilities and further reading

This is not a topic that has wide spread discussion, however, there are some good pages out there. As well as looking at the pages referenced in the introduction, I suggested you browser the following pages:

Site & page info (footer)

Mostly handcrafted by Michael, this website was designed to standards, with the highest quality in mind, and in result. The code and content is freely available.

This page is located at http://next-nexus.info/webdev/play/fatlinks/ and was last modified on 2023-08-31.