Its main purpose is to simplify the process of writing complex JavaScript functions by bundling them into methods that can be called with just one line of code. This makes it lightweight and easy to extend with free plugins for almost any functionality you can think of.

However, using jQuery also comes with some potential downsides, such as performance issues, added overhead, a learning curve, specific version dependencies, and compatibility with newer technologies.

Despite these drawbacks, jQuery can still be incredibly useful for legacy systems or specific projects, and it remains a popular choice for many developers. In fact, there are a vast number of jQuery plugins available that can help improve the functionality of your website or application.

In this collection, we share some of our favorite jQuery plugins that we believe can help take your web development projects to the next level.

The post The 50 Most Useful jQuery Plugins for Frontend Development appeared first on Speckyboy Design Magazine.

If you’re looking for a super-easy way to implement various jQuery effects or functionality, there are some outstanding WordPress plugins that are up to the task. Here are ten freebies that will help you to harness the power of jQuery – all without the need for writing JavaScript.

jQuery Updater

The version of jQuery that comes with WordPress is not the latest and greatest. In fact, it tends to be quite a bit behind the jQuery project itself.

If you don’t need the backward compatibility of the older versions, jQuery Updater will install the latest stable release on your website. Should you run into problems, deactivating the plugin will put things back the way they were.

Date Picker by Input WP

Date Picker works in tandem with other plugins to convert a standard text input into a jQuery-powered, date-based suite of fields. Choose between a standard date picker, time picker, date ranges, and more. Plus, you can block out dates, making it suitable for use with a booking form.

The free version integrates with Contact Form 7 and Divi, while going pro adds compatibility with Gravity Forms and Ninja Forms.

Q2W3 Fixed Widget for WordPress

Fixed-position widgets are great for keeping information in front of your site’s visitors. Items like shopping carts, navigation and banner ads will stay in view, even as a user scrolls. Q2W3 Fixed Widget for WordPress makes it easy to make any widget a “sticky” one, courtesy of jQuery.

Install the plugin, activate it, click into a widget and select the “Fixed Widget” option.

FancyBox for WordPress

Web designers have long used Fancybox jQuery lightbox to add both utility and interactivity to images. The FancyBox for WordPress plugin makes it easy to integrate this tool into your website.

Any thumbnail linked to an image will automatically load in an attractive lightbox when clicked. In addition, you can customize the look and special effects via a back-end settings panel.

Smooth Scroll Page Up/Down Buttons

Add smooth scrolling effects in the form of handy up and down buttons. Click a button and it will scroll the current page (smoothly, of course) to the next or previous page/section. There’s also an optional “back to top” button.

JQuery Validation for Contact Form 7

This plugin adds jQuery form validation to the popular Contact Form 7. Easily validate the content of form fields including URLs, email addresses, dates, numbers and more.

jQuery Post Splitter

jQuery Post Splitter takes the ability of WordPress to split up large posts into multiple pages and turns it into a unique slider. So, instead of having to click on pagination and manually load in subsequent pages, the plugin uses jQuery and Ajax to quickly load in new slides of content.

It’s a much smoother and more seamless way to navigate through a long multi-part post.

Rotating Tweets

The standard Twitter Widget isn’t very flexible. Rotating Tweets brings a bit of jQuery to the fold by allowing your latest tweets to show one at a time in an animated rotation. You can display tweets as a widget or use a WordPress Shortcode.

Tabs Responsive

Easily add tabbed content within your WordPress posts and pages using a drag and drop interface. Tabs can be created within a page, post or widget. Horizontal and vertical layouts are available. Tabs Responsive also includes support for Font Awesome icons as well.

Equal Height Columns

Using a tiny, 8kb jQuery script, Equal Height Columns uses our spotlighted JS library to solve a web designer’s pet-peeve. Tell the plugin the targeted selectors and it does the rest. The plugin is also responsive, so you can have your fancy equally-tall columns on mobile devices, too.

All That’s Good: Brought to you by jQuery

A quick search around the WordPress Plugin Repository for jQuery brings up quite a volume of results.

It shows how popular, stable, and trusted the venerable library has become. So, whether you’re looking to add special effects like animation or some advanced functionality, chances are there is a WordPress plugin using jQuery to help you achieve your goals.

The post 10 Free WordPress Plugins for Adding jQuery Effects to Your Site appeared first on Speckyboy Design Magazine.

In this article, we’ve curated a selection of powerful, reliable, and easy-to-use form validation plugins that can make your life much easier. Whether you’re building a simple contact form or a complex multi-step checkout process, these plugins offer a range of features and customization options to fit your specific needs.

So, if you’re tired of struggling with form validation, check out these plugins and libraries and see how they can streamline your workflow and improve the user experience on your website or application.

Parsley.js

Parsley.js is a lightweight and feature-rich form validation library that offers a unique approach to form validation. Instead of validating forms with JavaScript, it uses data attributes embedded in the DOM to achieve the same function.

This makes it easy to configure and highly customizable, with the ability to override almost every default behavior to fit your specific form requirements.

quickValidation.js

QuickValidation.js is a form validation library that operates similarly to Parsley.js above. It uses a data-validate attribute in the input tag to assign validation rules, rather than defining them in the JavaScript code.

For example, you can string together rules like required,number, or range=0-99, and then add the .quickValidate class and a data-name attribute to name your field for errors.

jQuery Ketchup Plugin

Ketchup is a lightweight form validation plugin that comes bundled with 18 basic validations and allows you to quickly write your own validations and override default behaviors. With a minified size of only 3.4KB, it’s a lightweight plugin for validating your forms.

The plugin checks a form field’s data-validate attribute by default to find matching validations. Validations are separated by commas and can be grouped together within a single validate() indicator. Additionally, validations can have arguments, which are also separated by commas.

jQuery Validation Plugin

jQuery Validation is a user-friendly plugin that simplifies client-side form validation. With a “drop-in” installation process, it’s easy to use the plugin on your website or application. The plugin comes bundled with a useful set of validation methods and provides an API to allow for custom validations.

To use the plugin, you simply need to add a single line of jQuery to select the form and apply the plugin, along with annotations on each element to specify the validation rules. This makes it quick and easy to implement form validation and ensure that user input is accurate and complete.

IV.js – Javascript Input Validation

IV.js is a jQuery library that simplifies the process of validating user input and working with validation filters. To use IV.js, simply add the IValidate class to your form, and you’re ready to start validating user input.

FormValidation

The FormValidation library offers extensive support for various input types and validation rules, such as required fields, email validation, phone number validation, credit card validation, and more. The library also provides real-time feedback to users while they are filling out the form, indicating whether their input is valid or not.

It also provides seamless integrations with popular front-end frameworks such as Bootstrap, Foundation, Materialize, and Semantic UI. This integration feature ensures consistency in user interfaces and makes it easy for developers to add the form validation library to their existing codebase.

Guardian

Guardian is a versatile jQuery plugin designed to provide robust and customizable form validation. It offers flexibility and extensibility, allowing developers to tailor the validation rules to meet specific project needs.

Validatr

Validatr is a powerful JavaScript library that leverages HTML5 input attributes to provide comprehensive form validation. It supports various input types, including color, date, email, number, and range, and provides flexible validation rules for the input types text, checkbox, and radio.

The library uses native validation wherever possible, using Modernizr to test for browser support. When a specific input type is not natively supported, Validatr uses its own ruleset to supplement the validation process. Regardless of the input type, the validation message is displayed to the user, providing clear feedback on any validation errors.

Formance.js

Formance.js a powerful library that provides formatting and validation for form fields, inspired by the popular jQuery.payment library from Stripe. The library is designed to offer comprehensive support for various input types and validation rules, ensuring a smooth and reliable user experience.

While client-side validation can be bypassed, it still plays an essential role in enhancing the user experience. With this library, you can take advantage of client-side validation to improve the quality of user inputs and reduce the number of errors submitted.

jQuery Validate

jQuery Validate is a versatile jQuery plugin designed to make form validation easy and efficient using data attributes. With this plugin, developers can easily set up validation rules for various form inputs, including required fields, email addresses, phone numbers, and more.

jQuery Form Validate

jQuery Form Validate is a powerful jQuery plugin designed to simplify and streamline the form validation process. With this plugin, developers can quickly and easily validate HTML forms by utilizing HTML5 data attributes applied to each input.

One-Validation

One-Validation is a comprehensive library of regular expressions designed for general validation purposes. With this library, developers can easily validate various input types, including email addresses, phone numbers, URLs, and more, using the power of regular expressions.

Validarium

Validarium is a simple and easy-to-use jQuery validation plugin that builds on the powerful jQuery Validate library. With Validarium, developers can quickly and efficiently validate form inputs using various validation rules, including required fields, email addresses, phone numbers, and more.

