SynapticBlue

Drupal Training, Consulting, & Development by Doug Vann
I am a codementor

    

 

Monday April13th Indiana Drupal Meeting on JQuery!

Sun, 2009-04-12 08:47 -- dougvann

JQuery Fun!

Here's a quick note about the next Indiana Drupal Users Group meeting. Details: http://groups.drupal.org/node/20776 We're going to have some fun with JQuery! In preparation for the meeting, I wrote the following instructions to give you an opportunity to check out JQuery on your own. Also see the attached file, courtesy of www.Lullabot.com If you find all of this particularly useful, please offer a comment. If you want to play around with JQuery do the following: * Get FireFox: http://www.spreadfirefox.com/ thats a Drupal site by the way! * Get Firebug Extension for firefox: https://addons.mozilla.org/en-US/firefox/addon/1843 * Go to http://www.learningjquery.com/2006/12/jquerify-bookmarklet and follow the instructions on the page where it says, "Or, simply drag the following link to your Bookmarks toolbar:" When you're done there should be a "jquerify" button on your toolbar. * Go To http:/www.microsoft.com (don't worry, We're going to mess with their site!) * Once the SSLLOOWW loading Microsoft front page loads... Click on the "jquerify" button on your toolbar. * Now hit F12 to open up your FireBug interface window. * Click on the CONSOLE button near the bottom left of FireBug. Select the ARROW attached to that button and choose: "Enable Console for Microsoft.com" * Now you see the text area to the far right of the FireBug window. Go over and paste th following line into that text field * $('img').fadeOut(4000); * Below that text field is a RUN button: Click it! * Watch the Microsoft logo slowly fade away under the power of JQuery! * Want to bring it back? * $('img').fadeIn(3000); Swap the fadeIn with a slideUp or a slideDown or a hide and have some more fun! If you're having any difficulty getting jquerify to add JQuery scripts to non-Drupal sites, then simply go to drupal.org (Or your own personal Drupal site) and open your FireBug console and test out your JQuery on the elements that you find there. - Doug Vann

file attachment: