Numberfy: add line numbers to your textareas
Ever wished textareas had native support for line numbers?
I, and doubtless the developers behind the many JSFiddle-esq sites out there these days, have.
So I've built a jQuery plugin that does precisely that. Just target the textarea(s) you want to add line number support to via a jQuery selector, call the numberfy method, and that's it.
Head over here to download, get usage info or view a demo.
$('#myTextarea').numberfy();
This tuned out to be an interesting little thing to build. The most challenging part, obviously, was getting the numbers to appear at the right positions vertically, to take into account line wrapping.
The solution here is simple but effective; on every keypress in the textarea, the textarea's current value is split into lines, then one by one each line is added to the clone and its offset height measured.
That tells us how tall the line is, including wrapping, and tells us therefore where to position the line number.
It's worth pointing out that the clone is not actually a clone of the textarea - it's a<p> tag; the reason is the clone needs to have fluid height, so we can read its offset height. A textarea's dimensions are never fluid.
IE, sod off
It doesn't currently work correctly in IE. This is because I discovered a little-known 'bug' in IE whereby text within textareas wraps differently from text in other areas - even where they have the same word-wrap / white-space CSS properties.
I moaned about it on Stack Overflow, and the consensus so far seems to be there's nothing that can be done about it. I'll keep looking at this.
Head over here to download, get usage info or view a demo.
Enjoy.
post a commentUnderstanding Javascript self executing functions
A colleague of mine asked yesterday what the point of self-executing functions (SEF) in Javascript was. This is a common question; surely a function, by definition, contains code that you wish to execute at some point later, not right now, no?
Yes, generally. But SEFs do have their uses - if you can get over the theoretical heressy that is a function executing itself.
The most common use of these in my experience is to 'capture' current values when assigning event handlers. Consider the following problem:
1var animal = 'dog';
2$('#someLink').click(function() { alert(animal); });
3animal = 'cat';
When you click the link the alert will say 'cat', not 'dog'. This is because the event callback is evaluated when the event fires - not when it is bound. In other words, our alert will say the current value of animal - not the value as it was when the event was bound.
You could get round this by using a SEF. First a demo, then the science:
1var animal = 'dog';
2var evtCallback = (function(animal) {
3 return function() {
4 alert(animal);
5 };
6})(animal);
7$('#someLink').click(evtCallback);
8animal = 'cat';
The crucial difference here is that our event callback is generated by a SEF. We do this to take advantage of the local scope it provides. When we pass it our animal variable, it takes its own, local copy of it - entirely unconnected with the variable of the same name in the outer scope.
So even though the outer scope animal changes value a few lines later, the copy of this variable in our SEF is fixed to the value it had at the time it was captured: 'dog'.
Obviously if real-world code was as simple as the above, we could just hard-code the word 'dog' in our alert, but you get the idea.
Incidentally, jQuery provides its own shortcut to achieve the above effect, using the bind() method. (bind() is the daddy of event methods; all others, such as click(), effectively get re-routed to this behind the scenes).
It allows you to pass in event data that, like our second example above, will be used in the event callback - protected from anything that happens in the outer scope between now and the time the event fires. Event data is passed as the second argument:
1$('#someLink').bind('click', {animal: 'dog'}, function() {
2 alert(animal);
3});
New Smashing article by me on image manip
Those nice guys at Smashing Magazine have just posted up my latest article for them, on image manipulation in jQuery and PHP.
It serves to highlight just how well PHP (specifically, its GD library) and Javascript go together in forming interactive web aps.
Short of a little flaming for my less-than-superb filetype verification technique in the PHP, the article has been generally well received.
post a comment
Update to lightbox and lightbox dialog
Of all my scripts, probably the one I've had the most use of is my lightbox and lightbox dialog library. More than a standard lightbox, it also provides dialog functionality so you can replicate native alerts and confirms but in a nice, styled lightboxy sort of way.
And it's just had an update, which now allows it to load absent files - that is, files not currently present in the DOM - as well as entire pages.
This is much better; it means you no longer have to load - but hide - full-size photos of thumbnails into your DOM. Now you can just point the lightbox script at it even though they're absent from the current DOM.
Pages open in an iframe loaded inside the lightbox (the size can be tweaked in the config).
For both techniques, run the lightbox plugin on a string pointing to the file to load, e.g.
1'folder/somePic.jpg'.lightbox(); //load absent picture
2'folder/somePage.php?someVar=3'.lightbox(); //load page
...and the script does the rest. Head over here to download, get usage info or view a demo.. Updated documentation to follow.
post a commentSmashing jQuery out now (I was technical editor...)
Following the article I wrote for Smashing Magazine last year, I was approached by their publishers, Wiley, to act as technical editor for their forthcoming book, Smashing jQuery.
This has just been published, and is available from Amazon here.
It's aimed at beginners to intermediate jQuery users and covers pretty much everything, from the basics - selectors, chaining etc - to more intermediate topics such as event handling and AJAX.
Speaking of Smashing magazine, look out for another article of mine shortly to be published on their website. It will be a tutorial on building an image manipulation tool using a mixture of jQuery and PHP.
post a commentBouncy text plugin
Some months ago I posted my Spraycan plugin. Just when you thought I couldn't post anything more pointless, I give you my bouncy text plugin.
This, erm, does what it says on the tin. You point it at some text on your page via jQuery selector, and it randomly makes the letters in that element bounce up and down.
Head over here to download, get usage info or view a demo.
It works in all IEs, Firefoxes and Operas, but currently not Chrome or Safari. How about that? Something works in IE6 but not Chrome. Rather amusing.
I will try to get out more.
post a comment
