Our Category: webdesign

50 New And Crazy Cool jQuery Plugins From Year 2011

With 2011 a little over half over it’s the right time to look at, and uncover, the current trends of web design and development. It’s sure been a helluva ride for jQuery and it’s growth just doesn’t stop. With more than 40% of websites using jQuery now it’s no longer possible to ignore this efficient, powerful and lightweight tool.

jQuery gives developers the chance to enrich websites with amazing elements without the need to write dozens of lines of code. This article presents 50 advanced, cutting-edge yet simple jQuery plugins that will enhance your web experience drastically.

1. jbar

jbar is a jQuery plugin that transforms an unordered list <ul> into a toolbar with dropdown menus.

2. e24TabMenu

Tabmenu-new-cool-jquery-plugins-2011

e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands and collapses smoothly.

3. Simple jQuery Fluid Thumbnail Menu Bar

The idea of a fluid thumbnail bar is simple: create a list of thumbnails within a space where the overflow can be flipped through page by page.

4. Accordion Multilevel Menu

The plugin has a boolean initialization option accordion. If you set this value to “true” the menu behaves as an accordion menu. The irrelevant menu items are closed while the relevant slides open.

5. DropKick

Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making the menu look good.

6. jQuery Resize And Crop

jQuery Resize And Crop (jrac) is a jQuery plugin that build a viewport around a given image permitting a person to visually resize an image and place a crop. Then it is
possible to use the coordinates data for any purpose.

7. Cloud Zoom

Cloud Zoom is a jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatibility across browsers.

8. Simple jQuery Image Hover Effect

This is a simple technique to animate an image when hovering using jQuery’s animate() effect.

9. Easy Image Zoom

Easy Image Zoom gives you the opportunity to see large details of the product while moving the cursor over a medium sized image.

10. ImageLens

Use this jQuery plug-in to add lens style zooming effect to an image,

11. ImageSelect

ImageSelect is a jQuery plugin that allows the user to select an image by means of a nice looking dropdown.

12. jQuery Mapz

With Mapz you can easily create draggable image maps by just calling one function and by using some simple and clean HTML mark-up.

13. jQuery Image Gallery

Image Gallery with Lightbox effect and slideshow functionality for jQuery UI.

14. JbhSlider

JbhSlider is a fully customizable slider. You can add/remove navigation or pagination. You can set the effect, the duration and the functions after/before.

15. jQuery.slideBanjo

jQuery.slideBanjo is a plugin, that shows pretty slides on your site. Supports background loading of pictures, simple to customize, full documentation. Compatible with IE7 and higher.

16. Slides

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

17. jShowOff

jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more.

18. Tiny Carousel

Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

19. gSlider

gSlider is an interactive image slider built on jQuery. It is versatile, lightweight and easy to implement in any website or web applications.

20. Craftyslide

Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.

21. JQuery Wysiwym

JQuery-Wysiwym is a wysiwym (What You See Is What You Mean) editor. It is not meant to be used to output HTML, it simply helps with the desired markup syntax. Currently supported are Markdown, MediaWiki, and BBCode.

22. leanModal

A super simple modal window plugin that works with your CSS. Perfect for hidden page content. Uber light at just 780 bytes (minified). Flexible width & height, image free, supports multiple instances on one page. Great for login, sign up & alert panels, etc.

23. jQuery-preloader

This jQuery plugin preloads CSS, JS, HTML and images with visual loader, fast and very small (~2Kb).

24. Zebra_Dialog

Zebra_Dialog is a small (4KB minified), compact (one JS file, no dependencies other than jQuery 1.5.2+) and highly configurable dialog box plugin for jQuery, meant to replace JavaScript’s alert and confirmation dialog boxes and built using the jQuery Plugin Boilerplate.

25. Double Vision

A jQuery 1.6.1 plugin used for moving text from input’s to textarea.

26. Textarea Code Editor

This plugin transforms textareas into code editors with the following advantages: indentation with the Tab key, intelligent home key, auto indent on enter.

27. Easy Paginate

This plugin allows you to browse easily through the list of items with pagination controls. It is very easy to implement and very lightweight so it might come in handy to use in your own projects.

28. Activity Indicator

Activity Indicator is a resolution independent indicator that works in any browser.

29. jQuery File Upload

jQuery File Upload is a jQuery based lightweight file uploader with multiple file upload and drag&drop support.

30. Color Animation

With jQuery’s animate function, you can animate all kinds of css-properties. What’s really missing from jQuery is animating colors. This plugin will add this feature.

31. jQuery Formwizard

The form wizard plugin is a jQuery plugin which can be used to create wizard like page flows for forms without having to reload the page in between wizard steps.

32. jQuery Spinner Control

Converts the text input to a spinner control. This plugin works fine with ASP.net for the post backs.

33. jEscape

This extension captures all the keydown events faster and less time writing code, you’ll profit.

34. jPaginator

A plugin for animated pagination, with auto-acceleration, a slider, and highly customizable.

35. Snippet

