jQuery

A fun jquery trick

Working on the Forum Thread module I came across a bit of a challenge. On one user's site the call to add an inline javascript file (drupal_add_js()) was being called from nodeapi twice. Since it is calling inline javascript drupal_add_js happily puts the script on the page twice.

In this case the script in question calls a "toggle" function to hide and show the comments on a given forum node. Since the script was there twice it obediently displayed and then immediately hid the comment body. Evidently users aren't keen on this method of speed-reading.

The solution then is simple. Use an external .js file. However, in this case to make the module easy to configure I wanted to allow users the choice of which css element identifies a "comment title". (An aside that the way this works is to hide and show the siblings of the title which does impose some requirements about how the comment is formatted.) So this makes it more complex because I want to include the proper selector in the script and still include it in a file.

To accomplish this I ended up splitting the jQuery function into a couple of separate calls. The first, an inline script, does an addClass to the user-identified comment title class. Then a file-based javascript acts on the newly added class to hide and show the comments as a website user chooses on each page.

It is possible to see the results in action.

Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques

cover of Learning  jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniquesauthor: Karl Swedberg
Jonathan Chaffer
asin: 1847192505
binding: Paperback
list price: $39.99 USD
amazon price: $39.99 USD


jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. In this book, creators of the popular jQuery learning resource, learningquery.com, share their knowledge, experience, and enthusiasm about jQuery to help you get the most from the library and to make your web applications shine. For designers, jQuery leverages existing CSS and HTML skills, allowing you to dynamically find and change any aspect of a page. This book provides a gentle introduction to jQuery concepts, allowing you to add interactions and animations to your pages-even if previous attempts at writing JavaScript have left you baffled. For programmers, jQuery offers an open -source, standards-compliant, unobtrusive approach to writing complex JavaScript applications. This book will guide you past the pitfalls associated with AJAX, events, effects, and advanced JavaScript language features, as well as provide you with a reference to the jQuery library to return to again and again. This book begins with a tutorial to jQuery, followed by an examination of common, real-world client-side problems, and solutions for each of them. A detailed reference rounds off the book, making it an invaluable resource for answers to all your jQuery questions. Who this book is written for This book is for web designers who want to create interactive elements for their designs, and for developers who want to create the best user interface for their web applications. The reader will need the basics of HTML and CSS, and should be comfortable with the syntax of JavaScript.  Read more »

jQuery goodness

While listening to the Drupal podcast #53 I decided it was time to take the plunge and do a few jQuery/Javascript things here. So comments will now preview live as they are being entered and thanks to the combination of imagecache (not jQuery related) and lightbox the pictures appearing in the more recent posts now display with the lightbox effect.

Syndicate content