Tuesday, September 4, 2007

BlindDown-effect in the Notes Client using JavaScript

If you find this interesting, take a look at my "NotesFX", which has more effects.

I don't know if this could be considered a hack. It's probably not useful (at least not in this state), but still fun.

The BlindDown-effect is found in DHTML-libraries like Scriptaculous and Mootools. Scriptaculous demo-page

>>Download demo-application

To achieve this effect, I have a layer with a table inside. In the table, I have three computed fields. One of them contains the title of the "help message", one contains the message, and one is used to add line-breaks into (-> what looks like animation). The "line-break" field has a font-size of 3, so that the animation looks somewhat smoothly, but is not too slow.

I have a javascript-function that takes the delay between each line-break, number of line-breaks (iterations), message title, and title. The iteration-parameter is put into a global variable that decrements for each added line-break.

I use setTimeout to call the same function until iterations=0.

The messages is put into a javascript-object with arrays corresponding the parameters that should be passed to the "blind down" function. This to make it easier to maintain the messages.

I use Notes' (or rather JavaScript 1.3's) apply-method to apply the array to the blind-down function.

Each field's onFocus code:
blindDownMessage.apply( "", messages[this.name])

Example of the messages-object:
var messages = {
name: [ 10, 10, "Your name", "Here you fill inn your name.\n\nE.g. Donald Duck, Dillbert, etc." ]

If you're downloading the demo:
The demo-form is named "BlindDown". Open it in the Client to test the demo.

You could also put more advanced things in the layer.

Hide the cell-content initially. After the "animation" is finished, set the value to make the cell visible, click a refresh-button (hide it with a layer/etc), using javascript. E.g. document.forms.nameOfButton.click()

I haven't tested the above suggestion, so I don't know if it's possible to do in a usable way.


Nate said...


That is AWESOME!

This completes something I've been trying to finish for a while, so thank you SO MUCH!

Tommy Valand said...

No problem.. :)

NotesSensei said...

Waaaaay cool.
Now the next challenge:
Could you make an HTML editor (pick one: Dojo, fckEdit, etc) work in the Notes client?

Tommy Valand said...

You should be able to do that in a nice way, using an embedded frameset and the WebBrowser-control I used in my Sexifying.. post.

You'd probably have to hide most of the buttons of the DHTML web-editor to avoid creating documents that look horrid in Notes, if your goal is having a cross platform editor.

It would also probably be an effort making the editor run offline, which some customers want from their notes-apps..

Short version, I'm not up for the challenge.. :)