21 Mar

tracking external links with AJAX

There was a bit of chat on the #linux chatroom about how Donncha’s linktracker used a method which could be misread as an attempt to spam google.

So, we had a bit of a brainstorm, and Stewie suggested that I try using XMLHTTPRequest to track the link before it is followed.

…which I did.

On the example page, I have three links – two external, and one internal. I guessed that it’s silly to record internal links, when your web logs already do that, so I deliberately told the script to ignore internal links.

The script automatically searches the document for links, and attaches an ‘onclick’ event which calls the link tracker before the link is followed.

Donncha says he’ll be using it in his WPMU WordPress enhancement. I’ll be writing it into a plugin probably tonight, if someone else doesn’t do it first 🙂

update 2005-09-23: noticed this fantastic example of how to avoid all the AJAX malarkey to do this trick. I’m surprised I didn’t think of it myself! I’m blinded by science, I suppose – applying new tricks to everything, when a simple gimmick will do the trick even better. Well done, Martin!

21 Mar

collapsible menus updated

Through the encouragement of “Helen” (full name, location, website etc – unknown), I’ve been prodded into reviving an old chestnut of mine called the Collapsible Menu.

The idea of this script was that it takes menus that you create in the form of unordered lists, then it dynamically converts them into a collapsible menu.

For instance, if you have the following menu:

  <ul>
   <li><a href="/">home</a>
    <ul>
     <li><a href="/aboutme">about me</a></li>
     <li><a href="/contact">contact me</a></li>
    </ul>
   </li>
   <li><a href="/gallery">photo gallery</a></li>
  </ul>

You can add in the script:

  <script type="text/javascript" src="cm.js"></script>

And, with no extra work, you have a collapsible menu (example).

Yes yes, I know its not new – there are many people that do that these days. But back in the day, I believe I was one of the first to do it.

Anyway – the request I had from Helen was to change the script so it was possible to remove the [+] links and instead use the entire parent link as the opener/closer.

After much tardiness on my part (been busy and sick, in turns), I’ve done that requested work.

To use the parent link as the opener/closer, you need to override a variable. After the tag which includes the JavaScript, place this line:

 <script type="text/javascript">parentLinkIsOpener=1;</script>

An example of that in action can be seen here.

That’s about it really. But, before I submit this article, here’s a nice goody – A while back, Nathan Young took the script and made a bookmarklet out of it. Try it out! Bookmark the ul collapser, go to this page, then click on the bookmark in your bookmarks list. Violin!