Validate Barebones Validation

Validate Barebones Validation is a powerful and versatile jQuery validation plugin designed to provide a customizable and extendable solution for form validation. As the name suggests, this plugin offers a barebones framework for developers to build upon, allowing for maximum flexibility and customization.

The post 15 Form Validation jQuery Plugins & Libraries appeared first on Speckyboy Design Magazine.

In addition to typography control, the collection also features several jQuery plugins for animating your text, controlling responsive type, and recreating some fantastic text effects that are typically only achievable using motion editors.

Whether you’re looking to add subtle typography effects or create complex text animations, these plugins provide a wide range of options to help you achieve your design goals. With their intuitive interfaces and robust feature sets, these jQuery plugins are valuable resources for developers and designers looking to enhance the visual appeal of their web typography.

FlowType.JS

FlowType.js lets you configure font-size and line-height ratios of your typography, helping you improve their overall appeal. You can also specify maximum and minimum width thresholds to control FlowType.js.

Squishy

Squishy is a useful plugin that will automatically resize your text to fit precisely into the container (with no extra work on your part). It comes with a series of options so that you can control the “squishiness”: maxSize, minSize, maxWidth, and minWidth.

slabText

slabText is a plugin that will help you create those big, bold, and responsive headlines that are very popular at the moment. The script splits your headlines into rows and then resizes each row to fill the available horizontal space.

FitText

Similar in functionality to Squishy above, FitText will allow you to have scalable headlines on your responsive layout that will fill the width of the parent element.

TypeButter

TypeButter allows you to set optical kerning for any font on your website. It comes packaged with Arial, Georgia, Helvetica, Times, and Verdana, but if you need another font, you can add your own.

Hatchshow

Animated Typography Plugins

Textillate.js

Textillate.js is a fantastic plugin for applying amazing CSS3 animations to any block of text. You will also need lettering.js and animate.css to use this plugin.

funnyText.js

funnyText.js is a plugin that will allow you to create “funny and crazy moving” typography very quickly.

Lettering.js

Lettering.js, similar in functionality to funnyText.js above, is a jQuery plugin that gives you complete down-to-the-letter control of your web type.

Jumble

Jumble is a plugin that will animate and “jumble” up the colors of your text headers. Choose a color range and set parameters for whether the shuffle is based on brightness or saturation hue.

Wrapping Text Plugins

CircleType.js

CircleType.js is a plugin for setting type around a circle.

jQSlickWrap

jQSlickWrap is a plugin that allows you to quickly and accurately wrap your text around the content of floated images.

Text Effects Plugins

No Vacancy

The simple novacancy.js plugin will give your text a fantastic text neon golden effect.

Flipping Text

Antiquify.js

This unique plugin will ‘antiquify’ your text. Randomly applied aberrations make text look like it came straight off an old, antique printing press.

…and finally…

jQuery Typography Troll

Typography Troll offers an easy way to confuse readers who try to distinguish which of several similar fonts you’re using (like Helvetica and Arial) by randomly assigning a font family to each character in the selected text.

The post 20 Free jQuery Typography & Text Effect Plugins appeared first on Speckyboy Design Magazine.

Fortunately, there are many free date picker plugins available that can enhance the user experience and make it easier to pick dates. Adding a date picker to your form is a straightforward process, and once you learn how to do it, you’ll never go back. That’s why we’ve scoured the web to find the best date picker plugins and compiled them all in one post for your convenience.

In this collection, you’ll find a variety of plugins, including vanilla JS plugins, jQuery plugins, and extensions for popular frameworks like The 40 Best Free Bootstrap 5 Templates & Themes for 2023Bootstrap. No matter your needs, we’re confident you’ll find a plugin that works for you. With these plugins, you can improve your users’ experience and make it easier for them to select dates on your website or application.

1. Flatpickr

The lightweight Flatpickr plugin is easy to use and even easier to setup. It’s designed with simplicity, so the default UI should blend into any layout. If you take a peek at the examples page, you’ll notice this date picker isn’t very complex. But that’s often what users want: a simple interface to input data and move on.

With Flatpickr, you can customize the initial date, month, and year along with restrictions on which date(s) can be picked. Plus, you can add an optional time parameter using the 12H or 24H clock. This is undoubtedly one of the better date picker plugins for its design, UX, and features.

2. Pickadate.js

Another choice I really like is the Pickadate.js plugin. This is designed to be mobile-friendly and fully responsive, so it’s a great solution for all devices.

