I checked online and found suggestions to do with referencing prototype more than once, and not including the right bits of script.aculo.us (effects.js, I think it’s in).  But none of those were the case.

In the end I found the answer myself… I’d followed the generally good practice of placing all my javascript references and code at the bottom of my page (just before /body) which is how I always do things nowadays.  This works absolutely great when working with prototype as it means the page doesn’t have to wait for the library to load and things therefore aren’t unnecessarily delayed.  Now, I say it works great for prototype, it doesn’t however work for script.aculo.us, THIS HAS TO GO IN THE HEAD!

So, there we have it, if you hit this problem and you’re doing “the right thing” by including your javascript goodies at the bottom of your page, I’m afraid that won’t work here.  Move your JS references to your head and things work dandy again.  You can still do your actual javascript code before /body (which I would suggest you do), just include the references to prototype and scriptaculous in the head.

I hope this helps…. and saves some hair pulling.

Update: 15/03/2010 – Just had another instance of this (well, a colleague did) and we’ve uncovered another area that can throw this same error! Everything looked exactly right, so we were scratching our heads for quite a while… until I looked at the HTML source and noticed a random <br/> at the top of the page. Looking at the code I noticed that my colleague had been outputting some debug type info before the start of the document (in this case the debug info was empty, but it was outputting a “br” after it. This, by the looks of it, throws out the DOM, such that Script.aculo.us can’t do it’s thing and rather usefully gives us this same standard “Ajax.Autocompeter is not a constructor” error. So, if you’re still having issues… check your source! Commenting the debug line out (and this the “br”), fixed it.

:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ::

This is particularly useful if, like me, you want to know when this kind of thing is happening and need and quick way to remove it.  Yes, you can disable it but this gives you a more granular option.

So, here you go..

// ==UserScript==
// @name           Remove Google Customisations
// @description    Adds link to remove personal customisations from Google searches
// @include        http://www.google.co.uk/search?*q=*
// ==/UserScript==

window.addEventListener('load', function() {
	var d=document;
	var n;var as=d.getElementsByTagName('a');
	for(var i=0;i<as.length;i++){
		if(/View customi(s|z)ations/.test(as[i].textContent)){
			n=as[i];
			break;
		}
	}
	if(n){
		var a=d.createElement('a');
		a.href=d.location.href+'&pws=0';
		a.innerHTML='Remove customisations';
		n.parentNode.insertBefore(a,n.parentNode.firstChild);
	}
}, true);

That should do it.. I do have a bookmarklet version to if anyone wants it posted.

:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ::

var pc=gbc('[a-z]{1,2}\\d{1,2}[a-z]? \\d[a-z]{2}');
for(var i=0;i<pc.length;i++){
 pc[i].innerHTML=pc[i].innerHTML.replace(/([a-z]{1,2}\d{1,2}[a-z]? \d[a-z]{2})/ig,'<a href="http://maps.google.co.uk/maps?f=q&hl=en&q=$1,UK&ie=UTF8&z=16&om=1&iwloc=addr">$1</a>');
}

Obviously you need to ‘gbc’ function from my last post, but other than that, you just need to turn it into a bookmarklet and away you go. If you have any problems, let me know.

:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ::

Now, I make no claims that this is “a first”, as it probably isn’t, I wanted to write it, so I did.  If I’d have googled it, I’d have probably found something really quickly that did exactly what I wanted and would probably be far superior to what I have written.  I wanted to write it for fun really, but I think it’s actually quite useful, so here it is -

var gbc=function(contents,tag){
  var n=[];var s=tag||'*';
  var b=document.getElementsByTagName(s);
  var r=new RegExp(contents,'ig');
  for(var i=0;i<b.length;i++){
    for(var t=0;t<b[i].childNodes.length;t++){
      if(b[i].childNodes[t].nodeType==3&&r.test(b[i].childNodes[t].textContent)){
        n.push(b[i]);
        break;
      }
    }
  }
  return n;
}

Because I’m lazy I’ve called it ‘gbc’ (Get By Content), but obviously you can name it whatever you like.

You use it like -

var f = gbc('forums');

This would return all nodes in the current document which contain the text ‘forums’.

You could do -

var f = gbc('forums','a');

This would return all nodes matching the text ‘forums’ (within the text content, not attributes), but limit the search to just ‘a’ tags.

Because the first parameter (the text to search) is actually treated as a regex, you can actually pass it a string to treat as a regex. So -

var f = gbc('abc\\d+');

This would return all nodes which contain the text ‘abc’ followed by one or more numbers. Note the double slash, this is due to the way Javascript interprets the RegExp when using the ‘new’ style syntax, you need to escape any slashes.

That’s about it really, let me know if you use it or have any feedback.

:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ::

Given that it’s really diffcult to format code correctly in here, I’ll just point you to it as a file.  Just grab the file and and copy the contents as the location of a bookmark (preferably one on you bookmarks bar so you have easy access to it).  Then, whenever you’re on the add or edit post pages in your wordpress admin, you can click the link to add in the nifty “Social Bookmarks” section as if you were using the greasemonkey version.

Neat.

*Apart from those using IE as it seems to truncate all bookmarks longer than a predetermined max… what a PITA.

:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ::

This update just makes it work with the wordpress admin update.  Sorry for the delay on updating this.

If you’re using this greasemonkey script, you may want to grab the update.

:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ::

So, I thought I’d knock up a quick bookmarklet to achieve this, basically if you copy the code below as the location for a bookmark in your bookmark bar, you can click it to swap out the standard ‘Embed image’ code for BBCode for insertion to forums.

Here you go -

javascript:void(function(){
  var s=document.getElementById('lhid_snippet');
  if(s){
    s.value='[url='+document.location.href+'][img]'+/<img src="([^"]+)"\/>/i.exec(s.value)[1]+'[/img][/url]'};
}())

(you’ll need to get it back one line, it wont format correctly here as one line)
Enjoy

:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ::

So, I googled for something to achieve this (on wordpress.com rather than self-hosted) and came across a pretty nifty solution here. This involves keeping a template file and fiddling about doing a search and replace in a text editor and pasting the result back in to your post. You obviously have to remember to do this for each post you write. Although this is a perfectly good solution, I’m a bit lazy and thought I’d see if I could come up with something a bit quicker.

I decided to see if I could use a GreaseMonkey script to do it. After much fiddling, I’ve come up with this

My script inserts an extra section between the post body and the tags section. When you click the heading it generates a block of HTML using Archgfx’s template mentioned earlier.

You can then click in the newly inserted textarea, copy the code and paste it in to your post (HTML view, add to the bottom of your post).

This is the first GreaseMonkey script that I’ve written so it’s not going to be that ‘elegant’, suggestions for improvement are appreciated.

I plan to make improvements to it when I get a chance so keep an eye out here for updates.

You can grab the script here (you’ll obviously need to install GreaseMonkey to use it!)

I’d like to get it to insert the code directly in to the textarea, but my knowledge of hacking tinyMCE is pretty much non-existent.

:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ::