jquery

My new favorite jquery tool for data table sorting and searching.

Excellent tool with as little or as much configuration as you'd need for most any project. Very slick.

Used this to commit horrible usability crimes at the client's request. Shame.

If your are not a jQuery dev, don't worry, there are plenty of excellent resources to get you started using jQuery to enhance your site.

Star here

http://drupal.org/project/Modules/category/101 ( Drupal Modules: JavaScript Utilities )

Then simply:

1. Browse
2. Download
3. Install & Configure

Some module which I recommend checking out

UI Improvements

• jTooltips: http://drupal.org/project/jtooltips - adds in context user feedback
  
• JQuery Interface: http://drupal.org/project/jquery_interface  - might not be D6 ready
  
• jQuery UI: http://drupal.org/project/jquery_ui - a full library of effects
  
• Username originality AJAX check: http://drupal.org/project/username_check - This is the kind of enhancements jQuery is perfect for.

Content Browsing

• jCarousel: http://drupal.org/project/jcarousel - nice for creating a recent post/image browser, or a headlines browser.
  • Also see @ http://drupal.org/project/jcarousel_block
    
• Views carousel: http://drupal.org/project/viewscarousel

Photos

• Thickbox: http://drupal.org/project/thickbox or Lightbox2: http://drupal.org/project/lightbox2 
  • @see Comparison of “lightbox” type modules: http://drupal.org/node/266126
  • @see Lightbox2 demo http://www.stellapower.net/lightbox2
• Slideshow Creator: http://drupal.org/project/slideshow_creator
  • @see Cool demo here: http://www.malsup.com/jquery/cycle/

Theming and Display

• jQuery Eye Candy: http://drupal.org/project/jq_eyecandy  - if you really must use jQuery rather than CSS
  
• JavaScript Theming: http://drupal.org/project/js_theming
  
• Page Style: http://drupal.org/project/pagestyle - a style changer in a block and in the browser for better Web Accessibility

jQuery Plug-in Management

• jQuery plugins: http://drupal.org/project/jquery_plugin - call jQuery plugins from any module or theme by calling the jquery_plugin_add($plugin) function
  
• jQuery Plugin Handler (JQP): http://drupal.org/project/jqp

• jQ: http://drupal.org/project/jq

Read More »

In D6, you can put a .js file in your base theme directory and it will automatically be loaded by Drupal.

You can also include a js file via an entry in your theme’s .info file:

scripts[] = your_javascript.js

However, I recommend the following:

Consider your JavaScript theme-able like HTML.

1. It should be able to be themed
2. Put JavaScript in .js file
3. Use drupal_add_js() in a theme function
4. If in a module, call it with hook_init()

As HTML in a theme function / tpl file, calling your JS with a theme function allows theme developers to modify or override your JS in the theme layer.

Here it is in a module:

<?php

/**

 * Implementation of hook_init()

 */

function trickoutmysite_init() {

 theme('trickoutmysite_javascript');

}

/**

 * Implementation of hook_theme()

 */

function trickoutmysite_theme($existing, $type, $theme, $path) {

  return array(

    'trickoutmysite_javascript' => array(

      'arguments' => array(),

    ),

  );

}

/**

 * A themable function which uses drupal_add_js to include the js file

 */

function theme_trickoutmysite_javascript() {

  drupal_add_js (drupal_get_path('module', 'trickoutmysite') . '/trickoutmysite.js');

}

?>

Read More »

Use jQuery to Enhance Site UI, Display, or Interaction

jQuery is an excellent tool for improving your site’s interface. It’s also helpful to target and change specific CSS and HTML elements quickly. [1]

I tend to use it mostly for UI (user interface) enhancements or when there is a semi-dynamic event in the display, after the page has loaded.

Examples uses include:

• User feedback in messages
• Tool tips (in-context user guidance)
• Enhanced image/gallery display
• Tabs for quick access to hidden information
• As a style sheet switcher (helpful with accessibility)
• Form enhancements and client-side feedback
• Menu enhancements
• Data entry such as a date picker
• Table and data sorting
• Media players
• Content flagging
• Tagging (better input methods)
• Loading additional content without a page refresh
• Dynamic Charts
• Content Carousels (albums, photos, headline news stories)

Do Not Use jQuery as the Primary Driver for Site UI, Display, or Interaction

jQuery should not be used as the primary driver of your site’s display and not as a cornerstone of any primary functionality for your site.

In other words, sure, enhance your web sites e-commerce process with jQuery, but have it:

1. degrade gracefully,
2. making sure people may still go through the e-commerce process,
3. even if jQuery fails completely.

Simple uses can have big impact

When consider the rendering of display effects such as rounded corners and color gradients, consider CSS instead.

Read More »