Bigfoot is a jQuery plugin to help you create better footnotes and make them a lot easier to use.
Footnotes on the web can be a pain; you click a tiny number, get transported somewhere near the bottom of the page, find the footnote, and click on a link to go back where you can from.
This script makes that process painless by automatically detecting the footnote link and content. Then it turns the link into an easy-to-click button, and adds a popover when the the footnote button is clicked.
The script and default styles are built to work great on any size viewport; the popover is positioned on the top or bottom automatically (based on the relative amount of space), will update its location as the viewport changes size and will ensure that the popover never scrolls off screen. These elements make for a better user experience.
The tool is easy to install and use and comes with some options so you can make adjustments on your own.
Sign up for the monthly Unheap newsletter (you won’t regret it).
How do you get jQuery and other coding news and items? Beeps and buzzes on your smartwatch? Read out loud via a hearable? On an old-fashioned pocket screen?
However it reaches you, we’d like to throw an email into the mix. Unheap newsletter is ready and raring to go – it comes out twice per month and contains a dangerous combination of exciting jQuery items, coding news and competitions.
Just fill in the form in the sidebar of our website with your name and email address to get the FREE Unheap newsletter delivered straight to your inbox. And don’t forget to confirm the sign-up via email.
List.js is the perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. It is built to be invisible and work on existing HTML.
Features of List.js include that it is simple and invisible, easy to apply to pretty much any HTML, has no dependencies, is fast and super lightweight and can handle thousands of items. It includes a simple template system that adds the possibility of editing, adding or removing items.
It works with modern browsers including Chrome, Safari, Firefox and Internet Explorer 6+.
Examples of usage include partnering List.js with an existing list, with an existing list plus adds, a new list, tables, fuzzy search and pagination.
The tool includes extensive documentation to help you install and use this tool with ease. List and item APIs are also available.
Ether Grid Slider is an extremely functional jQuery plugin designed for transforming any type of content into practical grids and/or sliders.
It works with almost any type of content including images, videos, testimonials, services, featured stories and blog feeds. To make it even easier to get started, there’s plenty of documentation that can take you through almost any configuration options.
Ether can also be used as a base for consistent powering of slides or grids across an entire operation.
This tool is $7 and available from Code Canyon.
Here are some of the features of the tool:
- It is pixel-perfect on the half pixel level for retina displays
- It has an optimized thin stroke width that is always one-sixth of the width of a period
- It sits on the optimal Y position between the baseline and descender line (the golden ratio point
- It has holes around descenders to completely respect the type’s shape
According to the developer, the concept of underline.js is in constant development and is designed to help push the boundary of web typography.
There’s more to learn about this tool as well if you are interested in the story behind its development. You can watch the video from the NY Tech Meetup where it was presented.
TouchCarousel is mobile-friendly and lightweight jQuery content scroller with touch navigation for mobile and desktop. It can be used for creation of elements such as carousels, banner rotators and image galleries. It uses a physics-based scroll for a completely realistic look and feel.
Features of TouchCarousel include:
- Touch navigation for supported devices
- Paging and free-scroll mode
- Physics-based scrolling
- Fluid width of carousel for free-scroll mode
- Fast, hardware accelerated CSS3 transitions
- Four unique skins with included Photoshop files
- SEO friendly because content is not hidden
- Configurable items per scroll and snapping
- Customizable UI — enable or disable arrows, bullets and scrollbar
- Super easy to style — CSS file is commented and organized
- Each item can include HTML content (except video) and can be any size
- Smart autoplay pauses when you hover over and stops when action is done
- It doesn’t block the default browser scroll on touch devices
- It understands the difference between click and drag
While this plugin is responsive, it is only true for full-width, free-scroll mode. TouchCarousel is $11 and available from CodeCanyon. It comes with simple documentation, free support and upgrades.
Quick Add to Cart is a handy snippet that allows users customize a product directly from the products gallery, and add it to a shopping cart.
The standard UX for product galleries is that a user clicks on a product, then navigates to the single product page. The user is expected to select options, and finally add the product to the cart. Nothing is broken in this process. However, a returning customer, who’s familiar with the products line, may find it handy to select and buy a product directly from the gallery. That’s what this little plugin does.
It provides a “quick add to cart” panel while users interact with a product preview. The plugin reduces the number of steps that separate a user from purchasing an item, and potentially increases the site conversion rate.
The plugin uses an unordered list HTML structure to make the tool work. You’ll need to add this code and styles to your website for complete functionality. The tool also comes with nifty animation so it works well and looks nice, too.
This jQuery plugin for a notification bar has a lot of customization options. It all starts with a line of HTML as bar text and then the options flow from there.
Here’s a quick look at everything you can do with jquery.peekABar:
- Auto hide and show
- Delay hide
- Change padding and color specifications
- Add different types of animation for how the bar shows on the screen
- Add custom CSS
- Change the opacity of the tool
- Change notification bar positioning on the screen
- Close and open with a click
You also have control over event and instance methods with this plugin.
Even once installed, the code is easy to follow for making your custom changes. It’s a tool that can be used for almost any website type with a fairly small degree of difficulty. You get a lot of bang with this little plugin.
This web color picker works very much like the color tools in Microsoft Office 2010 for a UI widget that is intuitive. The Evol.ColorPicker plugin works inline or as a popup bound to a text box.
The plugin comes ready to go with a few preset color themes including light, dark, redmond, sunny and le-frog.
When displayed, the tool shows as a box containing theme and standard colors, allowing a click to choose each color selection. Each clicked color also displays its value for even more ease of use. The tool also includes a honeycomb-style color picker that displays varying hues and color values.
Evol.ColorPicker requires a jQuery UI theme to be present and the included base CSS file. Add the proper tagging, and the widget is ready to use.
It also comes with a few customization options such as the default color value, default color palette, type of display indicator, history, hide and show options and transparency. The plugin works with modern browsers and has been tested with Internet Explorer 7+, Firefox 9+, Chrome 21+ and Safari 5+.
This nifty little tool is nice because of its intuitive nature; it looks like something most users are already comfortable using.
PhotoSwipe is an image gallery plugin for mobile and desktop devices with a modular, independent framework.
The plugin comes with some nifty features including support of touch gestures, a browser history API that allows users to link to each gallery item with a unique URL to use the back button and loads and displays images quickly.
What PhotoSwipe does is solve some of your common photo issues all in one package. The plugin preserves detail in responsive images so that gallery photos look great anywhere on any device, it does not slow down page load times and it saves user bandwidth because images load progressively.
PhotoSwipe is made to work well on mobile devices — as implied by the name — and supports multiple touch gestures. You can use the basic gestures that are part of the plugin or assign your own actions. The include actions are spread to zoom, pinch to close, vertical swipe to close and horizontal swipe to switch items. (As a bonus, these same actions are emulated on desktop computers as well with wheel and trackpad actions.)
The plugin works on all modern browsers and is fairly light. Plus this is a photo plugin that does not force additional HTML markup in the gallery; you have complete control and images will remain crawlable to search engines using your meta data.
What sounds like a complicated tool is actually pretty simple with the Product Colorizer plugin. This lightweight solution allows users to quickly preview a product in different colors.
The plugin uses only two images per product to create the effect comes with a quite easy setup. The plugin works in all major browsers including IE7+ (and will work with IE6 if you use a png fix). Preparing files for use with the colorizer requires a few steps, but is no trouble once you get the hang of it.
After you download the plugin files and load them to your website, you need to get your image files ready to be colorized. You’ll need two images — one that includes the product in a base color and one with a color mask that shows color change for the different areas. (This works great for a product such as the t-shirt in the example, where you might sell items with the same graphic in different colors.)
The demo includes detailed instructions on how to prep the images and format the HTML for this color change. Product Colorizer works with as many colors as you need and is a great tool for web-based shops.
datedropper is a jQuery dates plugin that provides a quick and easy way to manage dates for input fields.
It supports 16 different language formats and is easy to use. The plugin only requires three bits of code for activation — head, body and end. The tool is also easy to modify so that it fits the aesthetics of any website outline — just edit the CSS in the datedropper folder and you’ll have a custom plugin.
This tool has plenty of practical applications. Use it to add dates to an an or website, set an itinerary for an upcoming event or even set an expiration date for a digital product.
When it comes to customization, you have plenty of options to choose from there as well; alter the date format, animation style, colors, language, text, number of years included, borders and strokes, shadows and boxed elements. And you can do it all with just a few clicks with datedropper. Find it on GitHub and see for yourself.
Have you ever needed a great chart for your website design but did not know where to start? Chartist is a plugin that helps you create simple responsive charts for almost any design project.
This set of charts includes bar graphs, line charts, pie charts, circular charts, dot graphs, scatter plots, donut graphs and plenty of cool animations to bring your data to life. Every chart is designed so that you can customize it with your information.
And editing is a breeze. The CSS editor is easy to understand and compatible with almost any data.
Chartist is different from some of the other tools out there in that it is super easy to configure because it uses the convention method, it includes great flexibility in style, images are SVG based and it it built with Sass. Chart configuration behavior is based on media queries so that every chart renders perfectly every time. Plus, every element in Chartist is responsive.
You don’t have to worry about compatibility issues with this plugin either. It works will all major browsers. Chartist is waiting for you to download and test it out. The file is light (only 10kb) and has no dependencies. This might just be the charting tool you have been looking for.
This simple and easy jQuery plugin for CSS animated page transitions give you tools for 58 different types of movement.
The robust animation plugin includes elements such as fades, rotations, flips, zoom in and out, overlays and more. And every animation comes with a preview mode so you can see how it works before you install the action in your website framework.
Animsition requires a browser that supports CSS3, which is how the animations are constructed. Supporting browsers include IE10+, Safari, Chrome and Firefox.
Download and installation are fairly easy. Link the required files, insert the HTML markup and call Animsition. That’s it. All of the code and options are available in the demo to make this plugin even easier to use.
Want an animation that’s not included in the Animsition plugin? You can create your own and submit it for inclusion. The plugin has nine contributors and the team welcomes future elements for this project.