Smarter Interfaces with jQuery (and Drupal)

Creating Smarter Interfaceswith jQuery

Amit [email protected]

http://www.returncontrol.com/

What We’ll Cover

• Examples:1. Dynamic navigation2. More dynamic nav (or less?)3. Dynamic form components4. Popup calendars5. Multipart forms

• Learn:– How jQuery works with Drupal– Tips / techniques / tools

Example 1: Dynamic Nav• Expanding / Collapsing Nav Menus

– Nice Menus module

Tip 1: Look for Existing Modules First

• LOTS o’ options for dynamic menus:– Nice Menus– Simple Menu– Active Menus– DHTML Menu– Lucid Menu– Quick Menu

CC-Remix-NC http://www.flickr.com/photos/b-tal/163450213/

Back to Example 1: Nice Menus

• Mostly CSS• But uses jQuery to provide IE6 support

Technique: The Process

1. Let Drupal know about JavaScript / jQuery– In a module– Or in a theme (template / function)

2. Write the JavaScript1.Find the component(s) you want to modify2.Determine what actions to apply

1. Let Drupal Know

• Nice Menus notifies Drupal in the module– uses drupal_set_html_head()

http://api.drupal.org/api/function/drupal_set_html_head

– Other option is drupal_add_js() http://api.drupal.org/api/function/drupal_add_js

