Pace is a tool to help you create an awesome automatic page load progress bar.
Include pace.js and a CSS theme of your choice, and the result is a beautiful progress indicator for your page load and ajax navigation. There’s no need to hook in to any of your code because the progress bar is detected automatically.
Pace comes with several different themes so you have great aesthetic options. Themes include:
- Barber Shop
- Mac OSX
- Fill Left
- Flat Top
- Big Counter
- Corner Indicator
- Loading Bar
- Center Circle
- Center Atom
- Center Radar
- Center Simple
With more theme options that you could ever use, easy installation with Eager and nifty animation, this tool is a great addition to almost any website design. Try it in a flash with a live preview that works on your website.
Dropify is a tool that helps you create stylish input field. This is a great little tool if you are sick of plain inputs and want to showcase some of your design finesse.
The plugin comes with a drag and drop default file style or you can add your own text or images for a truly custom look. You can also set the height of the input box, combine options, disable the input altogether, add a maximum file size or use events.
And it all works with a little jQuery magic. Just clone in the project in your workspace, download the package, compile the assets and you are ready to roll with Dropify. (It is important to note that you have to include the js, CSS and fonts files for everything to work smoothly.)
With the available options, Dropify has plenty of documentation to help you set everything up and get moving quickly. The options are intuitive and easy to set.
Ever worry that your text is not optimized for readability? Then Readable is the plugin for you. It conveniently marks the 45th and 75th characters of every paragraph tag when turned on so your line breaks fall somewhere in between those two numbers, the standard for optimum readability.
The magic character count range of 45 to 75 refers to the number of characters occupying one line of text within a paragraph, before a line break and text wrap. If that number is too low or too high, the paragraph becomes much less readable.
Here’s how it works:
The content of each paragraph tag is converted into a text string right after we duplicate it as a data attribute. The text string is then counted using the .substring() function to find the 45 to 75 characters. We then pop in a span tag with a “readable” class, which is what we need to create the styles. Once the toggle is switched off, we reinsert the original HTML content back into the paragraph using the preserved HTML from the data attribute.
Sound complicated? It’s actually very simple. Just download the three files, add them to the proper location in your code and you are ready to go! (The documentation explains it all quite easily.)
Quick[select] is a jQuery plugin for quick selection of common options in select boxes.
Select boxes are a two tap or click operation. They take the user out of the flow of the form, and there are certain answers that are more commonly chosen than others, such as a reply of “yes” or “no.” Or maybe you would prefer people to give a definite yes/no answer. This plugin provides the ability to bring those options outside of the select list.
Quick[select] prompts a user to an answer, but provides flexibility for questions that need it. The tool uses the browser’s native select list for its overflow, meaning it will work great on all devices.
It’s been tested with jQuery 2, Internet Explorer 11+, Firefox 40+, Chrome 45+, Safari 8+, Chrome on Android and iOS and Safari on iOS, so it should work properly in most applications. Just download the source files from GitHub, include the JS and CSS tags, attach Quick[select] to the appropriate boxes and you are ready to go!
There are a handful of option classes available and some great examples of how to use this tool in the documentation.
The goal of bLazy is to help save bandwidth and server requests to your site to everything loads that much faster. (As an added bonus it saves data usage for mobile users as well.)
The loader has a sleek look and can work with almost any style of website design. The code is fairly easy to understand and install.
Here are a few reasons why you should try it:
- bLazy is used on big sites with millions of monthly visitors so it has been tested plenty.
- bLazy can lazy load all types of images, including background images.
- bLazy can lazy load images depending on screen size (multi-serve images).
- bLazy can serve retina images on retina devices.
- bLazy is lightweight, less than 1.2KB and less than 1.05KB (if you don’t need IE7- support).
- bLazy is AMD, CommonJS and Browser global compatible.
This tool works on all modern browsers and is a great way to better serve images to your users.
jCalculator is an awesome jQuery plugin for calculator inputs.
What’s nifty about this tool is that you can add a calculator to almost any frame within a layout. Need a calculation in a search box? No problem.
The simple calculator design fits into a variety of aesthetics and performs all the basic functions you would expect, such as addition, subtraction, multiplication and division. The tool just pops up when the use navigates to the proper location on the screen. You figure and then keep figuring numbers using the keyboard or mouse with answers populating right on screen.
Plus jCalculator is easy to install and run. Just include the proper lines of code before the body tag close. (You can fin everything you need in the documentation.) Then call the plugin. That’s it!
Stretchy makes form element autosizing the way it should be, meaning that every text element box in your design expands to fit text inputs beautifully. (Everybody likes when things just happen automatically, right?)
Stretchy has a spartan API, since in most cases you don’t need to call it at all. Stretchy works via event delegation and detects new elements via mutation observers, so you do not need to call any API methods for adding new elements via scripting (e.g. AJAX), but if you do need API methods, they are available in the documentation.
To use, just include the script anywhere in the website and you are ready to go!
Chocolat is a responsive jQuery lightbox plugin that allows you to display one or more images on the screen at a time. You can group images as a series of photos as a link or use thumbnails in a full-page or block-style design.
The plugin is powerful and designed in a way that newbie-users or the most experienced programmers can appreciate. It comes with an API and multiple CSS classes. Chocolat is also cross-browser compatible and works with pretty much everything, even Internet Explorer 7.
To make things even sweeter, Chocolat is tiny — just 23 kb and only 10 kb when minified. And it is responsive, as you would expect, so it works on any device and allows you to create custom breakpoints as well.
Other plugin features include:
- Block, full-screen and full-window views
- Cropping or parent block styles for images
- Loop playing to restart the flow once the last image shows
- Keyboard navigation and assignment of shortcut keys
And you can do it all with just three files — jQuery library, plugin file and CSS file — in an easy set up.
Zozo Tabs is a user-friendly, fully responsive and customizable jQuery tabs plugin to take any HTML content, including images, videos and display it in a clean, organized and responsive tabbed navigation.
It works out of the box, making it simple to create beautiful but powerful enough to build branded and highly customized tabs. This plugin features plenty of layouts, vertical tabs, horizontal tabs, responsive tabs, deep-linking, a flat theme pack extension, powerful API, CSS transitions and animations, more than six sizes, more than 30 themes, more than 35 templates, 10 positions, 65 options and much more.
Zozo Tabs is designed for WordPress but can be integrated in other frameworks as well and works with all modern browsers. See the documentation for details on how it can be integrated with other content management systems.
The regular license for this plugin is $8 and includes quality checks by the Envato marketplace, future updates and six months of support from ZozoUI. (You can buy an extended support option as well for just a couple dollars more.)
LayerSlider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows. It comes in a variety of options for viewing including full-width, full-size or fixed-dimension layout options. (This is one of the most popular sliders in use on the web today, and is used on more than 150,000 websites of all kinds.)
It uses cutting-edge technology to provide the smoothest experience that’s possible, and it comes with more than 200 preset 2D and 3D slide transitions. It’s device friendly and supports responsive mode, multiple layouts, touch gestures on mobile devices, and uses techniques like lazy load for optimal performance. You can add any content, including images, text, custom HTML, YouTube and Vimeo videos or HTML5 self-hosted multimedia content.
And it’s SEO-friendly, allowing you to build semantic markup with custom attributes that search engines can index easily.
LayerSlider comes with 13 built-in skins, and it has tons of options to entirely customize the appearance and behavior of your sliders at the smallest detail.
LayerSlider is $11 and comes with Envato quality checks, future ipdates and six months of support from kreatura. (Extra support options are also available.)
Royal Slider is an easy to use jQuery image gallery and content slider plugin with animated captions, responsive layout and touch support.
For the navigation you can use thumbnails, tabs or bullets. Use it as image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery, carousel or even for project presentations. the tool was developed in using best practices in HTML5 and CSS3 transitions are used for all animations.
The tool is based on a modular design so you can build and use only the elements you need. This will help optimize speed and file size and it comes with more than 10 starter templates.
RoyalSlider is $14 and includes quality checks by the Envato marketplace, future updates and six months of support from Semenov. (You can add extra support as well.) This is a plugin you can trust. It’s already in use by plenty of websites, including NYC.gov and Ralph Lauren.
Royal Slider is focused on performance, accessibility, stability and providing best experience for user with any device. It is designed to work with all major browsers and versions, including touch navigation support for iOS (all versions), Android 2.3+, IE10, IE11, Blackberry and other OS and browsers that support touch or pointer events.
Have you ever wanted a drag and drop library that just works? One that doesn’t depend on bloated frameworks, and that has great support? Then Dragula is precisely what you have been looking for.
This little plugin makes drag and drop easier than you can imagine. Key features include:
- Super easy to set up
- No bloated dependencies
- Figures out sort order on its own
- A shadow where the item would be dropped offers visual feedback
- Touch events!
- Seamlessly handles clicks without any configuration
Install using NPM or Bower, include the CSS files and you are ready to go. (And there’s plenty of documentation if you need help along the way.)
Here’s how it works: By default, Dragula will allow the user to drag an element in any of the containers and drop it in any other container in the list. If the element is dropped anywhere that’s not one of the
containers, the event will be gracefully cancelled according to the
removeOnSpill options. (Note that dragging is only triggered on left clicks, and only if no meta keys are pressed.)
There are plenty of options and customizations so you can dictate exactly how this plugin will work on your website.
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.