Notelet nodelet utility for displaying pipe links

The HTML below, placed in your notelet nodelet, will give you a button that makes the pipe links on the current page visible.

For example, when the button is clicked, the paragraph above would read:

The HTML below, ( notelet editor | placed in your notelet nodelet ), will give you a button that makes the pipe links on the current page visible.

This is useful for reading things on E2 that have lots of pipe links for humourous or dramatic effect, without having to hover your mouse over all the links.

Note that in all versions you can save precious notelet space by altering the button text from 'Pipe links' to something shorter of your choosing, and by removing the space after 'if', which is just there to prevent this writeup breaking browser windows. If you like you can make it into a link rather than a button and save more space, by changing both instances of 'button' to 'a'.

A recent browser is required, because it is state of the art.

Internet Explorer & Mozilla & Netscape

If you're not pushed for space in your notelet nodelet, this version will work in IE and Mozilla and Netscape:

<button onClick="L=document.getElementsByTagName('A');for(i=0;i<L.length;i++){T=L&#91;i&#93;;if ((E=T.title)&&(H=T.innerHTML)!=E)T.innerHTML='( '+E+' | '+H+' )'}">Pipe links</button>

Platform specific

Internet Explorer

This version is fractionally smaller.

<button onClick="L=document.getElementsByTagName('A');for(i=0;i<L.length;i++){T=L(i);if ((E=T.title)&&(H=T.innerHTML)!=E)T.innerHTML='( '+E+' | '+H+' )'}">Pipe links</button>

Updates for other browsers are most welcome.

Thanks to BlakJak for testing.

(I suggest reading TenMinJoe's writeup first. This is an appendix to that node.)

---

The code block established by TenminJoe works perfectly as is, but there are some other modifications for display and code-length management that are available. (Caution- I have only tested the following for IE 6.0)

1. Make the format of link output change:
   

   The part of the code that reads '( '+E+' | '+H+' )' is the section to change. The +E+ is replaced with the pipelink text, and the +H+ is replaced with the link title. To add more characters, or edit them, just move around the "blocks" in any order. A non-variable character you want to include (IE- anything but the +E+ and the +H+) must be enclosed in apostrophes. This includes spaces, so remember that spaces will not appear if you do not put them in there. TenMin's output version looks like this:

   ( LinkDestination | Linktext )

   But the version I encluded moved everything around a bit to save 5 characters. Mine looks like this:

   Linktext(LinkDestination)

   There are other options, too:

   (LinkDestination|Linktext)= '('+E+'|'+H+')'
   (LinkDestination:Linktext)= '('+E+':'+H+')'
   [LinkDestination|Linktext]= '['+E+'|'+H+']'
   [LinkDestination:Linktext]= '['+E+':'+H+']'
   Linktext: LinkDestination= +H+': '+E+
   Linktext:LinkDestination= +H+':'+E+
   Linktext [LinkDestination]= +H+' ['+E+']'
   Linktext[LinkDestination]= +H+'['+E+']'
   Linktext(LinkDestination)= H+'<small>('+E+')</small>'

   The last one shows that regular text-editing HTML tags (<bold>, <italic>, <small> <big>, <underline>, <sub>, <sup>) can be used inside the link creation.
   
   
2. Make the button into a link:
   Though TenMinJoe briefly covered this in his writeup, there are few things he didn't mention. First of all- here is the complete code:
   

   <a onClick="L=document.getElementsByTagName('A');
   for(i=0;i<L.length;i++){if((E=L(i).title)&&(H=L(i).innerHTML)!=E)
   L(i).innerHTML=H+'('+E+')'}">A</a>
   

   This will create only an "A" in the notelet nodelet that looks like text. Fear not, valiant explorer! The text is actually clickable. Try clicking it once to see the effect. Click it twice, and bugs start appearing. If this happens by mistake, just refresh the page or go back to www.e2.com.

   To make the text that appears in the notelet change, change the capital A right before the end of the code to whatever you desire. If you wanted the link in the notelet to read "Pipelinks", then use this code:
   

   <a onClick="L=document.getElementsByTagName('A');
   for(i=0;i<L.length;i++){if((E=L(i).title)&&(H=L(i).innerHTML)!=E)
   L(i).innerHTML=H+'('+E+')'}">Pipelinks</a>
   

   Note that the bold part is the text that should be edited. Leave the section "getElementsByTagName('A');" alone. Even though it has an A in it, the A is used for a different purpose. (For those who know coding: to grab the beginning of an "a href" statement)
   
   
3. Make the pipelinks appear automatically on pageload:
   This is a smaller version of the code altogether, but it does not enable you the option to turn the pipelink-view on or off.

   <script>L=document.getElementsByTagName('A');
   for(i=0;i<L.length;i++){if((E=L(i).title)&&(H=L(i).innerHTML)!=E)
   L(i).innerHTML=H+'('+E+')'}</script>
   

   Seeing that link names that are the same as their destination (IE- harp goes to the node "harp" not "famous harpists") appear unchanged, I see no reason not to leave this option on all the time.
   Update 12-30-03: Well... one reason has popped up. If you have the viewer on all the time, then when someone pastes a huuuge link into the catbox as a pipelink, the catbox doesn't break it up. Your catbox will be half the size of your page (or more) until the comment times out.