Assign Anchor IDs Using MooTools 1.2
Written by David Walsh on Thursday, April 24, 2008
Click here to learn what has changed to make your code framework-compatible.
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!
Wow !!
It’s very better than SmoothScroll.js normal !
Thanks a lot ;)
Your last sentence reads, “Before enabling SmoothScroll, I look for all anchors and *an* ID attribute that mirrors the anchor’s name.”
Did you mean “and add” instead of “and an”?
http://regexlib.com/REDetails.aspx?regexp_id=1526 or:
<a\s+(?:(?:\w+\s*=\s*)(?:\w+|”[^"]*”|’[^']*’))*?\s*href\s*=\s*(?\w+|”[^"]*”|’[^']*’)(?:(?:\s+\w+\s*=\s*)(?:\w+|”[^"]*”|’[^']*’))*?>[^<]+
An easier way:
If your HTML code is already standards compliant, just filter your string like this:
function anchors_demand_ids($str){
return preg_replace('#<a (?![^>]*id *= *")(.*?)name="(.*?)"(?![^>]*id *= *")(.*?)>#', '<a \\1id="\\2" name="\\2"\\3\\4>', $str);
}
i’ve quickly tested it with:
$big_str=’
<a href="sadasd" name="1" rel="1">sadasd</a>
<a href="sadasd" id="2" name="2" rel="2">sadasd</a>
<a href="sadasd" name="3" rel="3">sadasd</a>
<a href="sadasd" name="2" rel="2" id="2">sadasd</a>
‘;
print anchors_demand_ids($big_str);
seems to be fine :)
PS: please delete my previous comment as it has no html chars.