Notes

I'm not a Javascript guru, I just dabble a bit, and most of the time I would only reuse stuff from other persons. Until I spent a weekend with JQuery.

I needed a small JS lib to do some stuff in a application I'm working on. Basic stuff, like edit in place, building HTML live and adding more options to forms.

After looking at the tutorials and "how it works"-kind of pages, I started to try it out.

One of the things I wanted was a dismiss specific paragraphs that we use for success or error messages.

I found an example on the JQuery blog that looked promissing. It would hide the message after 5 seconds. The code is simple:

$(document).ready(function(){
    /* add class timed_fadeout to fadeOut after 5 seconds */
    $('p.timed_fade_out').animate({ opacity: 1.0}, 5000, 'linear', function () {
      $(this).fadeOut("slow");
    });
});

You just need to add a class named timed_fade_out to any <p>.

But this was perfect. I didn't want it to just fade way automagically. I wanted the user to click on a dismiss link. So I wrote this:

$(document).ready(function(){
    /* Add dismiss class to append link that closes box */
    $(' <a class="dismiss" href="#">(dismiss)</a>').appendTo('p.dismiss');
    $('a.dismiss').click( function () {
      $(this).parent('.dismiss').fadeOut('slow');
      return false;
    });
});
/* CSS: a.dismiss { color:#999; font-size: 80%; } */

And it worked! First try!

The thing about JQuery, is that it fits my brain, and I don't have to think the way the library works. Very cool.