Category: JQuery

Accessible Animated Canvas Menu

Get the source at Github
A few years ago a lot of websites used an animated flash menu for their navigation. The smarter ones were build progressive above the html list. This is a canvas implementation of the same principle.

Source and example

Watch the demo

canvas menu

Thinking about the menu I had several strategies.

  • Create a canvas for each menu item
  • Create one canvas which contains the menu items and one moving canvas for the hover animation

I chose for the latter one because i had the feeling that the performance would be better with large menu’s. Of course more creative menu’s can be be created with separate canvas elements for each menu item.

The script consist of three parts.

  • Reading out the html and building the menu and creating the animation canvas.
  • Event handling.
  • Tracking the mouse position for button clicks and hover states.

This way it is possible again to create irritating accessible menu’s 😉 . Luckily most clients nowadays avoids animating menu. But trends are known to die end come back again. I still need to find a proper way to position canvas elements and offsetting the origin for mouse calculations.

Book review: jQuery 1.4 Plugin Development

  • Author: Giulio Bai
  • publisher: packt publishing
  • pages: 261

Introduction

Previous month Packt Publishing send me a request by e-mail for a book review. Of course I was honoured and since the book fitted nicely in my main interest, namely webdevelopment, I read the book and wrote the review below.

First impression, a good book with a fast pace. First three global chapters, then on to the fun stuff creating plugins.

Book: Jquery Plugin development

Review

The first three chapters provide a concise but clear introduction to the jQuery API and how to create plugins. The rest of the book describes the creation of plugins in different categories. For example images, audio or form plugins. I really liked this setup, the instructions are very clear and only describe the core of the plugin’s, sometimes with a little added CSS. The advantage of this approach that it is easy for beginners to understand the inner workings of existing plugins. With this understanding it will be easy to expand the plugins to the requirements of the reader. The past years I have used and modified a lot of plugins, I wish I had a book like this from the start.

Even with the experience of a few years of jquery the book is a nice recapitulation of the inner working of the plugins used daily. This book also reminded of some forgotten plugins I wanted to check out.

Another aspect I liked is that the author starts including a custom jquery.center.js plugin to be used in the gallery plugin ( chapter 4 ) and the video plugin ( chapter 6 ) right from the start, this teaches DRY right from the start ( of course with the cost of additional HTTPRequests, but that’s another topic ).

After the first half of the book the plugins get slightly more complex. During these chapters the author familiarizes the reader with more complex jQuery subjects like: custom filters, regular expressions and regular JavaScript. It is nice to see that regular Javascript is used when possible, it is good that the author shows how elegant it is to use Javascript inside jQuery. To my opinion too many developers try to avoid regular Javascript if possible, that a shame because the real power comes with jQuery and JavaScript together.

The last chapter is fun to the the author discusses some of his favourite plugins. The showcased plugin are either very useful and easy to use or display the possible power of jQuery/ Javascript.

Overall this book is a perfect addition to a jQuery learning book. It teaches the creation of jQuery plugins as well as the structure and thoughts behind common plugins. This knowledge comes in very handy exploring the vast amount of jQuery plugins.

if you’re interested, you can buy the book at Packt publishing.

Chapters

  1. What is jQuery About?
  2. Plugins Basics
  3. Our First jQuery Plugin
  4. Media Plugins: Images Plugins
  5. Media Plugins: Audio Plugins
  6. Media Plugins: Video Plugins
  7. Form Plugins
  8. User Interface Plugins
  9. User Interface Plugins: Tooltip Plugins
  10. User Interface Plugins: Menu and Navigation Plugins
  11. Animation Plugins
  12. Utility Plugins
  13. Top jQuery Plugins