Pickadate runs on jQuery, so you need that library as a dependency. However, this file is pretty lightweight, and it doesn’t take much to get it working, so even with jQuery, you shouldn’t notice any page lags. This offers a date and a time selection menu, so it’s a fully-featured option no matter what data you’re collecting.

3. Date Range Picker

Input range pickers are extremely common with scheduling programs and visual data applications. For example, Google Analytics uses its own date range picker for visitor data over a specific website.

To recreate this effect try the Date Range Picker. It’s designed to fit into Bootstrap’s CSS stylesheet but can also be used solo. Plus, it supports multi-month pickers, single-month pickers, and pre-defined values for common date ranges(past week, past month, etc.).

4. Datepair.js

To use something a little simpler for range selection, try Datepair.js. This relies on dual input fields for selecting the starting date & ending date of a range. It can also include time ranges based on your settings and how you configure the plugin.

Is this better than a single date picker UI? That’s up to you(or your client) to decide. But this is a simple plugin to set up, and your visitors may prefer the single field inputs.

5. DateTimePicker

Here’s one of the more unique plugins with quite an abnormal interface. The DateTimePicker plugin has its own responsive dropdown menu that lets the user select their date/time using plus & minus icons.

On the one hand, this is easier to jump around and quickly change the month/year with a few taps. But it’s also not the typical calendar UI, so it may take some adjusting from users who aren’t familiar with this interface.

There are pros & cons to everything, so I say take a peek at the plugin and see what you think. This does support separate date & time inputs, but you can also combine them, making datetime selection just one click away.

6. glDatePicker

For a detailed design and tons of optional features, check out the glDatePicker plugin. Considering how much you get, it’s fairly lightweight and measures about 7KB when minified. This runs on top of jQuery, so you must also consider that. But it’s one of the few plugins that offer gorgeous theming for calendar date selection screens.

It has a few pre-designed templates but also has CSS properties that you can restyle yourself. Not to mention all the JS functions have callbacks, so if you’re comfortable with coding, you can add your own features into the mix.

7. Wickedpicker

While this isn’t technically a date picker, it is one of the better time pickers out there. Wickedpicker is a jQuery-powered time selection plugin that works on any input field. It supports user input for hours/minutes and the AM/PM setting. You can also run it on a 24h clock with a simple JS option.

Some date picker plugins have time selection, but it comes as an extra feature. This plugin is designed solely for time inputs, so it’s a nice choice if that’s all you need.

8. Bootstrap Datepicker

Anyone familiar with Bootstrap knows just how useful it is for new projects. If you’re frequently designing sites on Bootstrap, then you should keep this Bootstrap Datepicker saved.

The design includes a section for changing the month & year along with a time selector for altering minutes/hours in your date picker. It blends perfectly into the BS GUI, so it’s undoubtedly a staple for anyone using Bootstrap.

9. Foundation Datepicker

Another popular frontend framework is Foundation, and if you’re more into that library, you should check out this Foundation datepicker also 100% free. It also comes with a time picker and options to include the time inside the date selection screen. You can even define dates based on fixed settings(i.e., only certain dates are available) and limit those dates to certain times.

You can even restyle the time input with fixed choices like 15-minute intervals. You can do a lot with this plugin, so it’s a great addition to any Foundation website.

10. FoxRunSoftware DatePicker

This is one of the top plugins on GitHub for jQuery date pickers. It’s simply titled “DatePicker” but to distinguish it from the rest, it’s the plugin designed by FoxRunSoftware.

It comes with a clean interface, and by default, it uses a 3-month GUI window for date selection. This feels just like the Google Analytics picker, except it’s a bit smaller. The callbacks are pretty simple to code, and you have a lot of control over how to manage the UX. Certainly a date picker worth saving if you want to replicate the Analytics GUI.

11. jQ Datepicker

Here’s one more date picker plugin with the simple title of Datepicker. Again it runs on jQuery, but this one’s designed by a Chinese developer Fengyuan Chen. This Datepicker plugin is phenomenal, and it has a ton of documentation for newer JS developers.

The main demo page is great for toying around, but check out the GitHub repo if you want to get this plugin setup & running on your website.

And if you’re ever looking for more date-picker plugins, try searching GitHub. Web developers release new plugins all the time, so you never know what you’ll find.

The post 10 Free Open-Source Date Picker JavaScript Plugins appeared first on Speckyboy Design Magazine.

