Entries from January 2009 ↓

As expected, it didn’t take long for the QuickPwn team to jailbreak the iPhone 2.2.1 firmware. QuickPwn is available now for the iPhone and the iPod Touch. [QuickPwn via Lifehacker]

Brasileirismos, or Brazil-isms, is admittedly a redundant theme for the already distinctly Brazilian collections at the Winter 2009 edition of São Paulo Fashion Week, which ended last Friday. The biggest change, compared to past seasons, was the massive influx of international journalists flown in (including our own Ami Kealoha and Greg Mitnick; video forthcoming) to provide coverage of an event whose organizers are pushing for it to stay on the fashion map.

2nd Floor was strong all around (above). Taking inspiration from the 40’s and 50’s era of aviation, the result as a romantic collection of skirts with plane appliques, bomber jackets and schoolboy looks.

Do Estilista bounced back to form after last season’s fantasy-fueled outfits. This year designer Marcelo Sommer used prints taken off tiles and dishrags from Holland (above).

The Cavalera show took on a mysticism and folklorism inspired by an annual festival that takes place on the Brazilian Amazonian island of Paratins. Animal prints appeared among colorful, saturated pieces (below left).

Oestudio came through again with their expected element of surprise, integrating social commentary into fashion. This year they seemed to criticize society’s tendency to turn a blind eye to serious issues (above right).

Always intriguing and fascinating, Osklen’s collection used cotton sweatsuit material to create rather conceptual pieces. Playing with volume and unexpected pinnings created interesting silhouettes. Proving that function need not come at the cost of appeal, I especially enjoyed their rubber items (above).

Also on Cool Hunting SPFW Summer 2009 and SPFW Winter 2008.

by Noura Yehia

JavaScipt libraries have made huge leaps and bounds in helping developers write code and develop products more quickly. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax.

To help you take it up a notch, we share below some methods that can help you give visitors to your website an amazing user experience. Here are over 45 impressive jQuery plug-ins and techniques that have been recently created and that could make the development of your next website an easier and more interesting experience than the last.

You may want to take a look at the following related posts:

• jQuery and JavaScript Coding: Examples and Best Practices
• 75 (Really) Useful JavaScript Techniques
• 80+ AJAX-Solutions For Professional Coding
• 60 More AJAX- and Javascript Solutions For Professional Coding

Dynamic Content

1. Build A Login Form With jQuery
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

2. Spoiler Revealer with jQuery
A simple technique that hides some content first and fades it in once a link is clicked.

3. AJAX Upload
This AJAX file upload plug-in allows users to easily upload multiple files without having to refresh the page. In addition, you can use any element to trigger the file selection window. The plug-in creates a semi-transparent file input screen over the button you specify, so when a user clicks on the button, the normal file selection window is shown. After the user selects a file, the plug-in submits the form that contains the file input to an iFrame. So it isn’t true AJAX but provides the same user experience.

4. FCBKcomplete
Give your users fancy Facebook-like dynamic inputs, with auto-complete and pre-added values.

5. Create Accessible Charts Using Canvas and jQuery
This tool is proof that you can use the <canvas> element to illustrate HTML table data. The idea is a good one: putting the data in a table allows it to remain accessible, while the chart can be shown for visual enhancement.

 

Form Manipulation

6. Radio Button and Check Box Replacement
This jQuery tool replaces radio buttons and check boxes with a more appealing display.

7. Submit a Form without a Page Refresh

8. jQuery AJAX Contact Form
Here is a quick and easy way to make a jQuery AJAX contact form with a “honeypot” to foil email bots, load success and error messages dynamically without leaving the page and provide descriptive error messages detailing why submitted values have failed validation.

9. Simple jQuery Form Validation
This jQuery form shows live form-input validators both server-side and browser-side.

 

Navigation Menus

10. jQuery Context Menu
A context menu plug-in for jQuery that features easy implementation, keyboard shortcuts, CSS styling and control methods.

11. Kwicks for jQuery
Kwicks for jQuery started off as a port of the incredibly attractive MooTools framework, but has evolved into a highly customizable and versatile widget.

12. jQuery iPod-style Drilldown Menu
“We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.”

13. jQuery File Tree
The jQuery File Tree is a configurable AJAX file-browser plug-in for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

14. How to Create a MooTools Home Page-Inspired Navigation Effect
In this tutorial, you’ll recreate the same effect seen in MooTools’s menu, but in jQuery!

15. CSS Sprites2
This tutorial demonstrates how to implement inline CSS Sprites2 using jQuery.

 

Manipulating Content

16. jQuery books widget
With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

17. Text Size Slider
This tutorial explains how to use a slider to control the text size of an article on a page. This lets the user control exactly the size that suits them, and is also a pretty impressive feature to have on a site.

18. Pagination
Create navigational elements: when you have a large number of items, you can group them into pages and present navigational elements that allow users to move from one page to another.

19. Coda-Slider
As with the last tool, groups items together using navigational elements that allow users to move from one page to another.

20. Creating a Slick Auto-Playing Featured-Content Slider
If you love the Coda-Slider plug-in for jQuery, then you will find this plug-in very useful for displaying lots of content in a small area. This nice plug-in adds some features not found in the original Coda-Slider, such as slowly cycling through panels, auto-playing different types of custom content. An arrow indicator serves as a visual indication of which panel you are currently viewing.

• Demo can be found here.
• Download files here.

21. haccordion
A simple horizontal accordion plug-in for jQuery.

 

Tabular Data and Grids

22. Table Row Checkbox Toggle
This tool generically adds a toggle function to any table row you specify based on a CSS class name. It will, by default, toggle on any check boxes within that table row.

23. Tablesorter
Tablesorter is a jQuery plug-in that turns a standard HTML table with <th> and <td> tags into a sortable table without the need for page refreshes. Tablesorter can successfully parse and sort many types of data, including linked data, in a cell.

24. TableEditor
TableEditor provides flexible in-place editing of HTML tables. User-defined handler functions can easily be dropped in to update, for example, a data source via an AJAX request.

25. Scrollable HTML Table
This JavaScript code can be used to convert ordinary HTML tables into scrollable ones.

 

Lightbox Techniques

26. Revealing Photo Slider
Learn how to create a thumbnail photo gallery, where clicking a button reveals the entire photo and more information about that photo.

27. FancyBox
FancyBox was born to automatically scale large images to fit in windows, adding a nice drop-shadow under the zoomed item. It can be used to group related items and add navigation between them (using a pre-loading function). FancyBox is totally customizable through settings and CSS.

28. Facebox Image and Content Viewer
Facebox is a lightweight Facebook-style Lightbox that can display images, divs, and even entirely remote pages (via AJAX) inline on a page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.

29. jQuery.popeye
jQuery.popeye is a plug-in that transforms an unordered list of images into a simple image gallery. When an image is clicked, it enlarges Lightbox-style. The images are displayed in a box with “Previous” and “Next” controls, and information about the images can be included.

 

Image Galleries and Viewers

30. Simple Controls Gallery
Simple Controls Gallery rotates and displays each image by fading it into view over the previous one, with navigation controls that pop up when the mouse hovers over the gallery. The controls allow the user to play, pause or jump to a specific image in the gallery.

31. Agile Carousel
This jQuery plug-in allows you to easily create a custom carousel. Use the jQuery UI to enable many different types of transition. The plug-in uses PHP to call images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

 

Browser Tweaks

32. Setting Equal Heights with jQuery
A script to equalize the heights of boxes within the same container and create a tidy grid.

33. jQuery IE6 PNG Transparency Fix
Another IE6 PNG fix that uses jQuery selectors to automatically fix all PNG images on a page.

34. BGI frame
This tool helps ease the pain of dealing with IE z-index issues. You can find a demo here.

35. Fix Overflow
IE puts scroll bars inside overflowing elements, and if an element is only one line, the scroll bar will cover it. This plug-in fixes that issue.

