Mouse over Info on fields

Posted by mkhairul - May 22, 2008 at 12:05:10 am -

Categories: Development, blog



I'm creating a simple web app similar to del.icio.us but focuses more on a specific task. One of the features that I put in is the mouse over on a field will reveal an info (not tooltip). Not as nice as Wufoo though.

This stuff is used with jQuery 1.2.3 and in the screenshot of the mouse over info I used Blueprint CSS Framework.

Here is a screenshot of the web application.

screencap_22-05-2008-15413.jpg

screencap_22-05-2008-15553.jpg

Few lines of javascript...

PLAIN TEXT
JAVASCRIPT:
  1. $(document).ready(function(){
  2.     $('input').each(function(){
  3.        var name = $(this).attr('name');
  4.        $(this).bind('mouseenter mouseleave', function(){
  5.             $('.init').toggle();
  6.             $('#info_' + name).toggle();
  7.         })
  8.     });
  9. })

Few lines of html...

PLAIN TEXT
HTML:
  1. <fieldset style="padding: 5px; float: left; width: 300px; margin-right: 10px;">
  2.     <legend>Info</legend>
  3.     <p>
  4.         <label>Name</label>
  5.         <br />
  6.         <input type="text" name="name" />
  7.     </p>
  8.     <p>
  9.         <label>Email</label>
  10.         <br />
  11.         <input type="text" name="email" />
  12.     </p>
  13. </fieldset>
  14. <fieldset style="padding: 5px; float: left; width: 200px;">
  15.     <legend>More Info!</legend>
  16.     <div class="info init">
  17.         This is where the information box!
  18.     </div>
  19.     <div id="info_name" class="info">
  20.         Put your name in now!
  21.     </div>
  22.     <div id="info_email" class="info">
  23.         Put your real email in now!
  24.     </div>
  25. </fieldset>

And a few lines of CSS

PLAIN TEXT
CSS:
  1. .info{ display: none; }
  2. .init{ display: block; }

You can see the example here.

No Comments yet »

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds. Valid XHTML and CSS.