To help you get started, we’ve compiled a small collection of CSS and jQuery solutions for making HTML image captions. These solutions vary in their methods and purposes, but all are worth considering. Whether you’re using static HTML or a CMS like WordPress or Joomla, there’s sure to be a codebase that works for your needs.

We hope that this collection serves as a starting point for your research into image captions and helps you find the perfect solution for your own projects. With the right tools and techniques, you can create stunning image captions that enhance the overall visual appeal of your website or application.

CSS Image Captions

Creating image captions with CSS effects can be challenging, but these examples use properties and transition animations for seamless effects. They provide modern and customizable designs without the need for extensive coding knowledge. See how they can enhance your website’s visual appeal.

Label.css

If you’re looking for a great CSS image caption library, label.css is one of the best options out there. With label.css, you can easily add class names to captioned images, which will then be updated in the HTML. You can position captions anywhere over the image, even in the corners, giving you full control over the layout.

One of the standout features of label.css is the ability to hide captions until the user hovers over an image. This can be especially useful when you want captions to display as static text on the page but also want to incorporate hidden animation effects for a more dynamic user experience.

Hongkiat Image Captions

One of the best things about the Hongkiat article on image captions is the variety of CSS techniques used to create them. The article features a gallery of different image captions, each using a different CSS technique. This allows you to mix and match your favorite animations to create a completely unique interface.

All of the codes featured in the article have been tested in modern browsers and support all of the major CSS prefixes. However, one potential issue some users may have is that the script does not follow the traditional figure/figcaption HTML structure. Instead, the caption content is held inside a span within a container div. While this still works perfectly fine, it doesn’t adhere to the exact markup standards.

Slide-In Image Captions

CSS-Tricks is a well-known resource in the web design community, and their tutorial on creating sliding image captions is no exception. The tutorial has been extensively tested in various browsers and works flawlessly, impressing users with its stunning effects and adherence to standard HTML syntax.

One of the standout features of the CSS-Tricks tutorial is its use of the figure and figcaption elements, which are not just included for good measure. These elements help the browser differentiate between the various page elements and provide a more structured, semantic markup that improves accessibility and SEO.

jQuery Image Captions

jQuery offers widespread browser support for consistent image caption display. While CSS may be easier for some developers, jQuery is a valuable tool for enhancing the frontend experience and creating dynamic, interactive websites.

Caption.js

Caption.js is an excellent library that stands out as a valuable resource for web developers looking to create image captions. One of the standout features of this library is its ability to target images based on your own jQuery selectors, including classes and IDs. Additionally, it automatically includes the figure and figcaption elements, ensuring that the final page render is displayed properly with the help of some CSS positioning.

This level of automation can save developers time and effort, allowing them to focus on other aspects of their project while still creating stunning image captions. Overall, Caption.js is a powerful resource that can help take your image captions to the next level and enhance the overall user experience on your website or application.

jQuery.imageCaption

jQuery.imageCaption is a highly customizable plugin that extracts captions from image alt text and renders the figure and figcaption elements for SEO benefits.

Simply calling the imageCaption() function is all that’s needed to apply it to a CMS post or WordPress blog. The plugin transfers any classes added to the img element to the figure element for greater CSS control.

Captionate

If you’re looking for an underrated open-source project for image captions, Captionate is definitely worth checking out. Developed by North Krimsly for use in various CMS engines, it offers a straightforward solution for implementing image captions on your website.

You can find a tutorial guide that explains the process of implementing Captionate on your own website. Essentially, you’ll write an HTML5 img element with the class .caption, which will be picked up by the jQuery script. The alt attribute text is then transferred into a figcaption element and written into the HTML.

HCaptions

HCaptions is a versatile jQuery plugin that can handle all caption content, not just images. Developed specifically for rendering caption content into HTML, it offers a broad spectrum of applications for web developers.

With HCaptions, you have a range of options for controlling the speed and positioning of each caption, giving you greater flexibility and control over your webpage elements. While there may be better solutions for managing HTML images specifically, the HCaptions plugin serves a terrific purpose for captioning other standard webpage elements.

You may be surprised at how resourceful these image caption scripts can be. Not only do they enhance the visual appeal of your website or application, but when used with valid HTML5 code, they also provide an opportunity for Google to crawl your pages and index related content.

With the right tools and techniques, you can create stunning image captions that enhance the user experience and improve the overall functionality of your website or application.

The post The Best Open Source CSS & jQuery Image Captions appeared first on Speckyboy Design Magazine.