36. Lazy Load
Lazy Load delays the loading of images below the fold on long pages. As the user scrolls down, the images are loaded as needed. Check out the demo here.

37. Maxlength
It’s a fairly common design practice to limit the number of characters a user can input in a field while giving feedback on how many spaces are left. This plug-in automates that task.

 

Animation Effects

38. Scrollable
Scrollable is a flexible and lightweight (3.9 KB) jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML, such as text, images, forms, video or any combination of them. You can make items scroll horizontally or vertically and decide how many items are visible at once.

39. jQuery Fading Menu – Replacing Content
“Instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff.”

40. Build an Animated Cartoon Robot with jQuery
This effect simulates a faux 3-D animated background reminiscent of old-school side-scrolling video games (and not unlike the parallax effect). This effect is created by layering several empty divs over each other, with transparent PNGs as background images. The backgrounds are animated at different speeds using jQuery.

41. Flip
Flip is a plug-in for jQuery that “flips” page elements in four directions. Compatible with Firefox 2+, Internet Explorer 6+, Safari 3.1 (for Windows) and Google Chrome.

• Download files here.

42. Use jQuery for Background Image Animations
Animate your menu whenever a user hovers over an item with this effect.

 

Image Manipulation

43. Jcrop
Jcrop is the quick and easy way to add image-cropping functionality to your Web application. It combines the ease of use of a typical jQuery plug-in with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

44. jQZoom
JQZoom is a JavaScript image magnifier that makes it really easy to magnify what you want. It is easy to customize and works on all modern browsers.

 

Miscellaneous

45. Date Range Picker
A rich date-range widget that uses the jQuery UI’s date picker and some additional custom interaction.

46. Sortable Lists
Unordered lists are commonly used to structure a website’s navigation. Having the ability to re-order such lists would be extremely useful. Here is a method to easily save and reload the list element order without getting lost as the page is refreshed.

47. Amazing Music Player Using Mouse Gestures and Hotkeys
Learn how to create an amazing music player, coded in XHTML and jQuery, that makes use of mouse gestures and hotkeys. You can click and drag the mouse to interact with the music player’s interface or use directional keys and the space bar instead of the mouse.

48. Script for Tracking Outbound Links in Google Analytics with jQuery
This code snippet uses Google Analytics and jQuery to automatically track outbound links. This interesting script enhances behavior by comparing the link’s domain to the current page’s domain and, if they are different, triggering the behavior. This is helpful when using a CMS or other tool that generates full URLs, including the “http://,” instead of relative ones.

<script type="text/javascript">
	$('#content a:not(.popupwindow)').filter(function() {
		var theHref = this;
		if (theHref.hostname && theHref.hostname !== location.hostname) {
			$(theHref).not(".noAutoIcon").addClass("offSite");
			$(theHref).not(".noAutoLink").attr('target','_blank').bind('click keypress', function(event) {
				var code=event.charCode || event.keyCode;
				if (!code || (code && code == 13)) {
					if(pageTracker){
						var fixedLink = this.href;
						fixedLink = fixedLink.replace(/https?:\/\/(.*)/,"$1");
						fixedLink = '/outgoing/'   fixedLink;
						pageTracker._trackPageview(fixedLink);
					};
				};
			});
		};
	});
</script>

49. jGrowl
jGrowl is a jQuery plug-in that delivers unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

Related posts

You may want to take a look at the following related posts:

• jQuery and JavaScript Coding: Examples and Best Practices
• 75 (Really) Useful JavaScript Techniques
• 80+ AJAX-Solutions For Professional Coding
• 60 More AJAX- and Javascript Solutions For Professional Coding

About the author

Noura Yehia is a Web designer and blogger who can be found at Noupe and Devsnippets. If you want to connect with the author, you can follow her on Twitter.

Bonnie sez, “Everyone has at least one friend who has seen parts of the Star Wars original trilogy but can’t quite tell you every plot point in order. Joe Nicolosi recorded his friend Amanda as she retells the story from the tiny amount she’s seen with hilarious results.”

