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.
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.
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.
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.
Codepad is a place for developers to save & share code snippets. Join the community we can’t wait to let you in!
Save snippets online at Codepad making them easily accessible and all in one place. Become a Codepad member you get a sweet user profile where you can add a bit about yourself. There are various stats available we count snippet views, likes, downloads, comments, the list goes on.
When saving any snippet you have the option to make it public, part private or private. With your snippets saved online you can access your code snippets anywhere. Liking a snippet will keep a reference in your dashboard making it easy to find later.
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.
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.