(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)
- 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.
- 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)
- 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.