jQuery Cookie Demo

This is a Drupal module wrapper for the jQuery Cookie plug-in by Klaus Hartl. This plug-in makes it possible to create a cookie with the given name and value and other optional parameters.

This is another wrapper module that is easy to use in your own modules and blocks. Also note that quite a few other em>jQuery plug-ins rely on the jQuery Cookie plug-in. In those cases all you really need to do is to enable this module and the script is loaded automatically on page load.

This demo shows how you can interact with the cookies from pretty much anywhere in your application. The sidebar block has a few menu items to trigger various events.

For this demo, the jQuery Cookie plug-in is called on page load via the $.ready() method. The buttons in the block are then also linked to the $.cookie() method, but with the calls containing various action attributes.

The block code looks something like this:

[...]
case 'view':
 drupal_add_js([JS script my various callbacks], 'inline');
 $output = '<[button tag] id="[button ID]">'
         . '[button label]'
         . '</[button tag]>';
 $block['subject'] = '[my block title]';        
 $block['content'] = $output;
 return $block;
 break;
[...]

You can also try the following experiment: change the cookie contents, and navigate away from this page, come back, and the cookie contents should still hold what you set previoulsy (unless, of course, you delete the cookies within your browser).

jQuery FontSizer

[ UNDER CONSTRUCTION ]

This is a Drupal module wrapper for the jQuery Fontsizer plug-in originally created by Stefan Sedich and extended by me. This plug-in allows end-users to change the size of the fonts used in a given theme. This module also the developer to target specific HTML objects in order to limit what content is to be affected by font-resizing. For example, the developer may decide that only node content is to change size while the rest of the page remains unchanged.

This wrapper module supports all settings and attributes of the jQuery plug-in, and the module also contains a sample Drupal block that displays a button row to allow end-users to increase/decrease font size. This sites uses that button row (see top-left corner) to allow users to change the font size of the node content, but nothing else.

It's very easy to use this module wrapper and you can use it in your own modules and blocks, and even in your theme. This particular page uses 3 instances of the Fontsizer.

In the top-left corner of the screen you can see the theme-embedded version. It controls the node content on a given page, but it does not affect anything else.

On the sidebar you see the "jQuery Fontsizer" demo block which holds 2 instances of the Fontsizer control. The control in the block header only controls the text inside the block, while the control inside the block controls the blue demo area on this page.

Normally one would obviously not have 3 controls on a single page, and the plug-in is really designed for single instance (at least for now). But as you can see, it can be used in many different ways.

The Fontsizer supports 3 main functions that allow you to increase, decrease, and reset the font-size. Of course, that means in most instances you'd want to have a button-row with 3 corresponding buttons.

On this site I use the the following HTML code block to create such button-row:

[...]
<span id="fontsizer">
  <a onClick="$.FontSizer.DecreaseSize('.scale');">
  <img src="[ .. button image .. ]" alt="Decrease font size" />
  </a>
  <a onClick="$.FontSizer.IncreaseSize('.scale');">
  <img src="[ .. button image .. ]" alt="Increase font size" />
  </a>
  <a onClick="$.FontSizer.Reset('.scale');">
  <img src="[ .. button image .. ]" alt="Reset font size" />
  </a>
</span>
[...]

...

jQuery Heartbeat Demo

This is a Drupal module wrapper for the jQuery Heartbeat plug-in (created by Jason Levine and customized by A J Richards). This plug-in makes it possible to poll the server and/or trigger callbacks at given intervals.

It's very easy to use this module wrapper and you can use it in your own modules and blocks. And by using callback scripts, you can have several events triggered simultaneously as I do in this demo.

On the is page I've embedded a section into the content and I also have a block on the sidebar that gets updated. The sidebar block is updated both by calling a PHP script as well as by using callbacks to JavaScript functions. The content on this page is only updated via a callback.

For this demo, we've put the jQuery Heartbeat calling function in the block code, but you could also embed it into a module.

The block code looks something like this:

[...]
case 'view':
 jquery_heartbeat_set([delay], [div ID], [my PHP script], [my callback functions]);
 $output = '<div id="[div ID]">'
         . '[Text to be replaced with content from PHP script]'
         . '</div>';
 $block['subject'] = '[my block title]';        
 $block['content'] = $output;
 return $block;
 break;
[...]

• View source

In this particular example we use several callbacks separated by ';' (semi-colon). Also note that you only have to supply the [div ID] for jquery_heartbeat_set() if you are using a PHP script to update the content. If you're using Javascript callbacks, then you need to make sure they know what ID tags to manipulate.