'Net Features : jQuery

Easy Web Overlays with Chardin

Pete Prestipino — Thu, 16 May 2013 19:15:00 GMT

One of the most popular posts in April 2013 here at Website Magazine was about the Intro.JS jQuery plugin which enables users to create guided virtual introductions on their website.

But Intro.js isn't the only available option; you might also want to consider Chardin - a jQuery plugin that creates an attractive and very intuitive overlay for users visiting a website that can be used to display instructions or guidance to users on any predefined, existing element on a web page.

Users of Chardin simply need to define the text to be shown with the instructions, and indicate the data position (where to place the text with respect to the element).

Chardin can be downloaded at Github.

Below are two images - one without Chardin activated and another when the overlay has been activated.

Tubular: Use YouTube Videos as Website Backgrounds

Pete Prestipino — Thu, 16 May 2013 18:42:00 GMT

Delete that tired old static website background - and get Tubular!

The jquery plugin lets designers/developers use a YouTube video as a Webpage background - how cool is that? Now, I don't have any idea at all how or when this should be used (or if it should be used at all), but you have to admit it's pretty creative and the possibilities are pretty endless if you can find the right situation to use it in. Check out the demo of Tubular, created by Sean McCambridge, here.

Users of Tubular have some control over the options including mute, repeat, play/pause, etc. To get Tubular working, just attach it your website pages wrapper element, set the options, and you're done! Do note that browsers which do not support fixed positioning will not support the plugin.

The plugin, released under the MIT License, can be downloaded at Google Code.

That's not a static image below, that's Tubular - a jquery plugin to add YouTube videos as a website background.

Simpler Checkout for Single Page Websites

Pete Prestipino — Thu, 16 May 2013 17:40:00 GMT

Single-page site design is a popular Web trend, but it's not typically a good fit for those actually selling products.

There are plenty of good examples where this style of design is used, but it's mainly for information publishers and digital brands looking to raise awareness, not neccessarily conversions. For the most part, the actual checkout process is left for another page and a far more robust (and often expensive to maintain) e-commerce platform. But does it need to be that way? Fortunately, no it doesn't.

A jQuery plugin by the name of SimpleCart could by just what you're looking for. The free and open-source javascript shopping cart integrates very easily into a website/web page without the need for a database, or any programming familiarity at all per say - just copy and paste some simple HTML and Javascript and you're good to go.

SimpleCart works with multiple payment gateways including Paypal Express, Google Checkout, and Amazon Payments (others including Authorize.net and an email checkout are expected soon).

Supersize Image-Based Websites

Michael Garrity — Thu, 09 May 2013 19:00:00 GMT

They say a picture is worth a thousand words, so imagine how much you could convey on your website with an attractive, full-screen background slideshow.

Well, you no longer just have to imagine it, thanks to the Supersized jQuery plugin that does just that.

This advanced full-screen background plugin allows designers to display a photo or set of photos as a slideshow that takes up the full width and height of a Web page. And although this may not be ideal for all websites, it can be incredibly beneficial for creative professionals that want to display their work, like photography sites, designer portfolios or event sites.

Supersized integrates with Flickr, so users can incorporate images from their Flickr accounts into their websites. Among the features available on default “Shutter” theme for Supersized are a progress bar, a slide in/out thumbnail tray, a fluid thumbnail bar based on Thumb Reel and an option for mouse-responsive thumbnail scrubs. It also supports multiple transition effects, including carousel, fade and slide right.

Sam Dunn of One Mighty Roar created Supersized as a Build Internet project.

Lettering.js Ensures Truly Fontastic Web Designs

Michael Garrity — Thu, 09 May 2013 18:45:00 GMT

A good font can make all of the difference between an attractive website that effectively communicates its message to visitors and one that, well, doesn’t do that.

Unfortunately, at present, CSS doesn’t offer a complete down-to-the-letter control option that allows designers to tweak individual aspects And that’s why a jQuery plugin like Lettering.js can go a long way in improving the look, feel and, most importantly, readability of your website.

