jQuery Weekly Roundup #7: 7/5/11


Introduction

Here are some Fresh and jQuery plugins, tutorials, and articles that were released recently. I will continue to release similar roundups on the subjects of CSS3, jQuery, and WordPress. Check here for all the current Weekly Roundups.

Weekly Roundup

Sliding Background Image Menu with jQueryView Demo

Today we want to share another jQuery menu with you. This menu will have several panels, each one corresponding to a different background image that will show on all panels when we hover over a panel label. Also, a submenu will slide out from the bottom. This menu comes with some configuration possibilities, such as the size of the image, the hover effect and custom default states.

Mosaiqy Grid Image Plugin — Demo Included

Mosaiqy creates a sliding grid image gallery that expands to accommodate a zoomed image when specific images are clicked. Photos are retrieved from a JSON/JSONP data structure and randomly moved inside the grid.

Lean Modal — Demo Included

This modal plugin is incredibly lightweight and easy to use and creates a clean and simple Modal effect.

DropKick: Custom Dropdown Plugin — Demo Included

This plugin makes the tedious task of creating custom dropdown menus easy that also degrade gracefully in older versions of Internet Explorer, and when javascript is turned off.

Meow: A Growl Work-Alike for jQuery — Demo Included

jQuery Meow mimics Growl notications. It supports all jQuery events and you can bind it to various sources for message input making it ideal for form validation, Rails flash notices, or a replacement for the alert() box. It is still being developed so look out for future updates.

D3.js: Data-Driven DocumentsView Demos

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. As a trivial example, you can use D3 to generate a basic HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

Re-create Google’s Search Input Field and Submit ButtonView Demo

This tutorial shows how to recreate the simple and elegant Google search field including subtle elements like the X button that can clear what you are currently typing.

Blueberry Fluid Image Slider — Demo Included

This simple image slider is focused on accommodating fluid and responsive websites by automatically resizing itself smoothly.

15 Powerful jQuery Tips and Tricks for Developers — Article

In this article by TutorialZine we will take a look at 15 jQuery techniques which will be useful for your effective use of the library. We will start with a few tips about performance and continue with short introductions to some of the library’s more obscure features.