There’s no doubt that JavaScript is the king of front-end scripting. It’s a fascinating language to create visual effects without any need for backend programming. This is why JavaScript is a natural choice for creating big data charts, graphs, tables, or dynamic interfaces.

The following resources are perfect for any developer that need to build chart-based data for their website(s). Data libraries are often quite detailed, with lots of extra methods and parameters. But as you practice coding and learn JavaScript, setting up a new data chart will become like second nature.

Chart.js

HTML5 is the future of layout rendering and Chart.js is here to usher data charts into that future. Chart.js is perhaps the classic open source library for generating any type of data chart, graph, or visualization element.

Everything is rendered using HTML5 with the added benefit of a canvas element for dynamic effects. Graphs rendered onto an HTML5 canvas allow for hover tooltips and click events to access more information about charted data. The various options range from pie charts, bar charts, radar charts, line charts, and other more advanced styles.

jqPlot

jqPlot renders content as static images which are embedded dynamically. This means chart data can be updated via Ajax without even refreshing the page. Some chart types even have hover options which display related data on hover.

Although there are dozens of various chart styles, the default chart themes are somewhat bland. jqPlot will require a little TLC to get it working nicely into your layout – but it’s certainly a great tool for rendering more complicated datasets.

Chartist.js

Another personal favorite of mine is the Chartist.js library. The homepage itself is simply brilliant and very easy to navigate. This means it’s easy to skim the documentation to find answers for setup and customization.

Each chart type is fully responsive and highly customizable from sizes to color schemes. Chartist relies on SVG to render graphs as images onto the page dynamically. There are fallback options for older browsers. However, the more modern versions will support all the great features like data animation.

HighchartTable

Don’t let the name fool you on this one. Although HighchartTable may seem like it’s meant for displaying HTML tables, it’s actually a plugin which converts tabular data into graphs.

This is a jQuery plugin which is also based off another library named Highcharts. In order to get HighchartTable to function you’ll first need to include the two dependencies(both of which are free). Then you can setup an HTML table and convert the design into a fully-fledged chart. Take a peek at some of the live demos to see how the plugin works.

xCharts

xCharts is meant for more advanced users that are familiar with data visualization. This plugin is based off the D3.js library for rendering in-page graphics and dynamic visuals.

Everything rendered through xCharts is adaptable and malleable. It’s easy to add your own animations or easing functions when interacting with the data. Everything is written using plain JavaScript with array values for the content. The xChart examples page has loads of samples with live easing effects.

C3.js

The open source C3.js library is based on the D3.js library. It’s meant to simplify the process of rendering data charts onto an HTML page without requiring a whole lot of custom D3 chart code.

All of the data is fully dynamic and customizable, from tooltips to graph colors. The best part is that C3.js builds on top of the D3.js library, so it’s easier for new developers to comprehend.

Pizza Pie Charts

Pizza Pie Charts is a well-known JavaScript library built by ZURB for rendering SVG-based pie charts. All of the various display settings and options can be modified directly in CSS or JavaScript.

Zurb is a trusted source for great code, so you know the library is of the highest quality. The only distinction is that Pizza Pie Charts is really best for rendering data into pie charts. Other chart styles would best be found in another library.

Flot

With a simple name like Flot you might expect this plugin to have some negligible features. But surprisingly Flot for jQuery is a minimal yet diverse plugin for data visualization.

The primary benefit of using Flot is the capability of creating animated plotting diagrams. This way, you can have data move through a stream representing large groups of various results. Those who want to grasp the potential of Flot may enjoy perusing the examples directory.

Dygraphs

Developers that are still familiarizing themselves with JavaScript can benefit from a library such as Dygraphs. The initialization code is relatively simple and it doesn’t take a lot of effort to get your first graph onto a webpage.

This library can handle enormous datasets plotting on a variety of graphs. Mobile devices also support interactivity through pinch & zoom display effects. If you wish to plot data with JavaScript, then Dygraphs is a wonderful library for getting started without any dependencies.

Protovis

No Longer Under Active Development

Advanced visualizations require a lot more in the realm of data processing. Protovis is definitely one of the more complex data chart libraries. You’ll really want to have a decent grasp of JavaScript before tackling a project with this script.

However, Protovis does have the capability of rendering exceptionally unique chart styles. The examples page is full of both conventional and customized chart demonstrations. Data organization ranges from simple pie charts to networks, tree diagrams, and even full-scale maps.

These chart libraries should be more than enough for the average web developer. Regardless of your skill level, there is always a solution for every developer, from the complete newcomer up to the wise old master.

And best of all, web standards will continue to gain support for even greater methods of data visualization and user interactivity.

The post 10 Open-Source JavaScript Data Chart Libraries Worth Considering 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.

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.

jQuery Plugins for Layouts

jQuery Navigation & Menu Plugins

jQuery Image & Video Plugins

jQuery Slider, Carousel & Gallery Plugins

jQuery Text Effect Plugins

jQuery Form Element Plugins

jQuery Utility Plugins

…and finally…

More jQuery Plugins

The post The 50 Most Useful jQuery Plugins for Frontend Development 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.

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.

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.

As you would expect, there are plugins below for creating sliders, image galleries, responsive menus, modal windows, and many other common components. But you will also find plugins that offer truly unique functionality, like sidebar margin notes, GIF previews, animated favicons, and much, much more.

You might also like to take a look at our collection of free jQuery plugins, or our collections of JavaScript Cheatsheets.

Textblock

Textblock – A JavaScript tool for displaying continuously responsive typography.

Uppy

Uppy – A sleek, modular file uploader that integrates with any website or app.

Tone.js

Tone.js – A framework for creating interactive music in the browser.

Editor.js

