Tom Riddle's Magical Diary Comes to Life with AJAX
Crash Course in Magic
If you haven't read the book, nor watched the movie, Harry Potter finds this diary with nothing written in it. When he starts writing in it, the diary erases what he just wrote. Then the diary itself writes a reply back on the same page.Being a hobby magican, I thought it would be nifty idea to create such a diary myself (although I'm not evil). The diary has been approved by the head magic teachers FireFox wand 1.01 and Internet Explorer wand 6.0. The magical diary can be seen at Tom Riddle's Magical Diary. A zip containing the source files can be downloaded from here.
How it Works
It's all really simple. I'm simply displaying a background of an open book, looking old and used. On top of it is a transparent html textarea. Whenever you stop typing for more than 1200 ms the secret spell XmlHttpRequest is triggered, posting your typing to an A.I Chatbot. The Chatbot's response is then displayed letter by letter to give the feeling that someone is actually typing it in real time. Each letter is outputted with a random interval to make it look even more human like. After the response text has completely been displayed, it slowly fades away before it disappears, just like in the movie. Ideally, i tried to get the text to become transparent but there are some issuses with cross browser interoperatbility on transparent text so I decided to go with fading instead.
The response display area is simply a <div></div>.
The innerHtml property is used to populate it since the response back from the chatbot contains HTML. The div area and the input text area are both defined to be in the same location on the screen.
Problems Encountered
I found it annoying that javascript doesn't provide a sleep() function, which would have reduced the complexity of the javascript quite a bit.
When the response from Tom is displayed, the letter by letter display on FireFox is flickering. I haven't had the time to think of how to fix this yet, if you know of any good way, please let me know.
Another problem I ran into was that I orginally hosted the diary on the icegreen server and doing an offshore HTTP request to where Tom's brain lives. An offshore request is when accessing a document on a domain different from the one the original document was retreived from. FireFox fails with the following exception




Tom Riddle's Magical Diary Come to Life with AJAX
Tom Riddle's Magical Diary Come to Life with AJAX
Re: Tom Riddle's Magical Diary Come to Life with AJAX
The chatbot server is a thirdparty running an opensource chatbot. The XML AIML files I'm using are pretty much the standard ones based on Dr. Wallcence's.