One of the newest features I’ve seen is the floating label animation. This happens when a user clicks inside an input field, and the placeholder (or label, or both!) floats above the field. The user can enter their text without the label getting in the way.

If you want to add this to your forms then you’ve come to the right place. I’ve listed my top 9 picks for the best floating label plugins all free, all open sourced, and all made for web designers.

1. floatingLabel.js

First is a classic JS plugin called floatingLabel.js. This was built to be as small as possible with its current size weighing about 1KB.

It’s an excellent little plugin because it works on placeholder text by default. So your placeholder will automatically convert into a floating label above the field once the user enters some text.

Not to mention you can attach this to text inputs or textareas, or both if you’ve got them. The plugin runs with just a single function call, so it’s really easy to setup and the default style is beautiful.

2. jQuery Floating Labels

Here’s a slightly different version of the previous plugin but with a very similar look. jQuery Floating Labels offers the same functionality powered by jQuery and meant to work with jQuery developers.

Note this one is a bit larger, and the JS/CSS files measure a bit more in size. Not to mention this requires the jQuery library as a dependency. But you can set this up with a lot of custom options.

Have a look at the demo page for documentation and you can grab a copy from GitHub if you wanna give it a try.

3. Floatlabel

It really doesn’t get much simpler than the Floatlabel script by Robert Douglas. This also runs on jQuery but it doesn’t have any fancy animations or flashy effects.

Instead this is just a basic form input plugin to handle the shift between placeholder text and input labels. All-in-all it’s a pretty simple plugin but also one of the best I’ve found if you just want a clean solution.

The demo is admittedly pretty darn basic. However if you feel lost you can find all the docs and further details on the main GitHub repo.

4. superLabel

It’s a bird, it’s a plane, it’s superLabel! This jQuery plugin was birthed from the original idea of floating labels that came out of iOS in the early days of smartphone apps.

Unfortunately superLabel does not have a live demo online. But it does have a demo in the source folder which is super easy to dig through.It has the main script files and the demo along with a readme.

Take a look at the GitHub page and download a copy to see for yourself. It only takes a minute to check it out, and if you don’t like what you see there’s plenty of alternatives.

5. FloatLabel.js

The FloatLabel.js plugin is one of the largest in this list. It requires quite a few scripts along with a stylesheet and the Normalize library.

However I think the demo page speaks for itself with a super clean form and a rather unique style for the input fields.

You’ll notice that most other plugins relocate the labels into areas just above the input fields. But with FloatLabel.js the label moves up inside the form. Pretty unique and it’s got one of the best designs out there.

6. Floating Form Labels

Here’s a pretty simple plugin with a pretty simple name. Floating Form Labels is yet another jQuery-powered script and it follows a style like many other plugins in this list.

However it’s got a unique codebase with an extremely simple setup. You basically just call the function on your input fields and let it work. Set it & forget it.

Have a look at the sample CodePen demo to see what I’m talking about.

You may not like the actual style of the labels, but you can change this yourself pretty quickly. The most significant benefit to this floating label plugin is the simplicity of setup and the one-line JavaScript to get it running.

7. Float-labels.js

After a long line of jQuery plugins I’m thrilled to throw in Float-labels.js created by Gemini Labs.

This non-jQuery plugin runs on pure JavaScript with zero dependencies. No CSS or JS libraries required. Just one script file and a bit of setup code.

Best of all this plugin comes with three different styles for your labels. Three! And these basically define where the label appears once it floats:

• Above the input field
• Sitting on the border of the field
• Floating inside the field above the user’s text

Have a look at the GitHub repo for download links and more documentation.

If you’re going for a clean vanilla JS solution this is by far the best choice you’ll find.

8. jQuery Label Overlay

Here’s yet another plugin that doesn’t come with a live demo, but really deserves some attention from developers.

jQuery Label Overlay does exactly as the name suggests. It’ll automatically show/hide labels as they appear over forms once they’re filled out.

This does rely on jQuery, and it’s a relatively older plugin to boot. I only recommend this because it’s so clean and easy to setup, but it’s unlikely to ever get further updates.

9. Bootstrap Float Label

I could never forget all the Bootstrap lovers out there who want a floating label that works with their layouts. And using this snippet you can add floating labels into your BS input fields with pure CSS.

Only problem is this was built for Bootstrap 3 and hasn’t been fully updated for BS4. Although in my testing it does seem to work OK. But who’s to say if the BS4 library will change once it’s out of beta.

The post 9 Free Floating Form Label jQuery & JavaScript Plugins appeared first on Speckyboy Design Magazine.

Nowadays, you can easily have a responsive and dynamic layout that cleverly and seamlessly arranges content into a grid (masonry), or a parallax scrolling design, or even a layout that allows you to define a custom path for users as they scroll through pages.

At first glance, building a site with fancy animation effects may seem tricky. But that is not the case, as you will discover from the collection of jQuery plugins we have for you below. So, break off those shackles, and with the help of these plugins, go and have fun and build a truly dynamic layout for your next project.

jQuery Scroll Path

jQuery Scroll Path is a plugin that, as its name states, lets you define your own custom scroll path. The plugin uses canvas for drawing paths, using the methods moveTo, lineTo, and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initializing the plugin.

Scrolling with Scroll Path can be done with either the mouse wheel, up & down arrow keys, or the spacebar. It also allows for full page rotation using CSS transforms.

SuperScrollorama

Powered by TweenMax and the Greensock Tweening Engine, SuperScrollorama is a popular plugin for creating scrolling and animated presentations.

fullContent.js

Setting it to scroll either vertically or horizontally, fullContent.js will dynamically position a container within the width and height of the browser window and will smoothly scroll between each container. It is an easy-to-configure plugin that gives you a nice presentation-style layout.

jQuery PageSlide

PageSlide is a jQuery plugin that slides a webpage over to reveal an additional interaction pane, that usually contains secondary navigation, a form, or any additional information.

Stellar.js – Parallax Scrolling

Stellar.js is a very easy-to-use plugin that provides parallax scrolling effects to any scrolling element.

scrolldeck.js – Scrolling Presentations

Powered by Scrollorama (above), scrolldeck.js is a plugin for making scrolling presentation decks.

Packery

Packery is a JavaScript layout library that uses a bin-packing algorithm. In other words, it fills all empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around.

Shapeshift v2.0 – Dynamically Arrange Elements

Inspired by the jQuery Masonry plugin, Shapeshift is a plugin that will dynamically arrange a collection of elements into a column grid system similar to Pinterest. It has the ability to drag and drop items within the grid while still maintaining a logical index position for each item.

gridster.js – Draggable Layouts

Similar to Shapeshift (above), Gridster is a plugin that allows you to build intuitive draggable layouts from elements spanning multiple columns. You can also dynamically add and remove elements from the grid.

jQuery Nested

jQuery Nested is a plugin that will create a gap-free, multi-column grid layout experience.

Stalactite – Pack Content

Stalactite is a plugin that slowly and lazily packs the contents of an element. Unlike most packing libraries that try to do all the math and sorting up front, Stalactite takes a lazy approach and sorts each child element sequentially.

Freetile.js – Organize Content

Freetile is a plugin for organizing your content in an efficient, dynamic, and responsive manner. It can be applied to any container element and will attempt to arrange it's children in a layout that makes optimal use of the current screen space by "packing" them in a tight arrangement.

Columnizer Plugin

Columnizer is an easy-to-use plugin that will automatically layout your content in newspaper-style column format. You can specify either column width or a static number of columns.

jQuery Masonry

And, of course, we finally come to the plugin that has inspired many of the plugins on this page: jQuery Masonry. Developed by David DeSandro, the very popular Masonry is a dynamic grid layout plugin that will arrange elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

The post 15 jQuery Plugins for Creating Dynamic Web Layouts appeared first on Speckyboy Design Magazine.

These jQuery slideshow and carousel plugins are simple to implement with just a few lines of code. Most of the effects are created using JavaScript, but a few effectively use CSS transitions and animations. Even though these scripts are lightweight, it is recommended that you stick to using just a single slider/carousel per web page, as too much of a good thing tends to drastically affect the page loading time.

You might also like this small selection of jQuery image gallery and lightbox plugins.

Skippr

Skippr is a super simple and lightweight slideshow plugin for jQuery.

FSVS

FSVS is a simple fullscreen vertical slider using CSS3 transitions with jQuery fallback.

ItemSlide.js

ItemSlide.js is a simple JavaScript touch carousel with support for touch swiping & mouse wheel scrolling.

Simple jQuery Slider

Simple jQuery Slider is a lightweight jQuery Slider that does exactly what a slider should do: ‘slide slides.’

lory.js

lory.js is a touch-enabled minimalistic slider written in vanilla JavaScript.

slideToucher