Star Wars: Retold (by someone who hasn’t seen it)

(Thanks, Bonnie!)

Disclosure: I’m a member of the jQuery Project team

Back on January 14, 2006, a brash, young and talented developer named John Resig put out a personal project to the OSS world and hoped it could benefit *someone*. Little did he know that 3 years later, his side project would become one of the most influential frameworks for developing JavaScript-based applications. Today, the jQuery project turns 3 years old which, considering the churn rate for open source projects, is a monumental achievement. So it makes sense that on the project’s 3rd birthday, the team has announced the release of jQuery v1.3, the latest and greatest release of jQuery which includes the new Sizzle selector engine.

Along with the inclusion of Sizzle, jQuery v1.3 includes a bevvy of new features:

• Live Events: Event delegation with a jQuery twist
• jQuery Event Overhaul: Completely rewired to simplify event handling.
• HTML Injection Rewrite: Lightning-fast HTML appending.
• Offset Rewrite: Super-quick position calculation.
• No More Browser Sniffing: Using feature detection to help jQuery last for many more years to come.

The details of the release can be found via the release notes.

In addition to that, Remy Sharp donated a new dynamic API browser to the jQuery project which makes searching the jQuery API extremely easy:

The API browser includes:

• All the latest jQuery and jQuery UI documentation.
• The ability to mark pages as favorites for those pages you keep wanting to return to.
• Syntax highlighting in the code examples
• Live running of examples within the browser
• Links to edit and experiment with the code examples

In addition, Tane Piper & Remy worked together to provide an AIR app version of the browser so you can view the API locally.

The biggest update though is that the jQuery projects (i.e. jQuery & jQuery UI) will be part of the Software Freedom Conservancy thus making the projects true non-profit endeavor and providing a number of benefits to both the project and the jQuery community including:

1. It allows the current project members to continue to manage the projects and maintain ultimate responsibility for the direction of current and future efforts.
2. It allows the projects to be considered a true non-profit efforts allowing us to be able to accept donations and contributions without incurring tremendous personal financial liability.
3. The copyright of the code will be assigned to the conservancy thus ensuring that no single person will own contributions or assets of the project.
4. It may allow corporations to write off time when an employee contributes to a project.
5. Most importantly, it ensures that the jQuery projects will always be open and free software

With so many new individuals & corporations contributing to the project, doing this became a big priority to protect the investments made by the jQuery community.

This is a lot of great news for jQuery developers and here’s wishing jQuery a happy 3rd birthday.

Long time innovator Marc Canter has made a proposal for a system to let users integrate all their social networks from around the web into one central dashboard. He calls it the DiSO Dashboard.

So far it’s just a vision, albeit a pretty specific one, but we expect to see something like this on the market very soon. Is it what you want? Now is a good time to share your thoughts on the subject.

Sponsor

“Distributed Social Networking” (DiSO) is what a growing number of people are calling the move to aggregate and integrate our activities, data and social connections built up on sites like Facebook, LinkedIn, Flickr, Twitter and our personal blogs. (See also the DiSO Project.) Much of the conversation concerns technical standards to make it possible, but once it’s technically doable – how should it look for users? Canter offers the following proposal and we think it’s a good one.

Marc Canter believes that the “dashboard” is the best metaphor to manage all this activity through. Millions of people are already familiar with this basic idea, having used My.Yahoo, iGoogle, Netvibes, Pageflakes, Jive Software or other services like this. (We like dashboards here at ReadWriteWeb a lot and recommend checking out this post on traits of a successful dashboard for tips on setting one up for yourself.)

Your DiSO dashboard might serve as a new interface for your blog, your social networking account, or be a stand alone service itself. The parts of your dashboard that you made public would be discoverable and viewable by other people. What would it bring together for you to access all in one place? This is the meat of Canter’s proposal. (Update: Actually, Canter stopped by in comments below to clarify that it’s the outline structure of these data collected in a dashboard that’s really the meat of his proposal. He says he’s working on an editor to edit such outlines, in fact. See his comment below for clarification.)