In nice_menus.module *function nice_menus_init() {

drupal_set_html_head('



'); …}

* simplified

2. Write the JavaScript• In nice_menus.js *

* simplified

$(document).ready(function() {

$("ul.nice-menu li.menuparent").hover( function() { $(this).addClass("over").find("> ul").show(); }, function(){ $(this).removeClass("over").find("> ul"). hide(); } );

});

What if we modify this?

• Make font bigger, fade in and out$(document).ready(function() {

$("ul.nice-menu li.menuparent").hover( function() { $(this).addClass("over").css("font-size", "16px").find("> ul").show(‘slow’); }, function(){ $(this).removeClass("over").css("font-size", "13px").find("> ul"). hide(‘slow’); }

});

Tool: Visual jQuery• http://visualjquery.com/

Example 2: More or Less

• Modify Nice Menus to hide some elements


• Remember the Process:– Step 1: Let Drupal know about our JavaScript• In this case, theme (page.tpl.php)

• jQuery not loaded by default if no other scripts…• So, need to make one change first…

Making Sure jQuery Gets Loaded

• In page.tpl.php, find this:

<head> <title><?php print $head_title ?></title> <?php print $head ?> <?php print $styles ?> <?php print $scripts ?> …</head>

Making Sure jQuery Gets Loaded

• Replace with: <head> <title><?php print $head_title ?></title> <?php print $head ?> <?php print $styles ?> <?php drupal_add_js('misc/jquery.js', 'core', 'header'); print drupal_get_js(); ?> …</head>

• Or in Drupal 6, put an empty script.js file in your theme directory

Example 2: More or Less• Step 2 of Process: Write the JavaScript

– Tip: Start from the outside and work inward

<script type="text/javascript"> $(document).ready(function() { });</script>


• Step 2.1 of Process:Select the component you want to modify.

• Tool: Firebug Firefox add-on– Allows you to inspect page structure

(among other things)

Example 2: More or Less• Tip: Start from the outside and work inward– We want to hide everything beyond the

fifth menu item

<script type="text/javascript"> $(document).ready(function() { $('#nice-menu-2 li:nth-child(5) ~ li').hide(); });</script>


• Tip: Start from the outside and work inward– Now append “more” and “less” links

<script type="text/javascript"> $(document).ready(function() { $('#nice-menu-2 li:nth-child(5) ~ li').hide(); $('#nice-menu-2').append( '<li><?php print l('more', '', array('attributes' => array('class' => 'toggle'))); ?></li>' + '<li style="display:none"><?php print l('less', '', array('attributes' => array('class' => 'toggle'))); ?></li>' ); });</script>


• Finally, handle the “click” event<script type="text/javascript"> $(document).ready(function() { $('#nice-menu-2 li:nth-child(5) ~ li').hide(); $('#nice-menu-2').append( '<li class=""><?php print l('more', '', array('attributes' => array('class' => 'toggle'))); ?></li>' + '<li class="" style="display:none"><?php print l('less', '', array('attributes' => array('class' => 'toggle'))); ?></li>' ); $('.toggle').click(function() { $('#nice-menu-2 li:nth-child(5) ~ li').toggle(); return false; //important! }); });</script>

Voila!

Example 3: Dynamic Form Components

• Show character count as user is typing?No problem!


• Step 1: Let Drupal Know…– Forms involved, so hook_form_alter (so module)– jqintrochars.module:

function jqintrochars_form_alter(&$form, $form_state, $form_id) { drupal_add_js(" //something goes here ", 'inline');}

We can use drupal_add_js() instead of drupal_set_html_head() because we’re inserting straight JavaScript code -- not any HTML…


• Step 2: Write the Code$(document).ready(function() { $('#edit-title'). after( '<div id=\"chars\">characters: 0</div>' );});


• Step 2: Write the Code$(document).ready(function() { $('#edit-title'). after( '<div id=\"chars\">characters: 0</div>' ). keyup(updateCount);});

function updateCount() { $('#chars').html( 'characters: ' + $(this).val().length );}

Ka-pow!

• Could take additional action after some number of characters…

function updateCount() { $('#chars').html( 'characters: ' + $(this).val().length );

if($(this).val().length > 20) { $('#edit-body').parent('.resizable-textarea').hide('slow'); } else { $('#edit-body').parent('.resizable-textarea').show('slow'); }

}


Sha-zam!

Example 4: Popup Calendars

• Remember to check if module already exists?– CCK Date Module


• But what if…– You want to use the datepicker on other fields,

not the Date CCK field?– You’re on Drupal 5 and want to use jQuery UI

datepicker?

http://docs.jquery.com/UI/Datepicker

Tool: jQuery Update Module

• Brings Drupal up to date with jQuery 1.2.6http://drupal.org/project/jquery_update

Example 4: Popup Calendars1. Create a new module2. Get the ui.datepicker.js and ui.datepicker.css files and put them in the module

directory3. Here’s your hook_form_alter() code:

function testdate_form_alter($form_id, &$form) { if($form_id == ‘presentation_node_form') { drupal_add_css(drupal_get_path('module', 'testdate') . '/ui.datepicker.css'); drupal_add_js(drupal_get_path('module', 'testdate') . '/ui.datepicker.js'); drupal_add_js(' $(document).ready(function() { $("#edit-title").datepicker({ closeAtTop: false }); }); ', 'inline'); }}


Example 5: Multipart Forms

• An alternative to doing it in Drupal onthe backend

www.dublit.com


• The game plan:– Turn “Page” type into a two-part form• “Title” is on part 1

– Body is hidden– Next button

• “Body” is on part 2– Title is hidden– Submit button


• Step 1: Let Drupal Know…– Where’s the best place in this case?• Module, hook_form_alter()

if($form_id == 'page_node_form') { drupal_add_js(' $(document).ready(function() { }); ', 'inline');}


• Find the first component, take action…• Hide #edit-body-wrapper

if($form_id == 'page_node_form') { drupal_add_js(' $(document).ready(function() { $(“#edit-body-wrapper”).hide(); }); ', 'inline');}


• What’s the next thing you want to do?• Change the button to say “Next”

if($form_id == 'page_node_form') { drupal_add_js(' $(document).ready(function() { $(“#edit-body-wrapper”).hide(); $("#edit-submit").val("Next").click(pageMng) }); ', 'inline');}

Example 5: Multipart Forms• What should the pageMng function do when button is

clicked?• Change the button to say “Submit”• Show title, hide body

var page = 1;function pageMng() { if(page == 1) { $(this).val("Submit"); $("#edit-body-wrapper").show(); $("#edit-title-wrapper").hide(); page = 2; return false; } else { return true; }} Huzzah!

Thanks!

Amit [email protected]

http://www.returncontrol.com/

Technology

Smarter Interfaces with jQuery (and Drupal)