The JavaScript blog.


ui graphics images icons Microsoft

Material Design Icons, rdljs, PhotoSwipe

Posted on .

Material Design Icons for Angular

Google's Material Design stuff is amazing, and their recent UI and animation libraries are useful for those of us who don't want to spend too much time developing a totally new UI for every project. However, these tools have limitations. Urmil Parikh found that the official Material Design Icons were hard to recolour without patching the SVG files.

Material Design Icons

To work around this issue, Urmil created Angular Material Icons v0.3.0 (GitHub: klarsys/angular-material-icons, License: MIT, Bower: angular-material-icons, npm: angular-material-icons). By including this project, you get a new Angular directive called ng-md-icon which supports options for style and size. It also optionally supports SVG-Morpheus -- this allows you to morph between icons which might work well in animation-heavy material design projects.

This library works by hard-coding the SVG paths in an object called shapes. The paths can be embedded in svg elements with the required size and style attributes.


André Vale sent in rdljs, a library for Microsoft RDL/RDLC reporting. This technology is completely new to me, so I had to ask him for clarification. Apparently, RDL stands for Report Definition Language, and is used with Microsoft SQL Server Reporting Services. RDL files are XML schemas for designing reports, so André's library allows you to take RDLC files and render them in a browser.

The library comes with a demo, but you'll need to run a webserver to try it out. It's intended to be used with a server side application that sends the XML using Ajax requests. It uses D3 and jQuery. The source that does the XML parsing looks extremely involved, so it would be interesting to see what people can do with it who've got RDL experience.


PhotoSwipe (GitHub: dimsemenov/PhotoSwipe, License: MIT, Bower: photoswipe) by Dmitry Semenov is a mobile-friendly image gallery. It works through instances of the PhotoSwipe object, and there are methods for things like going to the next/previous slide, and skipping to a specific slide. The API also supports events.

There's full documentation in website/documentation/api.md which explains how to add slides dynamically, so you can load slide data asynchronously if required.

One thing I liked about the PhotoSwipe was the mouse gestures: if you click and swipe it works in a similar way to swiping on a touchscreen. It also feels fast and lightweight.


jquery plugins css3 animations icons

jQuery Roundup: minimit-anima, loda-button

Posted on .

Note: You can send your plugins and articles in for review through our contact form.



minimit-anima (GitHub: minimit / minimit-anima, License: MIT, jQuery: minimit-anima) by Riccardo Caroli is an animation plugin that uses hardware accelerated CSS3 animations with fallbacks for older browsers. The API is queue-based like jQuery's standard animation API. The following example specified an easeOut of 400ms:

$(this).anima({ x: 20, y: 20 }, 400);

Hardware acceleration can be triggered by adding the z co-ordinate and perspective properties:

$(this).anima({ x: 200, z: 0, perspective: 1000 }, 800);

The API has other features, like delaying animations with delayAnima(ms), clearing the queue with clearAnima, and stopping the current animation with stopAnima. Any CSS property can be animated, along with shortcuts for scale[X|Y|Z], rotate, and skew.



loda-button (GitHub: lugolabs / loda-button) by Artan is a small plugin that animates the icon in a button while an asynchronous operation is performed. The recommended markup uses anchors and spans:

<a href="#" class="loda-btn">  
  <span aria-hidden="true" class="loda-icon icon-mail"></span>

And requires a bit of JavaScript to set it up:

var lodaBtn = $('#loda-btn').lodaButton();  

The animation can be triggered by passing start to the button:


The icon fonts are IcoMoon by Keyamoon.


JSON jquery plugins forms icons

jQuery Roundup: jQuery.IO, Animated Table Sorter, jQuery-ui-pic

Posted on .

Note: You can send your plugins and articles in for review through our contact form.


jQuery.IO (GitHub: sporto / jqueryio.js, License: _MIT) by Sebastian Porto can be used to convert between form data, query strings, and JSON strings. It uses JSON.parse, and comes with tests and a Grunt build script.

Converting a form to a JavaScript object is just $.io.form($('form')).object(), and the output has form names as keys rather than the array results .serializeArray returns.

Animated Table Sorter

Animated Table Sorter (GitHub: matanhershberg / animatedtablesorter, License: MIT, jquery: AnimatedTableSorter) by Matan Hershberg is a table sorting plugin that moves rows using .animate when they're reordered.

All you need to do is call .tableSort() on a table. CSS and images have been provided for styling the selected column and sort direction.


jQuery-ui-pic (GitHub: rtsinani / jQuery-ui-pic) by Artan Sinani provides an extracted version of the icons from Bootstrap and the image sprites from jQuery UI.

In this version the CSS classes are all prefixed with pic-, so you can use them like this: <i class="pic-trash"></i>. This might prove useful if you're looking for a quick way to reuse jQuery UI's icons without using the rest of jQuery UI. I licensed Glyphicons Pro myself because I find myself using them so much.