Editor.js – A free, next generation block editor app.

lax.js

lax.js – A small, vanilla JavaScript plugin for creating smooth scrolling animations.

TypeIt

TypeIt – A JavaScript typing library that is billed as the “world’s most versatile”.

iro.js

iro.js – A modern HSV color picker widget for JavaScript that uses SVG.

Cleave.js

Cleave.js – A library for adding real-time formatting to form inputs.

Freezeframe.js

Freezeframe.js – A library that pauses animated .gifs and enables them on hover, click or touch.

darkmode.js

darkmode.js – Add a dark mode to your website with minimal effort.

Scene.js

Scene.js – A CSS and JavaScript timeline-based animation library.

Bun.js

Bun.js – Generate custom checkboxes and radio buttons with CSS.

Overlay Scrollbars

Overlay Scrollbars – A JavaScript plugin that hides native scroll bars and replaces them with custom-styled versions.

MailtoUI

MailtoUI – A script that adds a helpful UI component to standard email links.

FullScreen Slider

FullScreen Slider – Control page sections and enable navigation via mouse wheel and touch events.

pagemap

pagemap – Add a small “mini map” to your website that will provide users with navigational context.

Chart.xkcd

Chart.xkcd – A library for creating charts with a hand-drawn look.

GPickr

GPickr – An implementation of the Pickr color picker library that generates beautiful gradients.

Moveable

Moveable – A JavaScript library that lets you move, resize, drag, rotate and more.

Cube.js

Cube.js – A complete open source analytics solution: visualization agnostic frontend SDKs and API backed by analytical server infrastructure.

simpleParallax

simpleParallax – A tiny JavaScript library that adds parallax animation to any image.

Bounds.js

Bounds.js – A script for asynchronous boundary detection that can be used for effects such as lazy loading.

Creepyface

Creepyface – A JavaScript library that makes your face “look” at the cursor, based on position.

LegraJS

LegraJS – A library that enables you to draw with LEGO-like bricks. What will you build?

Paged.js

Paged.js – is an open-source library for paginating content in the browser. Based on the W3C specifications, it’s a sort of polyfill for Paged Media and Generated Content for Paged Media CSS modules.

Focus Overlay

Focus Overlay – A library for creating overlays on focused elements. Beautiful design and better accessibility.

Flowy

Flowy – A minimal JavaScript library you can use to create flowcharts.

Choreographer-js

Choreographer-js is a simple library to take care of complicated animations.

Leaflet.js

Leaflet.js is a JavaScript library for interactive maps.

Lory

Lory is a touch enabled minimalistic slider written in vanilla JavaScript.

CurrencyFormatter.js

CurrencyFormatter.js is a super simple currency formatting library (155 currencies & 7KB gzipped).

ARc

ARc (Atomic React) is a React app boilerplate with Atomic Design approach.

Shave.js

Shave.js is a modern JavaScript plugin for truncating text within an html element.

Next.js

Next.js is a minimalistic framework for server-rendered React applications.

Blueprint

Blueprint is a collection of React UI components, covering common interface elements, patterns and interactions on the web.

baguetteBox.js

baguetteBox.js is a simple and easy to use responsive image lightbox script with swipe gesture support on mobile devices. it has been written in pure JavaScript.

ScrollReveal

The ScrollReveal plugin makes it super-easy to create web page scroll animations for both desktop and mobile browsers.

Loud Links

Loud Links is a lightweight JavaScript library for adding interaction sounds to your website. It does this by creating an HTML5 audio element and using it to play MP3 or OGG audio files.

Bricks.js

Bricks.js is a ‘blazing fast’ masonry layout generator for fixed width elements.

MediumEditor

Written using vanilla JavaScript, MediumEditor is a lightweight (28kb) Medium.com WYSIWYG inline editor toolbar clone. There are also a selection of Mediumditor extensions and themes available.

Substance

Substance is a JavaScript library for web-based content editing. It gives you all of the tools you need for creating custom text editors and web-based publishing systems.

List.js

List.js is a lightweight and fast vanilla JavaScript script that adds search, sort, filters and flexibility to lists, tables, or anything HTML.

Popper.js

Popper.js is a lightweight (4kb minified) library for managing poppers, tooltips and popovers. You can quickly and easily position tooltips with just a single line code.

InlineTweet.js

InlineTweet.js allows you to easily create tweetable links out of any text on a webpage. All you have to do is wrap the tweetable text in a container with data-inline-tweet.

SweetAlert2

SweetAlert2 is a beautiful and customizable replacement for JavaScript's popup boxes.

Force.js

Force.js is a JavaScript library that makes it simple to animate HTML elements and navigate around a web page.

Push.js

Push.js is a cross-browser solution for getting up and running with Javascript desktop notifications.

Bideo.js

Bideo.js is a JavaScript library that makes it very easy to add fullscreen background videos to web pages.

Microlight.js

Microlight.js is a lightweight code highlighting library, for any programming language, that greatly improves readability.

Algolia Places

Algolia Places is an easy way to use an address search autocomplete JavaScript library on your website.

flatpickr

Written in vanilla JavaScript, flatpickr is lightweight datetimepicker and calendar solution.

anime.js

anime.js is a flexible and lightweight JavaScript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.

Cleave.js

Cleave.js is a plugin that formats your <input/> content while you type.

Lightgallery.js

Lightgallery.js is a fully featured JavaScript lightbox gallery with no dependencies.

The post Top 50 Free JavaScript Plugins & Libraries 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. 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.

5. 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.

6. 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.

7. 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.

8. 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 8 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.

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

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.

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.

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 10 jQuery Plugins for Creating Dynamic Web Layouts appeared first on Speckyboy Design Magazine.