• Your status and availability, see and change these from your dashboard.
• Widgets and gadgets for doing various things, just like people add to dashboards now.
• Your incoming subscriptions (RSS, friends’ new media published, perhaps some email).
• Your published media and content going out, manageable in the dashboard. Not just blog posts, microblogging messages and media – this could include your comments from around the web, reviews you’ve posted of products, testimonials people have written about you, music playlists – you name it.
• Access controls to all your content, determine what’s public, what’s private, what’s viewable by friends, family, co-workers or members of another group. This is a very important part of the distributed social networking vision.
• Your various accounts and identification. Think of this as a virtual wallet, though Canter makes no mention of commercial activities we can assume that payment methods like your PayPal balance or online banking updates would ideally be included in your private dashboard.
• Your “social graph” aggregated. See all your contact lists in one place, including links to the dashboards and various social networking accounts that each contact has given you permission to view. Ask from your dashboard for permission to connect with those contacts in new places.

The idea is that the DiSO Dashboard would be a place to read, write, manage, make discoverable, connect and normalize the data for all your activities around the web. The data standards aren’t figured out yet, but major social networking vendors are meeting now to work them out.

How would it look? What would be surfaced to users at various levels of the interface? We hope that vendors make that highly customizable but default settings are something that needs to be figured out.

What do you think? Would you like a dashboard like this? What else would you like in it? Speak up now, these services could be a big part of your experience on the web soon and they are being planned and built as we speak.

Discuss

Matt Everson built a simple little micro app for project estimation: Web Development Project Estimator:

Although most web designers have an idea of how long a project will take based on their past experience, far too often this guess becomes a final estimate. If you’ve ever been 300+ hours into a project that’s paying you for 100, I’m sure you know first hand why this can be a serious problem for a business. Up until now, I’ve used an excel spreadsheet to help me estimate accurately. About a month ago though, it occurred to me that I could make this calculator into a sweet little online tool. I figured it can only lead to more accurate estimates, stronger web businesses, and a better valuation of what we do as designers.

Of course, the fun is tracking how close you come to the estimator :)

Noupe has another nice roundup, this time they are showing 10 Smart JavaScript Techniques For Manipulating Content.

They share nice content views with demos and how to content. Included in the list is:

1. jQuery pageSlide: jQuery pageSlide is a plugin for jQuery that slides the viewable webpage off-screen, revealing and populating a secondary interaction pane. It may be used in a similar manner to Lightbox, where screen real estate and centralization of the user experience are a concern.
2. Create a simple ul list with a nice slide-out effect for li elements: We want to obtain this effect: when an user clicks on a link (”Hide”), the related
3. element disappear with a nice animated slide out effect. A simple way to implement an animated “disappear” effect using MooTools slideOut()
4. Portfolio Layout Idea Using jQuery: Benjamin Sterling created an interesting portfolio layout and added a nice easing method to the main content panel using easeOutQuad and easeInQuad using jQuery easing plugin.
5. Creating a Slick Auto-Playing Featured Content Slider: Niall Doherty’s Coda Slider inspired lot of designers and got them started quickly designing around it. Chris Coyier created a Slick Auto-Playing Featured Content Slider using Coda Slider plugin pretty much “out of the box” and added to it.
6. Easy Image or Content Slider: Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone.
7. mooSlide: mooSlide is nice replacement of the common “lightbox” module. It has some interesting options to influence the look and behaviour of the sliding box.
8. jQuery.SerialScroll: jQuery.SerialScroll allows you to easily animate any series of elements, by sequentially scrolling them.
9. Agile Carousel: Agile Carousel allows you to easily create a custom carousel.
10. Animated JavaScript Slideshow: This extremely lightweight JavaScript animated slideshow script includes a number of cool features to to style your content: description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
11. Sexy Lightbox 2: Sexy Lightbox 2 is a sexier and lighter clone of the classic Lightbox. Supports displaying images and HTML elements.
12. UI.Layout: Was was inspired by the extJS border-layout. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