Lettering.js works by splitting the textual content of a letter element into distinct individual spans (using ordinal .char# classes). This allows designers to style each letter individually, thus giving them considerably more control over the typography on their websites, and how visitors will view their messages.

The plugin was developed by the Paravel development team, and is currently employed by a number of notable websites, including Crayola. It is also available on GitHub.

Parallax Scrolling, Responsive Design Make Nice

Michael Garrity — Thu, 09 May 2013 18:40:00 GMT

Responsive design is top-of-mind these days for website owners and designers, alike. Plenty of developers are also talking about another hot new trend sweeping the Web known as parallax scrolling.

If you haven’t heard, parallax scrolling is where different layers of a Web page move across the screen at different speeds as the user scrolls up or down, allowing for a site contained entirely in a single page with sectional transitions taking place through the act of scrolling. And if you’re unfamiliar with responsive design, it’s a tactic that designers employ to ensure that a website or page renders in an optimal, user-friendly way on any device that someone may be visiting from.

However, while both of these topics are of interest to many Web developers, it can be difficult to make them work together, largely because of the technical complexities that can be involved in parallax scrolling. But one solution to this problem is the jQuery plugin known as Cool Kitten, a framework collection of HTML/CSS and JavaScript files that creates a beautiful, and responsive, parallax scrolling effect.

The plugin was created by Jalxob using Treehouse, Stellar.js, Normalize.css and other resources. It is currently available on the open source project hosting service GitHub.

Extend Image Value by Tagging with Rich Content

Michael Garrity — Thu, 09 May 2013 18:11:00 GMT

Image tagging is a popular new way to make pictures on a website more informative and engaging for users.

Now, website owners and designers can bring that engagement to their own images with the iPicture jQuery plugin that allows users to create interactive image walkthroughs that use the pictures already one their websites.

iPicture makes it incredibly easy to overlay little tooltips and hints on top of the image, which will appear to viewers as small circles with a + sign in the middle (see image below). When users scroll over these icons, they’ll see additional information that comes in the form of various types of rich content, such as HTML, photos or even videos.

The plugin is easy to integrate into a website and can be customized and extended using CSS. Even the individual tooltip icons, themselves, can be altered to match the look and feel of a site.

Textillate Brings Back Text Animation

Pete Prestipino — Thu, 21 Feb 2013 14:30:00 GMT

You know what the Web needs? That’s right… more animated text!

If you’re looking to add some motion to the copy on your website, be it as simple as page headings or vital as custom call out sections on landing pages, consider the use of Textillate.js – a jQuery plugin for creating very appealing CSS3 text animations.

Textillate is built on top of animate.css and lettering.js libraries (two of our favorites), and offers a relatively easy to use and interactive way to animate text. The plugin provides controls for in-animation and out-animation – how the text appears initially and how it leaves the view of the user.

If jQuery plugins like Textillate spark your design fancy, you might also be interested in some others. Check out one of Website Magazine's most popular posts from 2012, Web Font Fun with Javascript Plugins.

jQuery Plugins for Increasing Interaction

Michael Garrity — Thu, 24 Jan 2013 20:55:00 GMT

There is one thing that every website, no matter what kind it may be, always wants to see: more user interactions.

However, despite the universal desire to increase interaction on one’s website, the route that each designer and/or developer takes to make it happen can vary greatly. Often, their choices are dependent on the type of site (e.g. content-based, e-commerce, service providers, etc.) or brands that they’re working with. Thus, there are many different ways to go about enticing visitors to engage with a website.

So if you’re one of the many webmasters, designers or developers interested in improving user interactions on your website, check out these 10 cool jQuery plugins designed to do just that, either through easier navigation, greater customization or added functionality.

jQuery Page Peel
Like it says, this plugin makes it easy to create a page peel animation for you Web page that sits at the top of the screen on the right-hand side. When users hover their cursors over that area, the page will peel down and reveal more content behind it. While many websites like to place advertisements behind this peel, it can be used in more effective ways to draw attention to extra content or other website features.

Image Overlay Plugin
Images are a great way to capture the interest of visitors, especially if it’s their first time on your site. With the Image Overlay Plugin, you can reel them in, and then present more text-based information about the pictures that will appear (see image below) when users hover over the images. This way, you can still share information about the images without adding distracting, unnecessary text to your Web page.

jSlideRelatedPages
jSlideRelatedPages is a scroll sliding plugin that helps you engage users when they get to the bottom of your Web pages by displaying a sliding animation (see image below) when they get down there. On the slider is a list of related pages on your site that the user may also be interested in based on the content of the page they are currently on, so that you can keep them on your site and looking at more of your content for a longer period of time.

jFontSize
One of the more overlooked reasons for early site abandonment is poor readability for certain users because of the font size on a particular page (or set of pages). The jFontSize plugin helps to alleviate this problem by making it easy to create those “A+” and “A-“ buttons that some site’s have that allow users to alter the site’s font size, which will make your website far more accessible to a much wider range of visitors.

Overscroll
Users are so comfortable with accessing the Internet on mobile phones and tablet devices these days that it may behoove you to make your whole website mimic the mobile scrolling experience on desktop browsers. Luckily, the Overscroll jQuery plugin does just that by adding a “draggable drift” to overflowed DOM elements and a set of fading “thumbs” to a site. In other words, it allows users to simply click on the site and drag their mouse to move around the site, just like they would using their fingers on an iPhone. While Overscroll works best with Safari 5+, Chrome 5+ and Firefox 3+, it says it should work just fine on pretty much any modern browser.

SimpleModal
SimpleModal gives users a powerful interface for modal dialog development that offers greater flexibility to develop whatever they can envision in the box, while mostly doing away with many cross-browser user interface development issues. The real benefit is that designers and developers can totally customize these modal boxes to fit the style and theme of a website, while also being incredibly easy to implement and manage.

PikaChoose
Anyone who has spent an inordinate amount of time getting lost scrolling through Instagram or Facebook photos will tell you about how great image galleries are for capturing a user’s attention and encouraging them to interact with your site. If you want a simple way incorporate a thumbnail image gallery onto your website, look no further than PikaChoose (cute, no?), which is lightweight and super easy to integrate into any website.

jQuery TextAreaResizer
This plugin is ideal for any website that is using an iFrame to display a Web page, image(s) or form(s), especially if the iFrame uses a fixed height, which can be very inconvenient for users, as they’re difficult to resize across different browsers. That’s no longer a problem though thanks to this plugin, which makes it easy to resize iFrames by equipping them with a grip bar.

Responsly.js
In 2013, more users than ever are going to be accessing your website from mobile devices, so responsive design is going to be absolutely essential to ensuring all of your visitors are going to be willing and able to interact with your site. This lightweight plugin will scale to everything from small smartphone screens to large desktop monitors with minimal dependence on jQuery for convenience. It’s uses pure CSS styling and CSS3-based transitions, meaning it can be heavily customized, and it comes compartmentalized so that developers can use only the features that they want.

Single Drop Down Menu
Add multi-level navigation menus to your website that will keep users interacting with your tabs and links while they search for the content that they came looking for. The Single Drop Down Menu (or Single-ddm) applies mouseovers to a preformatted list and a timer that lets users customize the drop down menu’s stall time. It also supports metadata, meaning each list can have its own special features without multiple function calls.

Bonus: Raptorize
Because who doesn’t want a digital velociraptor run across their website, complete with a raptor screeching sound? It’ll get your visitors’ attention, at least.

Fetch Instagram Photos with Spectagram

Pete Prestipino — Thu, 10 Jan 2013 17:30:00 GMT

Instagram is wildly popular among Web users these days and as you might expect, developers - and marketers, of course - are looking for creative, interesting and inspiring ways to leverage the photo sharing service for their own benefit.

Spectragram, a jQuery plugin for the Instagram API, is one way to make that happen.

Created by Adrian Quevedo, Spectagarm can grab anything published by a particular user, the most popular media of the moment, or recently tagged media directly from the Instagram API. Results can be displayed on list items or any other HTML tag defined. It’s also possible to define the size of the pictures (small, medium, large). To use Spectagram, however, you’ll need to use your own Instagram application ClientID and AccessToken.

Spectagram is licensed under MIT License so it can be used in commercial projects as long as the copyright header is left intact.

10 Mind-Blowing jQuery Plugins for Developers

Michael Garrity — Thu, 13 Dec 2012 20:30:00 GMT

The JavaScript-based coding language jQuery is popular among many Web developers because it allows them to incorporate a variety of interactive effects it allows them to incorporate in their websites without requiring as much of the elaborate coding of regular JavaScript.

But jQuery is also attractive because it offers a wide selection of possible design elements, features and functionality that developers can include on their sites. This can be anything from parallax scrolling to slideshows to responsive text; the possibilities are virtually endless.

Most jQuery plugins aren’t necessary, or even all that useful, for every website, since they tend to cover a broad range of objectives, but any developer that wants to create a robust, feature-rich website, or just one that is visually striking, will be able to find at least a couple of plugins that can help him or her do just that.

Here at Website Magazine, we’ve compiled a list of some of our favorite jQuery plugins for our dear readers to check out, each of which can add distinct elements to a website that help it come to life and appear more engaging to users.

Of course, there are plenty of other jQuery plugins available. What are some of your favorites? Let us know in the comments section!

Simple Parallax Scroll
Parallax scrolling is one of the hottest design trends of 2012, and there is no shortage of plugins that can help you achieve this entertaining effect, wherein the background image of a Web page translates slower than the foreground content as a user scrolls. This technique by Mohiuddin Parekh is a simple way (it’s even in the name) to incorporate this cool feature on your website, and starting engaging more users, in about 20 minutes. And once you have parallax scrolling to show off, you’ll be the coolest website in school.

Gamma Gallery
Users are accessing the Internet from a plethora of different devices these days, even more than just five years ago. During that same span of time, images have become the most popular type of content on the Web. Naturally, this has led to a need for responsive image galleries that can be easily viewed and interacted with on any device. However, building one can be difficult because of the myriad factors one must consider, such as layout or features. Fortunately, there is the Gamma Gallery plugin, which takes into account and provides suitable image sizes for fluid grid thumbnails and full image views.

Baraja
This plugin adds a neat feature to websites that lets developers move elements in a “card-like fashion” (think like holding a hand of playing cards during a game of poker) and spread them out like a deck of cards on a table using CSS transforms to rotate and translate the items. Users aren’t just bogged down by one or two spreading options, though; the plugin presents a variety of possibilities, such as moving items laterally or rotating them like a fan. Baraja will provide your website with a unique interactive element to delight and engage your visitors.

A jQuery Heat Map
Heat maps are an excellent way to track the actions of users on your website. They allow you to follow their clicks and make design changes or decisions based on the actions that most users are likely to make. The jQuery Heat Map is an easy way to create a heat map for a website that tracks clicks and then displays the click pattern using semi-transparent dots on an overlay, so you can quickly identify the most popular aspects of your Web page and fix anything that is being neglected.

jQuery Snow Falling Plugin
Get into the winter spirit – and impress your visitors – with this plugin that adds a snow falling effect to your Web page(s). With this plugin, users create one snowflake initially and then clone that snowflake at a time interval and then add random value properties to each individual flake, all in less than 1 KB minified. It’s an easy way to spruce your page up for the holiday season.

jGravity
jGravity is an interesting plugin that add “gravity” to elements on a Web page, meaning developers apply a gravity effect that drops all of the selected elements to the bottom of the page. Developers can either add the effect to all of the elements on a page, or choose specific elements to receive the gravity treatment. This is a fun way to add a level of interactivity to your page, but it can also help you highlight important content (or, on the other hand, do away with superfluous content by dropping it down and letting users focus on the important stuff).

WideText
Another page element to remember when considering responsive design for a website is text. The WideText plugin offers up a full width responsive text solution that is both lightweight and easy-to-use. Now, you’ll never have to worry about visitors seeing your whole message, no matter what device they’re viewing it from.

Superslides
Create visually stimulating, interactive full screen slide shows on your site that you can use to show off your image content with the Superslides plugin. Best of all, this solution was designed with flexibility in mind, so it’s highly customizable. It also offers a handful of configurable options, such as auto play with a delay, slide transition speed and slide easing. If your site is heavy on image content, using Superslides is a great way to display it.

pageguide.js
Keep your website clutter-free with the pageguide.js plugin, which provides information to users via an interactive visual guide that can teach them about features or functionality. It will attach CSS “pseudo elements” to the features that define your pages, providing numbered arrows on the top, bottom, left or right of what you want to highlight. The guide will even scroll for users. Developers are given control over the style of the guide, and they can track the actions of users by simply including their tracking codes from services like HubSpot or KISSMetrics to find out which aspects of the guide are of greatest interest to their visitors.

PicStrips
Take your images to the next level with the PicStrips plugin, which splits the picture into any number of strips with whitespace between each one. Users are not only able to specify the number of strips they’d like, but also the white space between each one and the vertical whitespace at the top and bottom of alternate strips. This simple alteration helps your pictures stand out from similar content and adds some extra flair that will capture the attention of your audience and give your images new life.

Make a Flipbook Magazine with Turn.js

Pete Prestipino — Tue, 06 Nov 2012 14:03:00 GMT

Your average Web user is looking for richer and more engaging interactions within their digital experience. That is challenging on both creative and technical levels but there are solutions emerging which make quick work of this more demanding environment.

Turn.js, for example, is a Javascript library (actually a UI plugin for jQuery) that provides designers and developers the ability to make content look just like a book or magazine. The effect, as you see in the demos, is quite seamless, with elegant transitions thanks to the plugin taking advantage of the latest in HTML5 and CSS3.

There is a version (3rd release) available on GitHub, but the fourth release of Turn.js offers several more interesting (and essential) features including using pages of different size, zoom effects, navigation bars and more. The license cost for the 4th release of Turn.js is $99 for up to 5 domains and $499 for unlimited domains.

Gridster.js – Drag-and-Drop Multi-Column Grid

Pete Prestipino — Tue, 04 Sep 2012 19:38:00 GMT

Always on the lookout for the next great trend in Web design leads us down some rather interesting paths.

Our most recent discovery will likely be the coolest thing you’ll see today – Gridster.js – a drag-and-drop multi-column grid.

Created by Ducksboard, Gridster is a jQuery plugin that enables designers and developers to build intuitive “draggable” layouts from elements spanning multiple columns. Instead of trying to explain it, check out the demo on the official site.

Several customization features and options are available that are definitely worth of a review. Designers can leverage the API object to add a new widget to the grid, remove a widget or create a serialized array with the elements positions. Again, this is definitely going to be the coolest thing you see today.

HOT: What's Inside jQuery 1.8

Administrator — Tue, 14 Aug 2012 13:47:00 GMT

A new version of jQuery has been released (v1.8) - and just nine short months since jQuery 1.7 was made available. What lucky designers and developers we are! With a smaller code size (approximately 100 bytes smaller than 1.7.2) and with more than 160 bugs closed, let's take a closer look at JQuery 1.8:

- The Sizzle selector engine has been re-architected and is now faster and more efficient. Most browsers have querySelectorAll method but there have been some (serious) cross-browser implementation troubles which 1.8 solves and managed to provide coded fallbacks for IE6/7.

- Animations have been quite cumbersome to work with through jQuery but 1.8 addresses animation performance and it has improved dramatically as a result. While CSS3 offers better effects (and with less code), it is unlikely that jQuery and JavaScript-powered animation will dissappear (at least not in the short term). That being said, there are some new additions for animations - namely the use of progress callbacks in Primises - see the code in action here.

- jQuery 1.8 now automatically adds required prefixes when a CSS property in methods such as .css() or .animate() are used. This update makes it possible to apply a single transform and -webkit-, -moz-, -ms- and -o- prefixes will be pre-pended.

- Improved modularity is also a noteworthy feature in the 1.8 build. It's not possible to reduce the already small size by using the grunt-based build systems to remove features that are not required.

The jQuery 1.8 code is available for download here:

http://code.jquery.com/jquery-1.8.0.min.js
(compressed and minified, for production)

http://code.jquery.com/jquery-1.8.0.js
(uncompressed, for debugging)

Web Font Fun with Javascript Plugins

Administrator — Thu, 28 Jun 2012 19:30:00 GMT

When I first started working on the Web in a professional capacity, there really wasn’t much you could do to dress up your website as it related to font choice.

Web designers had little control over fonts in the past, but that has changed dramatically over the past two years as the pace around jQuery development accelerates and responsive design becomes the norm (or at least more normal).

While it’s possible to manipulate text using CSS, that method still has its limitations. As a result, many turn to Javascript to solve the inherent problems - and the results are often worth a look.

Below you’ll find several javascript plugins that can help you, the designer/developer, modify text through kerning, introducing a responsive nature and even tossing aside all convention with some quite dramatic effects.

SlabText: This Javascript plugin splits headlines into rows before resizing each to fill available horizontal space.

FitText: The plugin renders font-sizes flexible, making it ideal for use in fluid or responsive layouts to achieve scalable headlines.

LetteringJS: For those willing to make a more daring design choices, LetteringJS fits the bill.

jqsloText: This plugin is another for those willing to make some edgy design choices, as it renders an arching effect (gets bigger as you approach the middle and then tapers off) on HTML text.