Sticky Table Headers ala Drupal 6, for Drupal 5

I'm starting to build new websites with Drupal 6 now that the juiciest modules (CCK and Views especially) are nearing stable releases, but Drupal 5 is still very widespread, so I expect a lot of people will be using it for at least a matter of months, maybe years.

Drupal 6 offers a nifty and useful javascript effect on administrative tables: the table headers stick to the top of the browser window as you scroll down. This is especially handy on pages like the user permissions page with its bajillion checkboxes. Drupal 5 doesn't have this, but with a little bit of code, you can get it. I've made a little module that, when installed, will add sticky headers to the user access page in Drupal 5. It requires jQuery Update 5.x-2.0 or later.

Download Sticky Headers module »

Once you've installed and activated both jQuery Update and Sticky Headers (they're both in the User Interface package on the modules page), you should be able to look at your user permissions page (called Access Control in Drupal 5) and get a scrolling table header to help you keep your place.

Some notes:

  1. This module works by injecting an HTML class (sticky-enabled) into the table tag used for the user permissions page. The included javascript file looks for that class and does its magic.

  2. I made it work by overriding theme_user_admin_perm() from the core user.module. The function is named phptemplate_user_admin_perm(), so if you want to override that table in your theme, you'll need to make sure your function is named mythemename_user_admin_perm() or you will run into naming conflicts.

  3. With this module enabled, you can add the functionality to other forms throughout Drupal. With themeable forms, you just look for code that looks like this:

    $output = theme('table', $header, $rows, array('id' => 'whatever'));
    

    And in your theme where you override that function, add the sticky-header class like this:

    $output = theme('table', $header, $rows, array('id' => 'whatever', 'class' => 'sticky-enabled'));
    

    From there, it should just work.

  4. The colors in used for the sticky headers are hard-coded right now. If I didn't hard-code it, the background on the sticky header was transparent, which made it hard to see. So for now, it's always black on white. In the core themes, you probably won't notice.

  5. I don't think I'm going to try to add this to the Drupal repository. It's useful, but I don't know if cluttering things up with a small backport module like this is a good idea.

Categories: 

Comments

Jhef Vicedo

thanks for the backport :) very useful.

Tyler Steingard

This broke with the latest release of Drupal 5.21. It is breaking a few other JS features as a result.

Any ideas on how to patch?

Firefox reported this error: Error: $("body").hasClass is not a function Source File: sites/all/modules/sticky_headers/tableheader.js Line: 71

Unfortunately I'm not a Javascript wiz, so I'm having to turn off the module entirely... but the functionality is VERY helpful.

Joe

Tyler,

After updating to 5.21, or any Drupal 5.x release, you'll need to update the javascript files included with jQuery Update module. I suspect that's the problem you're facing. Glad you're liking it otherwise.

Comments are closed on this post to keep spammers at bay. If you want to chime in, please email or send a tweet.