Monday, March 2nd, 2009

Secret: Time for some Monday fun

Category: Fun, JavaScript

Allan Jardine, a chap who I am a big fan of as he does great work, has a bit of Friday fun that I couldn’t resist putting up on a Monday. He has created Secret “a Javascript library which provides the functions required for scanning an HTML document for certain characters, locating those characters on the rendered page and then displaying them in a rather fun Harry Potter style”:

What Secret does is to take a string and then locate each individual character from that string on a rendered page. It will then duplicate each found character in place and finally display the original string in a rather fun ‘magical’ manner. It’s really an experiment to see if I could get the location of an individual character since that kind of information isn’t presented by browsers.

You can check out the code to get the fun details in how this all works:

The way Secret works is to firstly discover what HTML elements are currently displayed inside the browser viewport (it is preferable to take characters from the text which can be seen rather from any random point in the document), and read the text from each of the text nodes with in these visible elements. For each character in your message, Secret will scan through the text which has been found and randomly select one for display. If one can’t be found then it would fall back to look outside the hidden areas as well, and finally fail if a suitable character can’t be found.

Once a character has be found, it position in the document must be determined. Browsers don’t provide a convenient method for doing this with text nodes, and specifically individual characters, so what Secret does is to wrap a ‘span’ tag around the target. From there the getBoundingClientRect() method can be used to determine its location.

After that, its a case of calculating where on the screen the character should be displayed, relative to the other characters in the string (line breaks etc. must be considered) and animating the element into position. The animation is provided by the YUI library, which made this animation exceptionally simple to implement (thank you to the YUI team!). The core of Secret is independent of any library so you can use that for any application you which, only the animation requires YUI.

Posted by Dion Almaer at 4:01 am

3.7 rating from 26 votes


Comments feed TrackBack URI

Hey, I like this, made me chuckle also.

Handy idea wrapping the span around the charactor to use as a locator.
I’ve done something similar before, hiding a span on the page with a charactor in and testing the height of the span a few times a second. That way I could determine if the text had been re-sized in the browser window. It was a while ago though, might be some better ways of doing it now, was a pretty rare requirement :)


Comment by RobFrontEndDeveloper — March 2, 2009

Is this the same Al Jardine from the Beach Boys?

Comment by Nosredna — March 2, 2009

yawn… if you build something that doesn’t support IE, what benefit does it really serve to the general web authoring audience? No matter how cool your idea, if you can’t find a way to shim (even inefficiently) for IE, then how can we ever use it for any real purpose (assuming our jobs are of course to create content for the general web audience)?

Comment by shadedecho — March 2, 2009

@Nosredna – hah – No I’m afraid not… Sadly this Allan isn’t in the Rock and Roll Hall of Fame – nor am I ever likely to be!

@shadedecho – I understand your point of view, however it was never intended to be client facing. It is simply an experiment to see if I could do what I had in my mind’s eye. It certainly could support IE (particularly given that IE gave us getBoundingClientRect() in the first place…) if anyone wanted to make it do so, or if I were to deploy it for a client facing application. Isn’t part of our job also to push the boundaries through experimentation?

Comment by theallan — March 2, 2009

Raise your hand if the second or third word you typed was something dirty. This reminds me of discovering Sound Blaster’s Dr. Sbaitso in elementary school.

Comment by fretlessjazz — March 2, 2009

@theallan, fair point, and yes, our job IS to push technology. But I think you get my point that if you push it so far that you leave behind a browser that (however unfortunately) still has a huge chunk of the general web audience, then you’ve just done nothing more than a tinkering proof of concept. I like those things, but to be honest, I usually prefer to hear about things on Ajaxian with a broader applicability than just FF experimentation. It’s a cool idea, nonetheless.

Comment by shadedecho — March 2, 2009

@shadedecho – Agreed, supporting IE is absolutely fundamental to what we as web-developers do (even if it requires blood, sweet and tears). However to move forward from this state of affairs, we need sites such as Ajaxian to publish experimental work to put pressure on the browser makers.

Interestingly enough, this little script actually works a lot better in Opera and Webkit than in Firefox due to a bug in their getBoundingClientRect() implementation. Worth while just to find that!

Comment by theallan — March 3, 2009

Leave a comment

You must be logged in to post a comment.