Snippet is a jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet provides a quick and easy way of highlighting source code passages in HTML documents.

36. HTML5 jQuery Music Player

A HTML5 music player that uses an awesome design created by Orman Clark and jPlayer.

37. jQuery Link Preview

jLinkPreview is a plug-in for jQuery Library which simply allows you to see a link’s preview image before you visit them by just hovering on it. Link preview will appear by your cursor when you hover.

38. My QR Code

This plugin generate QR code for mobile devices using Google Chart API with jQuery. By default, the plugin will generate the QR code for the URL of the page. You can also specify the text, encoding and size of the QR code.

39. jQuery TagBox

This is a jQuery plugin to help add tags like input in your forms.

40. jRumble

jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It’s great to use as a hover effect or a way to direct attention to an element. You can control the X, Y, and rotation range, the speed, and event trigger for the rumble.

41. MobilyMap

MobilyMap is a jQuery plugin (7KB) that can create a Google Maps-like, draggable interface from any image.

42. Grid Navigation

jQuery plugin for achieving some neat grid navigation effects.

43. Simple Overlay

A jQuery Plugin for easily adding lightweight, flexible overlays to your projects.

44. diagonalFade

diagonalFade is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you’re off and away.

45. Smart Spin

Smart spin is a jQuery spin button plugin that mimics the very common windows spin button control. Smart spin allows you to select a value between minimum and maximum values using either mouse or keyboard. You can also enter a value via keyboard.

46. jQuery Credit Card Validation

Smart Validate is a jQuery credit card validation plugin, that makes credit card format validation a simple task. It ensures that user has entered valid credit card number before making actual transaction.

47. Ajax PayPal Cart

AJAX PayPal Cart is a easy to use JQuery plugin for web developer to add a full function shopping cart in their website. The AJAX cart can included a cart widget which allow display of cart information easily. Support PayPal Website Payment Standard.

48. jQuery.folderPreview

jQuery.folderPreview is a jQuery plugin that takes a series of images and positions them so that they appear within a folder graphic. This enhances the attractiveness of a browsing UI system, allowing the user to visualize the contents of the folder.

49. jQuery Lifestream

Show a stream of your online activity with jQuery

50. QuoVolver

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.

30 Of The Most Useful Google Products You Should Consider Using Daily

Most of us are using Google and its services everyday. Their search engine, Gmail and Youtube are some the most popular Google products. But how many of you knew that Google has, for example, a tool for creating charts? And if you knew, were you actually using it?

Google has dozens of undiscovered, yet excellent products, people don’t know about. In Google Labs itself you can find plenty of useful tools and products for web designers and developers. Furthermore all Google services are free to use and that makes them appealing alternatives to paid products of a similar nature. For example, Google Docs can be a great alternative for Microsoft Office since it’s free, light and easy to use. This article presents 30 useful, practical and smashing products, tools and services from Google that you should consider using daily.

1. News

Google News is a computer-generated news site that aggregates headlines from news sources worldwide, groups similar stories together and displays them according to each reader’s personalized interests. The articles are selected and ranked by computers that evaluate, among other things, how often and on what sites a story appears online.

2. Reader

Google Reader constantly checks your favorite news sites and blogs for new content. Whether a site updates daily or monthly, you can be sure that you won’t miss a thing. With your Google Reader public page, you can share your favorite items with your friends, simply by sending them to relevant links.

3. Bookmarks

With Google Bookmarks, you can save shortcuts to your favorite webpages and navigate to them in seconds. Unlike browser bookmarks that are stored on a single computer, Google bookmarks are stored in your Google Account. This means you can access them from any computer with an internet connection.

4. Alerts

Google Alerts are email updates of the latest relevant Google results (web, news, etc.) based on your choice of query or topic. Enter the topic you wish to monitor, then click preview to see the type of results you’ll receive.

5. Sites

Google Sites is a free and easy way to create and share web pages. With Google Sites you can easily create rich web pages, collect all your info in one place and control who can view and edit it. You don’t need any knowledge of HTML and it’s free to use.

6. Blog Search

Blog Search is Google search technology focused on blogs. Blog Search helps users to explore the blogging universe more effectively, and perhaps inspire many to join the revolution themselves. Whether you’re looking for Harry Potter reviews, political commentary, summer salad recipes or anything else, Blog Search enables you to find out what people are saying on any subject of your choice.

7. Trends

With Google Trends, you can compare the world’s interest in your favorite topics. Enter up to five topics and see how often they’ve been searched on Google over time. Google Trends also shows how frequently your topics have appeared in Google News stories, and in which geographic regions people have searched for them most.

8. Gmail Labs

Gmail Labs is a testing ground for experimental features that aren’t quite ready for primetime. While you may find some awesome stuff there, you have to keep in mind that these features can break at any time or disappear altogether. However they may work so well that they graduate and become regular features.

9. PubSubHubhub

PubSubHubbub is a simple, open, server-to-server publish/subscribe protocol as an extension to Atom and RSS. Parties speaking the PubSubHubbub protocol can get near-instant notifications via WebHook callbacks when a feed they are interested in is updated.

