Modules: Javascript Utilities
Contributed (contrib) modules are plugins for Drupal that extend, build or enhance Drupal core functionality. Use matching versions (modules released for Drupal 5.x will not work for Drupal 6.x). Contributed modules are not part of Drupal core releases and may or may not have optimized code/functionality. If a module solves your needs please consider joining forces and helping the maintainer.
Active edit
Enables editing of content or settings from the same page via popups.
This is the beginning of a full rewrite of the Active edit formerly included in Javascript Tools. So far it's only a skeleton. Dependencies: Popups module and Formfilter module.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 6.x-1.x-dev | 2008-Apr-04 | Download · Release notes | Development snapshot | |
Active menus
Activemenus makes the standard Drupal navigation menu expandable. Clickable, highlighted regions are added to the menu. When a collapsed menu item is expanded, the child menu items are loaded dynamically through AJAX.
Formerly part of the Javascript Tools package, Tabs is now an independent module as of Drupal 6. It requires the Javascript Tools module, which for Drupal 6 is a small collection of commonly needed utility functions.
Authored by Nedjo Rogers. Thanks to chx for tips and help with the Drupal 6 update.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 6.x-1.x-dev | 2008-Apr-24 | Download · Release notes | Development snapshot | |
AHAH Forms Framework
Note: This module is no longer under active development. It's functionality is now included in Drupal 6.
Ahah forms is a utility module, for adding Ajax/javascript driven incremental page reloading, without needing to write any Javascript.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.5-5 | 2007-May-23 | Download · Release notes | Recommended for 5.x | |
AHAH Fragment
AHAH Fragment is a module which returns a specified fragment from the requested page. This allows users to create callbacks for AHAH functionality with little or no code.
When the module is enabled, any HTML fragment of a page can be extracted by simply adding a get parameter to the url describing the fragment desired. Fragments can be described using standard css selectors like 'div.node' or 'div > span.class + #someid'
The module also integrates with thickbox to provide developers and themers a way to create a callback for thickbox windows without having to write any PHP.
Instructions for use are in the README.txt
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.x-dev | 2008-May-10 | Download · Release notes | Development snapshot | |
Ajax Checklist
The Ajax Checklist module implements a filter and associated javascript that allows you
to put something like this in a node:
--------------------------------------------
Things to do before leaving the house for DrupalCon 2007:
[cb all1 Discuss flights]
[cb some1 Book group flights]
[cb user-step1 Did you check if the heating is off?]
[cb user-step2 Did you feed the cat?]
[cb user-step3 Do you have your credit card?]
--------------------------------------------
This will generate checkboxes in the node text that will update their settings in the
database (associated with the node and the checkbox id (the 2nd field with eg. step2))
with an ajax call.
Any checkbox id that starts with user- will be linked to the user,
all other ids will be linked to the node.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.0 | 2007-Aug-18 | Download · Release notes | Recommended for 5.x | |
AJAX Forms Validation
By default in Drupal, when a form is submitted, the values of that form are sent through a series of Drupal validation procedures. When these validations are completed the validation messages are normally sent back to the user with a standard page refresh.
For example, if a user fills out a form which requires a first name, but the user leaves these fields blank, they will be presented with a message that says "First Name is Required".
This module allows the validation messages to be sent back to the user without a page refresh, so they appear in realtime. This makes for a more streamlined user experience. This module works well with Lightbox/Thickbox as well.
Configuration is very simple. Go to "admin/settings/ajax-validation". Select the node/form types for which you want to use Ajax Validation. Thats it.
To test the module, go to one of the forms which you selected. For example if you selected "Blog", then go to "node/add/blog". Then fill out the form, intentionally inputting invalid data or leave a required field blank. Submit the form. You should then see the validation messages appear at the top of the form near-instantaniously.
Please note that this module requires the JSON extension for PHP. Fortunately, JSON is bundled by default with PHP 5.2+ unless the --disable-json or --disable-all configuration options are provided when building PHP.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.x-dev | 2008-Apr-15 | Download · Release notes | Development snapshot | |
AJAX Session
AJAX session allows you to use AJAX to set PHP session variables. This could be useful, for example, if your website had a UI that could be altered with jQuery; after a UI element was altered jQuery it could use the javascript that AJAX session provides to set a specified PHP session variable used in rendering that UI element the next page load. For security purposes, any code that uses AJAX session must call a PHP function that registers a specified session variable. Once that is done, AJAX session will accept any AJAX post requests to modify that variable (assuming it originates from the IP address that the session is associated with).
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.0 | 2007-Sep-11 | Download · Release notes | Recommended for 5.x | |
Ajax Table
Overview
The Ajax Table module is an API-based tool that will allow other modules to create ajax-refreshable tables by supplying a few parameters. There are some handy utilities built in that aid in managing data more quickly than many Drupal modules offer by default. With an Ajax Table, it is easy to add ajax-based input columns to change data on the fly. There is also a utility that works similarly to an auto-complete field, but displays results in a fully customizable Ajax table, which supports pagination and in-place editing.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.2 | 2008-Jan-15 | Download · Release notes | Recommended for 5.x | |
ajaxeditable
This module adds the ability to edit a single element. The element needs to be surrounded by a DIV with the right things in it. This can be achieved by using something like contemplates,
You will need something like this:
<div class=ajaxeditable nid=<?php print $node->nid?> field="field_[name of your field]">........</div>More entertainingly, you can install editablefields, and then all the nice views you build with that will magically be editable using ajax....
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.x-dev | 2008-Mar-05 | Download · Release notes | Development snapshot | |
AJAXify
You can always create links that load other pages via AJAX but you will still load a full page HTML while you may only need a single HTML element from the loaded page and this is what AJAXify focuses on.
AJAXify allows created views, for example, to load a single HTML element from another page.
Project sponsored by OpenCraft.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.x-dev | 2008-Jan-02 | Download · Release notes | Development snapshot | |
Block Refresh
Block Refresh allows an administrator to set up any block to automatically refresh its content every x seconds. Uses jQuery. Configure on individual blocks.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.x-dev | 2008-Feb-29 | Download · Release notes | Development snapshot | |
CCK Edit Button
Provides an 'Edit Button' CCK field, allowing the content-type designer to add a javascript-enabled button to the CCK field set, active when the node is being edited, but hidden when the node is being viewed.
I wrote this module as part of a Kosada Inc development project. We're using this for an Appointment-Invoice content type --- the user fills in CCK fields for the appointment begin and end time, and then presses the "Calculate Billing Information" button (created with this module) whose Javascript code --- depending on the duration, time-of-day, and other factors --- calculates the number of billed hours, the rate, and the total amount, and fills in other CCK fields with this information. We chose to do it this way instead of using a "computed field", so that the user could tweak the computed values when necessary.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-0.9 | 2008-Mar-16 | Download · Release notes | Recommended for 5.x | |
CCK Fieldgroup Tabs
Display CCK fieldgroups in tabs. Enables splitting up content onto tabs in both editing and display.
Requires Tabs module as well as Content and Fieldgroup modules, part of CCK. For Drupal 5.x, Tabs module is part of Javascript Tools. For Drupal 6.x, Tabs is a separate module.
To use, install and enable the module, then navigate to content type administration at Administer » Content management » Content types. Create one or more fieldgroups for a content type and assign fields to the fieldgroup or use existing fieldgroups.
Each fieldgroup can be displayed on a tab. (It really only makes sense to do so for more than one, since a single tab serves no purpose.)
To get fieldgroups to display on tabs on content editing forms, select "tabs" as the "style" when configuring a fieldgroup under "Manage fields" for the content type in question.
To get fieldgroups to display on tabs when content is viewed, select "Display fields" and select "tabs" as the display style for the groups (e.g., under Teaser or Full).
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 6.x-1.x-dev | 2008-May-03 | Download · Release notes | Development snapshot | |
| 5.x-1.x-dev | 2008-May-01 | Download · Release notes | Development snapshot | |
Charts
Transform Data into Information. Charts is a very good way to highlight important information.
Features
- Data Schema: with one single data structure, you will be able to use several chart services
- 3 Chart plugins: out of the box, you will can choose among Google Chart, Open Flash Chart and FusionCharts
- Dozen Chart Types: lines, area, bars, pies, plotting and some 3D options
- Administration: administer Drupal core with beautiful charts
- API: integrate your own module
- Code Compliance: PHP E_ALL, Drupal code compliance, XHTML Strict, CSS valid code
Google Summer Code
We will probably be part of Google Summer of Code (SoC) 2008. Take a look on the Russell Creech's Google SoC application and the feature discussion.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 6.x-1.0-alpha4 | 2008-Apr-16 | Download · Release notes | Recommended for 6.x | |
Chili Highlighter
Chili Highlighter uses the Chili jQuery plugin to highlight code snippets on your pages with JavaScript. It falls back gracefully when JavaScript is disabled. Chili comes bundled with support for code snippets written in C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, and XHTML. Internet Explorer, Firefox, Mozilla, Opera, and Safari are supported.
It highlights <code> tags by default, but you can change it to <pre> tags or whatever way you markup code snippets in your content, as long as you know how to write a valid CSS selector.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.0 | 2007-Sep-24 | Download · Release notes | Recommended for 5.x | |
Click HeatMap
The Click Heatmap modules provides integration between Drupal and the ClickHeat library. The module itself does not record the necessary data or generate the click heatmaps themselves. Instead this module adds the necessary Javascript to Drupal pages in order to have the click data sent to the ClickHeat library.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 6.x-2.4 | 2008-Mar-10 | Download · Release notes | Recommended for 6.x | |
| 5.x-2.4 | 2008-Mar-10 | Download · Release notes | Recommended for 5.x | |
Cluetip
Cluetip Overview
The cluetip module is a wrapper for the jquery cluetip plugin which can be found here, and downloaded here. The Cluetip plugin provides nice, configurable hover-overs using the "title" attribute. The plugin has many options, and includes a "demo" folder, which you should check out to learn about how it works.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.x-dev | 2008-Jan-02 | Download · Release notes | Development snapshot | |
Collapsiblock
Collapsiblock makes all Drupal blocks collapsible.
Formerly part of the Javascript Tools package, Collapsiblock is now a separate module as of Drupal 6. It requires the Javascript Tools module, which for Drupal 6 is a small collection of commonly needed utility functions.
Authored by Nedjo Rogers.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 6.x-1.x-dev | 2008-Apr-25 | Download · Release notes | Development snapshot | |
Collect Nodes
Collect nodes is about collecting nodes "on the fly", either from a full node (with an additional block) or from a list of nodes (views). It's also about making collections (IE: being able to list, thanks to views integration, the collected nodes).
The huge evolution with this module is that it's based on a FULL (WEB)SERVICE architecture. It's not really going to work without services and json_server properly configured (the first collect_nodes client has been developped in js/jquery/json). The goal here is to have a full gap between the "client" (widget) and the service (database and business logic).
It's mainly done to be used later with other widgets (why not flex/air widgets which should be really easy to make).
For now on, the main features are:
- admin configuration: set all the node types which can be collected AND set a maximum amount for a user's collection (and a handler once this limit is over) for normal users to collect nodes (associated with a specific role you can give to your customers). After this limit, you can do what you want (make your customers pay, connect to a workflow, give them points, ...)
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.0-beta2 | 2008-Apr-28 | Download · Release notes | Recommended for 5.x | |
Compact Forms
Presents text fields provided by Drupal in a more compact fashion.
Does so by overlaying the labels on top of the actual text (and password) fields.
When the user focuses on the field the label fades away nicely and if the field
is left empty the label fades back in again.
By default, only the user login block is switched to compact style, but the behaviour can be added to any FAPI form (as well as others using a similar structure) by adding the corresponding CSS ID:s on the Compact Forms settings page.
- Screenshots available.
- Relies on jQuery.
- Degrades back to the original form when JavaScript is switched off.
- Fields like textareas and checkboxes are currently not affected.
- Inspired by A List Apart
Module developed by Tom Sundström for Bambuser.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.0 | 2007-Jul-29 | Download · Release notes | Recommended for 5.x | |
Craqbox
Craqbox is like thickbox but it's not thickbox... it's Craqbox.
Craqbox is another cool jQuery plugin that is designed like a web application window to use as like an inline popup for images, forms, pages, etc..
Update:
I have been doing some extensive work with modal windows + Drupal and have taken on a much more Drupalized approach benefiting both the module and theme level.
A new completely rewritten version will be posted before Christmas :)
Originally Sponsored By: HerFabLife.com.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.x-dev | 2007-Apr-16 | Download · Release notes | Development snapshot | |
Dependent fields
The ability to show/hide form items depends on the value of another form item
This module intent to simplify long form submission by your sites' users. Sometimes the user does not have to fill some form fields that may divert him/her from the most important field. Websites in which there are large forms may find this module helpful. You can use it with any kind of field type and it encapsulates itself into the CCK field's admin page.
The Dependent Field module also allows you to determine whether the dependent "child field" will be attached right after its "parent field" in the form or not. This way the user can easily see how the his/her choices affect the form.
The module also allows nested fields dependencies, which means that a field can depend on the value of a certain field that also depends on another field. This way you can start your node edit page with few questions and the user will explore the node form depending on his/her choices.
For now, The module only supports values from single on/off checkboxes or a group of checkboxes/radio buttons.
This module also supports the Related Subform module. It is possible to hide/show a subform element depends on a field's value.
Future developments:
- adding selection boxes to supported "parent" fields.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.3-beta | 2008-Apr-03 | Download · Release notes | Recommended for 5.x | |
Dynamic Persistent Menu
This module displays a horizontal menu in a block under which a submenu appears when an user hovers on an item. If the menu on the current page has a submenu, it's displayed by default, so this module degrades gracefully if Javascript is not present.
This module is sponsored by Koumbit.org
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.0 | 2008-Apr-04 | Download · Release notes | Recommended for 5.x | |
Dynamic Rendering
This module provides an very easy, user-friendly administrative interface for quickly implementing rendering rules for various technologies depending on Cascading Style Sheets (CSS) and/or Javascript (JS) on any Drupal site without requiring any adjustments to the site's theme.
Short list of available plugins: sIFR v2
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.1 | 2008-Feb-24 | Download · Release notes | Recommended for 5.x | |
Dynamic Views
Note: This module is current in an alpha stage and hasn't been tested enough for a production environment.
Dynamic views gives you the benefits of Views coupled with AHAH goodness. This module gives you the capability to dynamically update the content of your views using blocks, pagers, or filters — without a page reload. There are a few use-cases made possible by using this module:
1. Update the main content area dynamically by clicking on a node title in a teaser block.
2. Update the main content area, or a block's content by clicking on a page # of the pager.
3. Update your main content area by selecting an item from an exposed filter.
You can combine these use-cases to achieve other similar affects to your liking. The module also provides a second block for a block-enabled view that turns a pager on for that view-block allowing you to achieve the following use case with a 1 Full Node page view and a 2 or more pager enabled block view:
1. Update the Full Node by clicking on a node title in the block.
2. Update the blocks list by clicking on a page# from the pager.
3. Update the Full Node again from the new list in the block.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.x-dev | 2007-Jul-29 | Download · Release notes | Development snapshot | |
Editor - The Drupal WYSIWYG
Very early prototype, do not use on a production site.
The ALPHA has been released. Feel free to briefly take a look. Settings have not yet been fleshed out at all, as I have been working on the core functionality.
Please do not submit issues, as I am aware of many, and have a very long todo list (editor.module for details).
Bit of an update... I am nearing the first beta release, hopefully I will have some more time to work out the kinks shortly. I plan to launch 3 beta releases, with each providing more developer features as well as perks for the end user as well.
Development by vision media
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.0-alpha4 | 2008-May-07 | Download · Release notes | Recommended for 5.x | |
Embed widgets
Embed widgets allows a Drupal site to be embedded in external sites (including non-Drupal ones).
Initial development sponsored by patchak.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.x-dev | 2008-May-02 | Download · Release notes | Development snapshot | |
Ext
Loads the Ext JavaScript framework with Drupal. Other modules requiring Ext may use this module as a basis, which in the future will provide some useful functionality as well.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 6.x-1.x-dev | 2007-Sep-27 | Download · Release notes | Development snapshot | |
Form controller
Form controller closes a gap in Drupal's module framework. While we have CCK and Views for contents, Blocks and Panels for regions, and similarly configurable solutions for other things, we haven't had a module to configure and control forms.
The primary purpose of this module was to have a "Form Spy"-alike helper that aids in retrieving and selecting form ids for modules like Journal, #translatable, Fivestar, Compact forms, aso. However, it quickly turned out that Form controller is basically able to be a general purpose helper for most modules that implement hook_form_alter().
For this reason, Form controller does (almost) nothing on its own. It allows other modules to implement hook_form_controller() to allow administrative users to define settings for any FAPI-based form in Drupal. Form controller loads those settings and returns the form values back to the hook_form_controller() implementation (for now, that is). Modules can use this valuable information to alter/don't alter a form, or for whatever they like.
Form controller is very lightweight. Admittedly, the included JavaScript needs some love from a jQuery guru, however, it works for now.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 5.x-1.1 | 2008-Mar-02 | Download · Release notes | Recommended for 5.x | |
Fotonotes
Fotonotes – collection of scripts for annotating images. Fotonotes is very simple. Only 2 steps and all done. First, you have to select a part of image and write comment linked to selected part. Next, when user place mouse cursor over noted part of image, desire note will be showed. In such a way very convenient to select friends on collective photos, or components of complex schemes. This feature is common used, for example, on Flickr.com website.
Features:
- Fotonotes module integrates with Image module. It adds tab "Edit fotonotes" for all images. You may add notes for choosed image using that tab.
- Access control system allows to customize note permissions for any image. For example, moderators will may add-delete-edit notes for all images, advanced users will may add-delete their own notes for all images, but simple users will may add notes only for their images.
- Also, any amount of images with notes may be added into any content using bb-code [inotе=%] (sign “%” is replacing with nid-picture includes notes).
- There was error correction for Cyrillic fonts implemented.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 6.x-1.1-beta1 | 2008-Apr-07 | Download · Release notes | Recommended for 6.x | |
| 5.x-1.1-beta6 | 2008-Apr-07 | Download · Release notes | Recommended for 5.x | |
