At the office we’re starting out on a new project, which will require (thanks to our designer) a lot off divs and images and whatnot to slide up and down. All these elements will of course have it’s own ID’s and classes, so writing one function to slide/toggle them all is impossible, plus the design of these elements is so weird that the built-in animation effects are of no use. So I hacked together my first! jQuery plugin which will hopefully help us with this task.

As I was more inspired to write code, than to come up with names, I called this little fella toggler, a jQuery plugin for togglering elements around…

What it does is actually calling .animate() on the height the top of the element that is to be togglered.

Setting it up is easy: include the jquery-toggler.js script, call the toggler() function on any clickable element and set the rel attribute of that element to match the ID of the element which is to be togglered (clearly, if you look in the source of the example, you’ll understand that better than my jibberish).

The default height when the element is closed (togglered up) is 0px, when the element is open (togglered down) is 200px and the default speed of this magical animation is set to 1000 (1 second). You can of course change these by passing them to the toggler({speed:500}) function.

toggler is available at GitHub: http://github.com/robertbasic/toggler

Example is here: http://robertbasic.com/toggler/

toggler yourself out.

Edit Februray 6th: Apparently I completely misunderstood the designer what kind of effect he wants, thus now I changed the code. The new code is pushed to github and the example is updated.

jQuery 1.3 with PHP by Kae Verens

jQuery 1.3 with PHP is written by Kae Verens, a JavaScript and PHP developer. This book is aimed at PHP developers who have met only a few times with JavaScript and jQuery, but I believe even a novice programmer can gain knowledge from it – just be warned, the PHP examples are here for the sake of the examples only; about which the author warns throughout the book. As the author said: “This book is designed to help a PHP developer write some immediately-useful client-side applications without needing weeks of study”. And it will.

On the other hand, you need to know your HTML and CSS selectors, as the book only says that jQuery uses CSS selectors to select elements.

The examples in the book are well explained and commented!

The book starts off with an introductory chapter about jQuery, what it is, why the author chose it over other JS libraries, what projects use jQuery and so on…

The “Quick tricks” chapter shows some really quick but useful tricks, such as dynamic select boxes, contextual help or inline editing. OK, you may have all done this before, but it’s a good starting point for getting to know jQuery.

From chapter 3 to chapter 9, the author shows how to do things like validating forms, creating an event calendar, managing files and folders from the browser, rotating, cropping, resizing images (with ImageMagick!) also from the browser or making lists sortable by dragging and dropping items. Of course, no one wants to reinvent the wheel, so all the examples are using plugins – either from the jQuery UI collection or “standalone” plugins that are “too specific” to be in the said collection.

My personal favorite chapter is the “Data tables” chapter, which shows how to present and use table data on your website by adding sort, filter and pagination functionality to your table. The example shown uses a table with over 2 million rows, which is worth mentioning, cause this way we know that it’ll work on a large dataset also.

The final chapter is reserved for optimizing the front-end code and reveals some stuff behind jQuery and JavaScript in general (I personally never knew that there’s a speed difference between different type of selectors).

In conclusion, if you’re a PHP dev wanting to “spice up” your apps, this book will most likely worth the money spent.

You can take a look at the Table of Contents, read the sample chapter, or just buy the book!