jQuery & mouse events

I’ve been really motivated on Mnemosyne since the start of the new year. A lot of features are working now, at least in functionality. Some code cleaning is going to be needed fairly soon or it will just become such a mess.

One interesting thing I was able to get working (in everything except IE, grumble) is a entry control menu to appear and disappear on mouse entry / exit.

Here are two screenshots with the menu on and off:

Basically, when the mouse enters the parent div of the entry, the absolute positioned div of the controls should appear, and when the mouse exits the div the controls should disappear.

I first tried doing this from scratch with my basic javascript understanding, but it wasn’t working properly. I couldn’t get a proper handle on the control div. I then tried the first jQuery on the site and it went a lot smoother. Here’s the code:

  $('div.entry').each( function(intElementIndex, objElement) {
    $(this).mouseover( 
      function(){ $(this).find('div.entry-controls').css("visibility", "visible"); }
    ).mouseout( 
      function(){ $(this).find('div.entry-controls').css("visibility", "hidden"); }
    );
  });

So, the selector gets all the entry divs, and registers functions to toggle the visibility of the child entry-controls div.

Other things I got working are user registration, and a recycle bin. Next on the plate is code refactoring, and improving the tag support.