10. Contacts

Google Contacts is a place to import, store and view all of the contact information that’s important to you. You can also create your own groups of contacts to easily email many people at once.

11. Knol

Knol is a Google project that aims to include user-written articles on a range of topics. Knol allows you to communicate, collaborate and share your knowledge with the world.

12. Moderator

Google Moderator is a tool that allows distributed communities to submit and vote on questions for talks, presentations and events. Suggested questions as well as user votes are seen in real-time.

13. Tasks

With Google Tasks you can add new tasks, set due dates or add notes, and (most satisfyingly) check them off as you’re done. Your task list stays up to date no matter how you access it. It’s a simple list that’s with you everywhere you go. You can access Google Tasks from your Google Mobile, Gmail, Calendar or iGoogle.

14. Docs

With Google Docs you can create and share your work online and access your documents from anywhere. Manage documents, spreadsheets, presentations, surveys, and more all in one easy to use productivity suite. What’s handy you can embed your created forms and use them in websites.

15. Checkout

Google Checkout allows buyers in over 140 countries to purchase goods and services using a credit or debit card through our fast, secure checkout process. Google Checkout also helps you increase sales with the Google Checkout badge that can be displayed on your AdWords ads and Product Search listings.

16. Fusion Tables

Google Fusion Tables is a modern data management and publishing web application that makes it easy to host, manage, collaborate on, visualize, and publish data tables online. There’s also a gadget that that helps you create animated flash charts & graphs for your web pages, blogs & Google Pages.

17. Double Click

Google’s DoubleClick products provide ad management and ad serving solutions to companies that buy, create or sell online advertising. The world’s top marketers, publishers, ad networks and agencies use DoubleClick products as the foundation for their online advertising businesses. With deep expertise in ad serving, media planning, search management, rich media, video and mobile, our DoubleClick products help customers execute their digital media strategy more effectively.

18. Art Project

With Google Art Project you can explore museums from around the world, discover and view hundreds of artworks at incredible zoom levels, and even create and share your own collection of masterpieces.

19. Shopper

Google Shopper helps you find information on millions of products. Google Shopper recognizes products by cover art, barcode, voice and text search. You can find local and online prices, reviews, specifications, videos, and more to help you make the best purchasing decision. With one click you can save items to your shopping list and share with your friends.

20. Voice Actions

Voice Actions for Android lets you control your phone using your voice. Call contacts and businesses, send messages, browse the web, and complete common tasks. You can do pretty much anything with it – send simple text messages or get directions.

21. Code Search

Google Code Search helps you find function definitions and sample code by giving you one place to search publicly accessible source code hosted on the Internet. With Google Code Search, you can use regular expressions to search more precisely, restrict your search by language, license or filename and view the source file with links back to the entire package and the webpage where it came from.

22. Code Labs

In Google Code Labs, you’ll find developer products that are experimental. Some of these will one day graduate out of labs, others may remain experimental or even be shut down. That’s what a lab is for. Likewise, graduating from Google Code Labs is a big step that indicates our long-term commitment to that product.

23. Webmaster Tools

Google Webmaster Tools provides a free and easy way to make your website more Google friendly. With webmaster Tools you can see how Google crawls, indexes and ranks your website, see how many people found your site in search results, and how many people clicked on it and much more.

24. Browser Size

Google Browser Size is a visualization of browser window sizes for people who visit Google. For example, the “90%” contour means that 90% of people visiting Google have their browser window open to at least this size or larger.

25. Page Speed

Page Speed Online analyzes the content of a web page, then generates suggestions to make that page faster. Reducing page load times can reduce bounce rates and increase conversion rates.

26. Web Toolkit

Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript.

27. reCAPTCHA

reCAPTCHA is a free CAPTCHA service that protects your site against spam, malicious registrations and other forms of attacks where computers try to disguise themselves as a human; a CAPTCHA is a Completely Automated Public Turing test to tell Computers and Human Apart. reCAPTCHA comes in the form of a widget that you can easily add to your blog, forum, registration form, etc

28. Web Elements

Google Web Elements allow you to easily add your favorite Google products to your website. It’s a great alternative if you don’t want to create your own search engine, for instance.

29. Installable Web Apps

Installable web apps are a way of making Google Chrome treat certain websites like apps. People can find installable web apps using the Chrome Web Store. Many installable web apps are hosted apps—normal websites with a bit of extra metadata. You can build and deploy hosted apps exactly as you would build and deploy any web app, using any server-side or client-side technologies you like.

30. Dashboard

Google Dashboard is an online tool that allows Google Account holders to view all their personal information Google is storing on their servers. It’s pretty handy to manage all your Google service accounts at one place and keep them up to date.

Discover more

There are actually many more products, especially for you designers and developers. Like I mentioned before, Google has a great number of lesser known, yet powerful, development and coding tools. Listing them all would be useless, however there’s no reason why you shouldn’t check them out yourself. Here are some websites where you can learn about Google products and their features.