When it comes to Web design and development, one thing trumps the latest technology and cool features: usability. Why? Because all of the features and functions in the world are completely worthless if a human user is unable to figure out how to use them. But testing against human factors, creating use cases, and observing focus groups can prove to be a costly endeavor for even the largest of companies.

Now, there’s a cost-effective means of seeing how usable your pages are: Userfly, a simple way to test your site’s usability for free – with one line of code.

Sponsor

Simply add the Userfly code to your site, and you’ll soon be a fly-on-the-wall as users walk through your pages. That one line of code allows Userfly to record a screencast of your users’ behavior, providing some very interesting feedback on how they are interacting with your site, from simple mouse tracking to complex interactions with AJAX elements.

The user behavior is recorded for the entire site visit, following the user from page to page. Once the user leaves the site, the capture ends.

Reviewing the walkthroughs is just as easy. Userfly provides information on the user’s browser, each page visited, and time spent on each page. Clicking on a particular page plays back the interaction, showing where the user moved his or her mouse and where he or she clicked. Once you’re finished watching, you’re prompted to rate the usefulness of the capture. Then, you can decide to keep it or discard it.

Even during a short test, I found Userfly incredibly helpful – given that a number of users stopped by as I was testing the app. In fact, the only complaint I had was that the walkthrough fails to automatically pan as the user scrolls. Meaning? Meaning you have to manually scroll to keep up with the mouse movements – which I found to be nearly impossible on lengthy posts.

When the user didn’t scroll, however, I found myself replaying the walkthroughs over and over. It was invaluable to see how other users see and use the pages that I find so familiar. Suffice it to say, I immediately noticed areas for improvement.

Userfly will allow you to record 10 users per hour, monitoring basic events for free. Those who are interested in more users per hour and more advanced events can contact Userfly for a quote.

How are people using your site? Wouldn’t you like to know? Grab the code at Userfly and take a look at your site through someone else’s eyes.

Discuss

We’ve written quite a lot about project management and collaboration tools in the past but recently we came across a tool that takes the collaboration process to the next level. ProjectThingy is project management software that can be seamlessly integrated into your site giving your team and clients a familiar project environment and full collaboration capabilities.

While we love Basecamp and use it daily here at ReadWriteWeb, the idea of embedding this type of software into a page using only a few lines of code is appealing. Easy to use, you just point to the domain you want it to live on, create a username, password and voila – ProjectThingy spits out the code for you to cut and paste to your site.

Sponsor

Feature overview:

Projects

• Name and mission statement
• Status: none, in progress, problem, complete
• Due date
• Milestones with dates and status indicators
• Project members from your user pool

Work items

• Discussion threads with assignments
• Limited client access
• Work items
• Name and description
• Status: none, in progress, problem, complete
• Assign to any project member
• Attach links and files (up to 1GB per file)
• Add link and file revisions
• Clients only see latest revision when assigned

Messages

• Project and work item message threads
• Optionally assign to any project member with status: none, in progress, problem, complete
• Clients only see messages when assigned

User pool

• Unlimited number of users
• User permissions: no access, client, team, administrator

Pricing

There are four levels of pricing and you can cancel your subscription at any time. ProjectThingy will keep your data for six months after you cancel, making it easier for you to return if you change your mind later on.

• Free: 1 Active Project, 50MB Storage
• Small: $19 P/M: 10 Active Projects, 6GB Storage
• Medium: $39 P/M: 30 Active Projects, 20GB Storage
• Large: $139 P/M: Unlimited Projects, 100GB Storage

Using Amazon Web Services for scalability and reliability, ProjectThingy runs on EC2 with a MySQL database with data storage on Elastic Block Storage and files in Simple Storage Service buckets.

The team behind the project Chris and Utka Ritke have created five short videos if you want to learn more or check out their FAQ page.

Discuss