Raashid
   

jQuery Techniques for Web Designers

Posted on 07-08-2011 | Posted in jQuery, Web Designing, Web Development

0

jQuery code for web designers
Only a few years ago, if something was animated on a website it was automatically assumed to be Flash. However, this is not the case today. With the growing popularity and wide spread use of JavaScript frameworks, sometimes you have to take a closer look to find out what is powering all of those smooth animations.

With several JavaScript frameworks available, jQuery is quickly becoming a favorite. If you are interested in using jQuery for animated effects, here are 13 excellent tutorials to get you on your way.

Building an Animated Cartoon Robot with jQuery

Building an Animated Cartoon Robot with jQuery

Animate a hover with jQuery

<br /> Animate a hover with jQuery

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

CSS Sprites2 – It’s JavaScript Time

CSS Sprites2 - It's JavaScript Time

Build An Incredible Login Form With jQuery

Build An Incredible Login Form With jQuery

Learning jQuery: Revealing Photo Slider

Learning jQuery: Revealing Photo Slider

Learning jQuery: Fading Menu – Replacing Content

Learning jQuery: Fading Menu - Replacing Content

Using jQuery for Background Image Animations

Using jQuery for Background Image Animations

Animated Menus Using jQuery

Animated Menus Using jQuery

Create a Cool Animated Navigation with CSS and jQuery

Create a Cool Animated Navigation with CSS and jQuery

Animated Drop Down Menu with jQuery

Animated Drop Down Menu with jQuery

jQuery Tutorials for Designers

jQuery Tutorials for Designers

How to Load In and Animate Content with jQuery

How to Load In and Animate Content with jQuery

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.

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.

Jquery08 in 45+ New jQuery Techniques For Good User Experience

2. Spoiler Revealer with jQuery

A simple technique that hides some content first and fades it in once a link is clicked.

Spoiler in 45+ New jQuery Techniques For Good User Experience

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.

Jquery05 in 45+ New jQuery Techniques For Good User Experience

4. FCBKcomplete

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

Jquery06 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery08 in 45+ New jQuery Techniques For Good User Experience

Form Manipulation

6. Radio Button and Check Box Replacement

This jQuery tool replaces radio buttons and check boxes with a more appealing display.

Jquery07 in 45+ New jQuery Techniques For Good User Experience

7. Submit a Form without a Page Refresh

Jquery28 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery29 in 45+ New jQuery Techniques For Good User Experience

9. Simple jQuery Form Validation

This jQuery form shows live form-input validators both server-side and browser-side.

Jquery33 in 45+ New jQuery Techniques For Good User Experience

Navigation Menus

10. jQuery Context Menu

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

Jquery21 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery15 in 45+ New jQuery Techniques For Good User Experience

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.”

Jquery41 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery16 in 45+ New jQuery Techniques For Good User Experience

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!

Jquery17 in 45+ New jQuery Techniques For Good User Experience

15. CSS Sprites2

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

Jquery19 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery07 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery09 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery34 in 45+ New jQuery Techniques For Good User Experience

19. Coda-Slider

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

Jquery35 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery01 in 45+ New jQuery Techniques For Good User Experience

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

21. haccordion

A simple horizontal accordion plug-in for jQuery.

Jquery36 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery37 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery39 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery40 in 45+ New jQuery Techniques For Good User Experience

25. Scrollable HTML Table

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

Jquery38 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery04 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery09 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery22 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery23 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery04 in 45+ New jQuery Techniques For Good User Experience

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!

Jquery10 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery13 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery30 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery32 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery24 in 45+ New jQuery Techniques For Good User Experience

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.”

Jquery02 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery27 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery02 in 45+ New jQuery Techniques For Good User Experience

  • Download files here.

42. Use jQuery for Background Image Animations

Animate your menu whenever a user hovers over an item with this effect.

Jquery18 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery11 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery25 in 45+ New jQuery Techniques For Good User Experience

Miscellaneous

45. Date Range Picker

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

Jquery14 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery20 in 45+ New jQuery Techniques For Good User Experience

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.

Jquery26 in 45+ New jQuery Techniques For Good User Experience

48. 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.

Jquery12 in 45+ New jQuery Techniques For Good User Experience

 

Source : www.smashingmagazine.com | www.blog.wezile.com | Haqeel | Mubashir | Trentten


email
Short URL: http://bit.ly/Uy7g5b

Related posts: