-
Book Overview & Buying
-
Table Of Contents
Drupal 6 Theming Cookbook
In this recipe, we will be looking at using JavaScript to add a clickable button to each block allowing them to be minimized or maximized upon clicking.
We will be using the myzen theme created earlier in this book as the example theme in this recipe. We will also be using a couple of icon images to indicate the minimized and maximized state of each block. These images are to be placed inside the images folder of the theme and named open.png and close.png, respectively.
The following steps are to be performed inside the myzen theme folder at sites/all/themes/myzen.
Browse into the js subfolder where JavaScript files are conventionally stored.
Create a file named block.js and open it in an editor.
Add the following JavaScript to the file:
Drupal.behaviors.myzenBlockDisplay = function (context) {
// We are targeting all blocks inside sidebars.
var s = $('div.sidebar').addClass('js-sidebar');
$('.block h2.title', s)
.click...
Change the font size
Change margin width
Change background colour