Circliful: A jQuery Plugin Providing Animated Progress Circles

Animated progress circles

I use something similar, but not quite as nice (these are animated progress circles) on my Work With Me page. They don’t have percentages and are just hacked together from codepen.io.

The jquery-plugin-circliful repository on GitHub is way more advanced than what I have on my Work With Me page. Cicliful provides animated progress circles, which you can see on the demo page.

Circulful is very easy to use. Just include jQuery and the Circliful JavaScript and CSS on your page:

Add an element to your site with a unique ID:

Then, to get the progress circle to appear, add this JavaScript:

There’s a lot of optional data- attributes that you can set, as well. The entire list is below, straight from the README.

  • dimension / is the height and width of the element / default is 200px on 200px
  • text / will be deisplayed inside of the circle over the info element
  • info / will be deisplayed inside of the circle bellow the text element (can be empty if you dont want to show info text)
  • width / is the size of circle / default is 15px
  • fontsize / is the font size for the text element / default is 15px
  • percent / can be 1 to 100
  • fgcolor / is the foreground color of the circle / default is #556b2f
  • bgcolor / is the background color of the cicle / default is #eee
  • fill / is the background color of the whole circle (can be empty if you dont want to set a background to the whole circle)
  • type / full or half circle for example data-type=”half” if not set the circle will be a full circle / default full circle
  • total / If you want to display the percentage of a value for example you have 750MB Ram and at the moment are 350MB in use. You need to set data-total=”750″ and data-part=”350″ and the circle will show the percentage value 36,85%
  • part
  • border / Will change the styling of the circle. The line for showing the percentage value will be displayed inline or outline.
  • icon / Fontawesome icon class without the fa- before the class for example not fa-plus just plus
  • iconsize / Will set the font size of the icon.
  • iconcolor / Will set the font color of the icon.
  • animationstep / Will set the animation step, use 0 to disable animation, 0.5 to slow down, 2 to speed up, etc / default is 1

Circliful is available on GitHub, there’s also a demo. I’ll eventually switch the progress circles on my Work With Me page to use Circliful. I mostly enjoy it’s ease of customization through data- attributes.

If you need help configuring something, feel free to leave a comment. Make sure you look through the issues that have already been reported, too.

Advertisements

jQuery Plugins For Those Who Don’t Know JavaScript

Plugins to ease development for front-end designers

I saw jQuery-Plugins repository in my GitHub Today email yesterday. I’m a sucker for collections of cool things, and this repo is just that. It’s basically a collection of simple jQuery plugins that are very easy to use, requiring little or no experience with jQuery or JavaScript.

Here’s a little from the plugin’s README:

These jQuery plugins have been created to ease the pain that some front-end designers feel when they’re trying to implement basic features with little or no JavaScript or jQuery experience.

I plan to add plugins to this repository over time that only require HTML code, data-* attributes, and the inclusion of the script in question, following the same kind of principles as the Twitter Bootstrap extensions, in so far that no coding experience should be required in order to make things work.

It looks like there’s 4 plugins included:

  1. Carousel
  2. ClassToggle
  3. Google Analytics Helper
  4. SnapSlider

The developer has plans to continue adding more simple plugins.

The examples can be seen individually, too. Here’s the Carousel plugin in action. Here’s a few ClassToggle examples. There’s also a Google Analytics Helper example, showing how to track events and URL’s.

jQuery-Plugins looks like it could be a useful set of plugins. I may actually use the Carousel plugin for an upcoming project.

These plugins will come in handy for almost anyone, frontend or backend developers. Check them out!

Pretty YouTube Embeds with PrettyEmbed.js

Prettier YouTube Embeds

PrettyEmbed.js is a jQuery plugin for making your YouTube embeds look much better. It’s on GitHub, and a demo can be seen here on CodePen.

PrettyEmbed.js works with FitVid.js, but it’s not required, and comes with options like high-res preview images and advanced customization of embed options.

You can see some of the advanced customization options in the CodePen demo below. Just click the “JS” tab to see the JavaScript.

See the Pen PrettyEmbed.js Demo by Mike Zarandona (@mike-zarandona) on CodePen.

I’ve used this for a number of client websites, people like to host their videos on YouTube, yet have an elegant looking player that’s not screaming YOUTUBE when it’s embedded. This is where PrettyEmbed.js comes in. This is for those of you who want nice looking YouTube embeds.

Documentation is quite good and provides a list of all options and how to use it with HTML5 or with Javascript. It does require jQuery.

Version 0.0.3 of jQuery Sticky Alerts Plugin Now Available

I’ve released version 0.0.3 of my Sticky Alerts jQuery plugin. It’s available on GitHub and is now indexed at plugins.jquery.com.

I’ve added a feature to remember if the bar has been closed or not. This is done via cookies, and there’s an option to set. The option, cookieRememberDays, default to 2. If you want to disable it (ie: bar will appear every time the page is loaded no matter what), you need to set cookieRememberDays to a value of 0.

To keep the bar closed for 7 days, do something like this:

To keep it as-is, and make the bar open on every page load, do this:

Head on over to GitHub for a download link, or click here to download version 0.0.3 directly from the GitHub tag.

Sticky Alerts: A New, Tiny jQuery Plugin

A super tiny sticky alerts plugin

Why?

Just because. Sticky Alerts can be downloaded here, and a demo can be seen here.

This pen from Thommy Browne caught my eye. The sticky alert bar was made with some very simple jquery and a bit of CSS.

I’ve been quickly increasing my JavaScript knowledge and figured I’d try creating a legit jQuery plugin, using the code from Thommy Browne. After a couple hours of tinkering, I had it! I was really surprised how easy it is to create a jQuery plugin, even adding options to plugins is crazy easy.

So, if nothing else, this was simply an exercise in creating a jQuery plugin.

Get It

You can see the plugin in action at https://sticky.longren.io/, which is hosted on GitHub Pages. The plugin itself can be downloaded from GitHub. The JavaScript is incredibly small, a total of 36 lines, which could easily be condensed into about 5 lines.

jQuery Sticky Alerts is available under the MIT license and is free for use on personal or even commercial projects.

Using the plugin is extremely easy. Just define the container you want the alert to sit in, make sure jQuery and jquery.stickyalerts.js (and jquery.stickyalerts.css) is loaded, define some options, and you’re set!

You can also use jQuery Sticky Alerts with bower and npm.

You can see usage instructions at the GitHub project page. Below are the options in use on the demo page:

Get It For WordPress

Mike Smith was generous enough to build a WordPress plugin using my Sticky Alerts jQuery plugin. The plugin is called Guerrillas Sticky Bar and can be found at the WordPress plugins page.

Provide Feedback

I’m new to building jQuery plugins, so let me know if I’ve made any errors or if you see anything I could be doing better (I want to learn!!). You can leave a comment on this post or create an issue at GitHub. Pull requests are also welcome! :)

If you decide to use Sticky Alerts in a project, I’d love to know about it! Just drop a link in the comments.