Skip to Main Content

jQuery to Melt Your Mind

Posted on 10.31.2013

via Website Magazine's Design & Development Digest channel ::

There are numerous reasons why jQuery has become so popular with the design and development set.

The CSS3-compliant JavaScript library is compatible across browsers; it’s super-fast and it leaves a small footprint. There is excellent documentation and, of course, thousands of ready-to-implement plugins available for nearly every need — from HTML document traversing and event handling to animation and Ajax interactions.

jQuery is one of the most popular topics that editors at Website Magazine write about regularly (check out a few posts and articles on the ’Net at wsm.co/tag-jquery) and in this month’s Design & Development Digest, we’re featuring numerous plugins that will wholly impress — if not melt your digital mind in its entirety — with their awesomeness. If you’re looking for a better way to build forms or present navigation or improve the digital experience, consider these 10 plugins for your next design and digital project.

:: See These Mind-Melting jQuery Plugins In Action ::
  


 SUBSCRIBE FREE to Website Magazine - 12 Issues 


 

Progression.js

Forms are tricky to design and can be challenging for users to navigate. Many considerations must be made but sometimes all that’s really needed is a little guidance to get users to that essential point of conversion. Progression.js provides an excellent opportunity, offering users progress updates as they complete different form fields.

Turn.js

If you’re getting tired of presenting Web pages in a blog post or article format, or showcasing products on e-commerce landing pages, and are looking for something a little more flashy (without the Flash) then turn to Turn.js. Using HTML, this plugin makes content look as though it’s a real book or magazine. Turn.js works on iPad and iPhone, allows pages to be loaded dynamically and offers two different transaction effects.

Smint.js

jQuery has encouraged many designers to rethink the use of navigational elements — one of the most important variables in the website experience. As onepage websites reach critical mass, designers will be looking to optimize this site element, and Smint is an ideal solution. The jQuery plugin essentially creates a sticky navigation bar (staying on top of the page as users scroll down) and provides menu buttons that let users navigate directly to the section they clicked on.

Impress.js

Impress.js is built to impress. The jQuery plugin enables designers and developers to create websites on what is known as the infinite canvas (the theoretical notion that there are not conventional page limits like size or dimension). The plugin is essentially a presentation framework that uses the power of CSS3 transforms and modern browser transitions. When done well, the effects are impressive to say the least. Users can navigate through the page/site via the arrow keys, the space bar or scroll with a mouse.

Interactive SVG Map

The Interactive SVG Map takes a Scalable Vector Graphic (SVG) and lets Web designers add interactivity —and all without Flash. The plugin is re-sizable and is responsive so it is smartphone and tablet (e.g. iPad and iPhone) friendly. Users can zoom and pan on the inter active maps, and designers can customize colors, create tool tips and markers and define URLs.

FlowType.js

Navigation is important, but it is typography that is increasingly capturing the attention of Web designers. With the multitude of device and screen sizes however, it’s difficult to know and display the appropriate character limit using CSS3 Media-queries. FlowType comes to the rescue with its plugin for responsive typography, changing the font size, and subsequently the line height, based on a specific element’s width.

Interactive SVG Map

The Interactive SVG Map takes a Scalable Vector Graphic (SVG) and lets Web designers add interactivity —and all without Flash. The plugin is re-sizable and is responsive so it is smartphone and tablet (e.g. iPad and iPhone) friendly. Users can zoom and pan on the inter active maps, and designers can customize colors, create tool tips and markers and define URLs.

TwentyTwenty

If you want to see — or show rather — the difference between two images (an actual beforeand- after effect), look no further than Zurb’s TwentyTwenty tool. The jQuery plugin uses the CSS clip property to trim an image on the left, allowing the image on the right to show through the container as the user manually moves a slider across the complete image with their mouse.

Intro.js

Developing guided tours can be challenging from a development perspective, but they serve as a very powerful and effective means to introducing new features to existing users. With plugins like Intro.js, websites can profile an element within the page as users navigate with their mouse or keyboards. The free plugin is open source (even for commercial use) and works in Firefox, Chrome and IE8. Another very viable alternative to guided tours comes from the Chardin.js. The plugin lets designers and developers create overlays that display instructions on any pre-defined page elements.

SimplerCart

Selling products (either information or physical goods) does not always require a robust e-commerce software system. In the instances when a full-on shopping cart or retail platform is not required, solutions like SimplerCart can easily be integrated into a website or Web page without the need for a database or any programming familiarity at all per say — just copy and paste some HTML and Javascript and you’re done. The plugin currently works with PayPal Express, Google Checkout and Amazon Payments, with Authorize.net expected soon.

jInvertScroll

Who says parallax websites have to scroll up and down — why not side by side (horizontal as opposed to vertical)? That’s exactly the functionality that jInvertScroll provides. By including the CSS file, jQuery and the plugin, creating the desired elements that you want to scroll, setting the desired attributes and ordering the layers — you're off and scrolling.

Type Ahead

Search engines aren’t the only ones that benefit from autocomplete — if you have lots of content, publishers and merchants can too. Autocomplete library Typeahead.js provides a range of features for those requiring advanced search functionality and the ability to display suggested searches as end-users-type.

:: See These Mind-Melting jQuery Plugins In Action ::

 

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code
  •    
      

    The Ultimate Guide to Personalization

    Kibo