slideToucher is a content swiping touch-enabled jQuery plugin with support for both vertical and horizontal swipes.

Flexisel Responsive Carousel

Flexisel is a responsive image carousel plugin with options specifically available for adapting the carousel for mobile and tablet devices.

FilmRoll

FilmRoll is a lightweight and simple jQuery carousel plugin that centers the selected item on the page.

Owl Carousel

Owl Carousel is a touch-enabled jQuery plugin that lets you create responsive carousel sliders.

BookBlock

BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow for a "page flip" navigation.

Adaptor

Adaptor is a lightweight content slider that offers a simple interface to create amazing 2D or 3D slide animation transitions.

rcarousel

rcarousel is a highly customizable continuous scrolling carousel jQuery plugin. It even supports older browsers.

Rhinoslider

Rhinoslider is a flexible, multiple effects slider/slideshow plugin. It can be used as a simple fading or sliding jQuery slideshow or as a rich effects jQuery slider.

µslider

µslider is a lightweight jQuery content slider plugin that comes with just a few essential options so it can be configured very quickly.

ResponsiveSlides.js

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container.

Turntable.js

Turntable.js is a responsive, lightweight jQuery slider that will flip through a selection of images as your mouse moves across a container.

The post 15 Free Slider & Carousel jQuery Plugins appeared first on Speckyboy Design Magazine.

With all of these new technologies and fresh ideas, it is very easy to forget about the always reliable and timeless grid-style image gallery.

In this post, we look at 18 free jQuery plugins that will allow you to quickly and easily build a lightweight and feature-rich jQuery image gallery. We’ve also included a few responsive lightbox plugins for good measure. Most of these plugins are responsive, but there are also a few non-responsive plugins, just in case you need them.

Block Slide (Responsive)

Block Slider is a modal window image gallery plugin for jQuery that can be used to create a simple image slider.

Photoset Grid (Responsive)

Inspired by Tumblr’s photoset feature, Photoset Grid is a simple jQuery plugin for arranging images into a flexible grid.

nanoGALLERY (Responsive)

nanoGALLERY is a responsive, touch-enabled, and easy-to-use image gallery plugin.

Justified.js (Responsive)

Justified.js is a jQuery plugin that creates a justified image grid of images.

Shuffle Images (Responsive)

Shuffle Images is a jQuery plugin that allows you to display and shuffle multiple images within a gallery by moving or shaking the cursor.

Magnific Popup Lightbox (Responsive)

Magnific Popup is a fast and lightweight, responsive lightbox plugin that’s also Zepto.js compatible.

Chocolat.js (Responsive)

Chocolat.js is a responsive jQuery lightbox plugin.

Swipebox jQuery Lightbox (Responsive)

Swipebox is a responsive jQuery lightbox plugin that features swipe gestures for mobile, keyboard navigation for desktop, CSS transitions with jQuery fallback and retina support for UI icons.

Smoothbox Responsive Lightbox (Responsive)

Smoothbox is a simple, lightweight, and responsive jQuery lightbox script.

Fresco (Responsive)

Fresco is a responsive lightbox plugin that can be used to create stunning overlays that work great on any screen size.

Simple Lightbox (Responsive)

Simple Lightbox is a touch-friendly responsive image lightbox jQuery plugin.

Nivo Lightbox (Responsive)

Nivo Lightbox is a small and responsive jQuery Lightbox plugin. It comes with automatic content detection and features CSS effects and transitions.

jQuery lightgallery (Responsive)

jQuery lightgallery is a lightweight, customizable, modular, and responsive lightbox gallery plugin.

anoFlow (Responsive)

anoFlow is a feature-rich and responsive lightbox and gallery plugin.

jPhotoGrid (Non-Responsive)

jPhotoGrid takes a simple list of images and captions and turns them into a stylish grid of photos that can be easily navigated and zoomed.

Galleria (Non-Responsive)

Galleria is a highly polished jQuery image gallery framework that is very easy to use yet loaded with advanced customization options.

Micro Image Gallery (Non-Responsive)

This is an improved version of the popular Micro Image Gallery, with many new features.

Sideways – Fullscreen Image Gallery (Non-Responsive)

Sideways is a smooth fullscreen image gallery plugin. It utilizes jQuery UI, jQuery Easing, and the jQuery mousewheel plugins to bring this impressive gallery together.

The post 18 Free jQuery Image Gallery & Lightbox Plugins appeared first on Speckyboy Design Magazine.