Unobtrusive Smilies :)
I don’t know whether you may find use for this, it might be a complete overhaul, but anyway.
Smilies are small inline images that represent a mood like being sad :( or help enrich the context with some emotion like winking after a joke ;). Everybody uses them but no one actually puts down those img-tags: we rely on our smart CMS’s to the job. Smilies are accessible since screen readers use either the title or the alternative text attributes of the img-tag. The problem is that such inline images aren’t semantically correct: they should be part of the text as text and not as images.
I’ve put down a small (~2KB minified) mixture which filters all smilies and replaces them with images in an unobtrusive way.
What is the basic?
Default behavior is to query the document for span-tags that have the class smiley. Each one option is customizable.
What’s the compatibility?
It’s known to work with Firefox 2, Firefox 3, IE5.5, IE6, IE7, Safari 3 and Opera 9 under Windows, Safari 3 under Mac OS X and Konqueror 3.5 under Kubuntu.
How to trigger it?
Use it just as any other unobtrusive JavaScript out there:
-
window.onload = function() {
-
uns.parse();
-
};
Or gain performance by providing a node where smilies are to be found, like the main content div-block:
-
window.onload = function() {
-
uns.parse({node: document.getElementById('content')});
-
};
You can also provide an onfinish callback:
-
window.onload = function() {
-
uns.parse({
-
node: document.getElementById('content'),
-
onfinish: function() {
-
alert('finished');
-
}
-
});
-
};
Or you can add additional smilies:
-
window.onload = function() {
-
uns.smilies({
-
':cska:': 'images/cska.gif'
-
});
-
uns.parse();
-
};
You can also AJAX load new content into some poor div and run the parser afterwards:
-
xhr.onreadystatechange = function() {
-
if (xhr.readyState == 4) {
-
var comments = document.getElementById('comments');
-
comments.innerHtml = xhr.responseText;
-
uns.parse({node: comments});
-
}
-
};
Where can it be seen?
I’ve put down a small demo.
Log
20.02.2008: 0.1 Initial release.
22.02.2008: 0.2 Added support for native getElementsByClassName and tested with Firefox 3, added support for IE5.5 and IE6.
