Assign Anchor IDs Using MooTools 1.2

By  on  

One of my favorite uses of the MooTools JavaScript library is the SmoothScroll plugin. I use it on my website, my employer's website, and on many customer websites. The best part about the plugin is that it's so easy to implement.

I recently ran into a situation where the customer wanted the feature on a super-tight budget. We set them up with PHP includes which was a great help in allowing me to add the smoothscroll.js JavaScript file to every page, but in order to use SmoothScroll, every anchor needs an ID. Of course, their previous developer (we only moved their old content into a new system -- didn't update the HTML code) didn't add an ID attribute to each anchor because there wasn't a reason to. Unfortunately, their thousands of pages were loaded with anchors so we didn't have time to add id attributes to them.

Using some MooTools 1.2 magic, I figured out a way to make this work in no-time.

window.addEvent('domready',function() { 
	//makes sure anchors have ids
	$$('.content a').each(function(el) {
		if(el.get('name') && !el.get('id'))
		{
			el.set('id',el.get('name'));
		}
	});
	
	//smooooooth scrolling enabled
	new SmoothScroll({ duration:700 }, window); 
});

Before enabling SmoothScroll, I look for all anchors and add an ID attribute that mirrors the anchor's name. Quick fix to a potentially big problem.

Note: If you're good with regular expressions, please share a PHP-compliant regular expression that would find all anchors and add an ID attribute that mirrors the anchor's name. You will achieve immortality on my site!

Recent Features

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    dwProgressBar v2:  Stepping and Events

    dwProgressBar was a huge hit when it debuted. For those of you who didn't catch my first post, dwProgressBar is a MooTools 1.2-based progress bar which allows for as much flexibility as possible. Every piece of dwProgressBar can be controlled by CSS...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...