Marketing Insights and News | Website Magazine: Digital Marketing Tips and Blog

jQuery to Melt Your Mind

Written by Peter Devereaux | Nov 1, 2013 5:00:00 AM

See These Mind-Melting jQuery Plugins In Action ::
  

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 ecommerce 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 ecommerce 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 ::