The jQuery Wiggle is a jQuery plugin that allows you to emulate the wiggle effect icons on an iPhone have when you press and hold down on them. Click on the image in a demo to see the effect.
Best jQuery Plugin & Tutorial of April, 2012
In today’s post, I’m going to be giving away a new plugin for jQuery that allows you to easily transform your image lists into beautiful galleries with Flash-like zoom effects in them. It’s a simple but elegant way of giving your interfaces a nice little shine and at only 2KB in size, it’s both compact and surprisingly easy to use.
What we want to achieve today is increasing the visible size of a thumbnail image from something smaller to something larger whilst also animating the title/caption of it. Rather than using multiple images for this process, what we are going to do in this post is use the same image for both the thumbnail and the “zoom”. To do this we need to ensure that all of our images are larger than the default size of our thumbnails (and optimally, a little larger than our zoomed in images). CSS Bi-cubic interpolation is used to keep everything looking clean.
At its simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its childs to fit the width of the parent element. Gives the text that lovely vertical alignment.The plugin itself is more than just a simple font-size incrementer. I wasn’t happy with the performance of simply iterating through font sizes with a single fixed interval. I decided it would be better to test multiple decreasing intervals. For each line, it increments first by 16em until it detects a line break, backs off an interval then increments by
8em. It continues with
0.1em, until it finds the correct
font-size to the nearest hundredth of an em.
This plugin is the jQuery version on the fancy zoom effect. As describe on the fancy zoom web site, this effect is providing a smooth, clean, truly Mac-like effect, almost like it’s a function of Safari itself (see the demo below).
As the well famous light box plugin you must encapsulate your thumb images with a link that point to the zoomed image.
jQuery PopBox is a simple balloon UI element inspired by 37Signals Highrise CRM.
I want to share a little experiment with our readers – TouchTouch. It is a jQuery plugin that turns a collection of photos on a webpage into a touch-friendly mobile gallery. It works on all major browsers (except for IE7 and below) and most importantly is specifically designed with iOS and Android in mind.
- Smooth CSS3 animations and transitions;
- A responsive CSS interface that fills the screen and responds to changes in device orientation;
- Preloads photos only when they are needed;
- Supports swiping through photos;
- Displays onscreen arrows and listens for arrow key presses on desktop browsers;
Rules of thumb
* field.id are **unique** across the page
* for simplicity and consistency field.id and field.name should match (except with minCheckbox and maxCheckbox validators)
* spaces or special chars should be avoided in field.id or field.name
* use lower cases for input.type ie. *text, password, textarea, checkbox, radio*
* use the Ajax validator last ie. validate[custom[onlyLetter],length[0,100],**ajax[ajaxNameCall]**]
* use only one Ajax validator per field!
* JSON services should live on the same server (or you will get into browser security issues)
* in a perfect RESTful world, http **GET** is used to *READ* data, http **POST** is used to *WRITE* data: which translates into -> Ajax validations should use GET, the actual form post should use a POST request.
$.store offers an extensible API to persistent data storage on the client side of things. While modern browsers support localStorage, older Internet Explorers offer userData. For even older browsers a window.name fallback is in place.
Content of HTML table cells can be dragged to another table cell or another table. It isn’t difficult to define onMouseMove handler and change top / left element styles to move the object. In case with tables, you will have to determine somehow destination table cell. Attaching onMouseOver handler on table cells will not work, because browser doesn’t fire events to the elements beneath the dragged object.