Drag and Drop is a full website and content management system back end with an included database. This plugin works with that system to create three options for using and displaying sortable lists with jQuery, CSS, mySQL, AJAX and PHP.
The first example populates the list from the database, allows you to sort the order, then allows you to save he list using ajax functionality so the page does not reload. In addition, there is a message box that shows the status of whether the boxes have been moved and not saved and whether changes have been implemented to the database.
The second example is a simple sort list that allows you to produce a list of varying length and apply a drag and drop feature.
The third example shows how the functionality can work across a multiple column format.
This tool works across a variety of platforms and includes support for touch devices and lets you save lists via a cookie session. Drag and Drop Sortable Lists is available from the Envato Market for $5. The license includes future updates and has been quality checked by Envato. Additional support is also available.
Material Design Hierarchical Display is a jQuery plugin that creates a hierarchical display animation effect. The meaningful transition helps focus user attention in an app and leads them from point A to point B.
This tool is pretty nifty with subtle visual cues for users that add an element of finesse to a design. Plus the plugin works with all modern browsers including Chrome 4+, Firefox 16+, Opera 12.1+, Safari 4+ and Internet Explorer 10+.
Use is pretty simple, just download the plugin, unpack and add a couple lines of code to your site. You’ll want to set a few options as well to make the plugin your own. Customization choices include action, speed, animation, and debugging.
The plugin comes with pretty extensive documentation so you can learn more and set it up with ease. There is also an option to run it with Animate.css if you are interested.
Create a custom-branded video with jQuery Video Player Extend. This little tool allows you to add a logo and more to videos for a custom playing experience.
In addition to a custom logo, you can add markers with labels, play a YouTube video, play FLV video (with basic support) and make your video responsive. The tools work well and look nice.
With a little working HTML knowledge, you can grab the code and get this feature working on your website in a hurry. (And you won’t regret it.)
Lightbox Evolution is a tool for displaying images, HTML content, maps, and videos in a lightbox style container that floats on top of a webpage. Using Lightbox Evolution, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.
You can use this tool to showcase content in a way that is different, user-friendly and does not take visitors away from your website to view content from other locations.
You can used colored boxes — and customize the options — images or combinations of the two. There are plenty of mix-and-match options available with this tool to help you make the most of your content.
This tool is available for $14 from Envato Market and includes future updates.
Tabslet is a jQuery plugin for tabs. It is lightweight, easy to use, compatible with all modern web browsers and is mobile-friendly. It supports custom events, rotation animation and controls. Simply, it does pretty much everything you will need.
Here are some of the features that go beyond standard tab controls:
- Flexible HTML structure
- Custom events
- Data attribute initialization and configuration
- Controls (next, previous)
- Rotation (useful for banner rotators/carousels)
- Deep linking support
- Change tabs on mouse over
- Use animation effect for tabs’ changing
- Ability to use either href or alt attribute to target tab
- Destroy and control (next, prev, show) methods
Check out the documentation to learn more about Tabslet and see it in action.
Slider Revolution is an innovative, responsive jQuery slider plugin that displays content in the most beautiful way. Whether it’s a slider, carousel, hero scene or even an entire front page, you will be telling your stories in no time.
The slider is one of the most-used in the market because it works great and is fully responsive. It’s also optimized for Apple and Android devices. It also works with any type of content, including photos, video and social media streams.
Not sure how to use a slider? This package comes with 35 ready-to-use examples and is super flexible. Here are just a few of the features that come with this slider:
- Hero, carousel and classic layouts
- Unlimited sliders per page
- Date-based publishing
- Links and actions on slides
- Parallax effects and customizations
- Social media integration
- Bulk upload capability
- Custom animation creation
- Unlimited number of layers available
- Multiple navigation options
- Touch enabled
- Auto-hide and delay features
- Keyboard navigation
- Plenty of “fancy” skins
- Ability to auto-play (or not)
- And so much more
You can get Slider Revolution from the Envato Market for $14 and it includes future updates.
Slides Framework will help you to create a beautiful promo site with stunning animations and clean code.
The framework comes with 60 beautiful slides and 11 quick-start templates that you can combine. It was born to help you to create a beautiful form for the story you want to tell. Every slide is available in PSD, Sketch and HTML formats.
The advantage to Slides is that it is a one-of-a-kind presentation builder. It makes it quick and easy to build a site to show off your products. The code is clean, animations are crisp, the framework is designed beautifully and almost anyone can get a site up in no time.
Slides is fully-responsive as well, so that all your work will look great on any type of device. And with all the available options, every site created with Slides looks completely custom.
The full slides package, including templates, the generator, unlimited usage and support is $249 from Designmodo.
This jQuery banner rotator plugin features multiple transitions. Thumbnails and buttons allow for easy navigation of your banners or ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.
Key features include:
- Multiple transitions available that you can set by slide.
- Ability to load an unlimited number of images, with customizable text, tooltips and links.
- Show or hide components.
- Automatically play on startup with a timer delay. (This can be set by slide.)
- Banner, thumbnails, and buttons are all resizable.
- The text description panel can be set at different location and size.
- Embed links and images are inside the HTML text description box.
- Control panel can be set at different location.
- Configurable tooltips for each thumbnail.
- Block and stripe sizes are configurable.
This tool is available for $11 from Envato Market.
Ad blocking is one of the hot topics in website design and development right now. Adblock Identifier is a sweet little tool that detects ad blocking software and creates an alert for users that functionality will be disabled if the ad block is left running.
Installation is key with this tool and you should follow the instructions carefully. Customization options include the title, description and theme for how the message looks. It comes with light and dark options with a light default.
You have a few customization options to think about, including the text in the alert message. The tool allows you to keep users from specific content if they are using ad block software or just warn them for next time.
This tool allows you to create an unlimited number of sliders with custom settings for each. You can then put them anywhere on your website. And if you are not sure where to start Slider Evolution comes with a few themes to help you get started.
The slider comes with transitions for fade, bars, square, slide, explode, swipe and slip. Each animation works seamlessly and beautifully.
This tool is $9 from the Envato Market and is quality checked by their team and comes with future updates.
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.)
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!