background preloader

Drupal js

Facebook Twitter

Fancybox. jQuery libraries. PNG Behave! Knockout JavaScript Library. Front Themer. Front Themer helps you to map your Drupal theme implementations to very simple Javascript implementations.

Front Themer

This hopefully helps you to offload some of the theming cost to the user's browser by allowing you to maintain only one set of theme implementations (namely, your own Drupal theme). With Front Themer, it's a bit easier and more organized to implement architectures where your site has AJAX backends that serve e.g. JSON data instead of HTML. Front Themer is NOT a templating engine. It is NOT capable of any kind of logic or looping (or anything complex, for that matter). Front Themer defines a new hook, hook_front_themer_theme(), which you can use to map Drupal themes into JS implementations. The module comes with a submodule called front_themer_example, which provides a straightforward hands-on example on how to use the module, both in Drupal and in your Javascript code.

JavaScript Libraries Manager. This module is designed to facilitate re-use of some of the JS libraries (e.g. jquery UI) that ship with Drupal core, as well as to make it easier to for users to add custom JavaScript to a site.

JavaScript Libraries Manager

The purpose of this module is very different from the of the Libraries API module. This module allows an admin user to both enable JS libraries shipped with Drupal core (i.e. cause them to load on every page), or to link in external libraries via URLs, or upload new JS libraries or scripts that use the core or external libraries. This is a tool for site builders who don't want to write a module or figure out how to add JS via their theme, or who cannot add custom module or theme code to their site (e.g.

Drupal Gardens). It makes it easier for a site builder to add and manage custom JS without e.g. pasting it in a block. This module was developed by Acquia for Drupal Gardens. Script.js. Integration with $script.js - Async JavaScript loader and dependency manager.

Script.js

This takes some of the ideas behind the HeadJS module which unfortunately has been discontinued and applies them to the very excellent $script.js library by Dustin Diaz, which seems like a more robust script loader implementation. Let's see how it plays with Drupal! :) On Script Loaders Since downloading many small files at the same time is faster than downloading one big file, $script.js makes pages load blazingly fast and is especially beneficial for mobile browsers who may limit the size of individually cached javascript files. Dependencies This module depends on the $script.js library, please download and extract it to your sites/all/libraries directory or, if you use Drush: drush scriptjs-download Support For bug reports and feature requests, please file an issue. If you want to use a script-loader but are unsure about $script.js, check out LabJS or HeadJS. Maintainer Alex Weber. LABjs. jQueries. One of the user interface designer headache issue is about the version of jQuery they need on a plugin and most of the time, the plugin require different jQuery version than the one that Drupal provide. jQuery Update is a very useful for those who can fit their required plugins with the most updated version of jQuery.

jQueries

However, in many circumstances, they have to load a lot of jQuery plugins those require different version of the jQuery. Drupal itself or either the jQuery Update module allow only a single version of jQuery to be loaded on the same page. That the reason this module for. This module allow multiple versions of jQuery instances loaded on the same page. Module developers implement the 'hook_jqueries_include()' to return an associative array of version of jQuery they required and the java script variable name they which to refer the the specify version.

How it works Example In module code, the developer implements the hook_jqueries_include(): <? j16('#my_id').tabs(); Hooks <? Context Add Assets. Commits for Spritely Js. Documentation. Spritely is a simple plugin with only two key methods, sprite() and pan() both of which simply animate the background-image css property of an element.

Documentation

The difference between the two is that a 'sprite' image contains two or more 'frames' of animation, whereas a 'pan' image contains a continuous image which pans left or right and then repeats. Typically, in either case, you would use a png file (with or without transparency) for this. You might wish to use a transparent gif for Internet Explorer 6, though it probably won't look as good. Your html elements must already be the correct size you want the sprite to appear, but the background image will typically be larger than the html element, and the spritely methods reposition the background image within the html element. For documentation in languages other than English, please see Unoffical Documentation.

Please note: there is a problem with the current version of Mobile Safari on the iPad Quick start What's new in version 0.6? For example,