DailyJS

DailyJS

The JavaScript blog.


Taggalleries
Featured

jquery ui chrome galleries tables

Dynatable, nanoGallery, jQuery Audit

Posted on .

Dynatable

Dynatable

Dynatable (GitHub: JangoSteve / jquery-dynatable, License: AGPL or commercial) by Steve Schwartz is a library for displaying JSON data as friendly and efficient HTML tables. It provides a framework for searching, sorting, and filtering data. It uses jQuery, and can be invoked with $.dynatableSetup.

Dynatable can convert plain HTML tables into JSON. The properties for the JSON can be camelCase, but other styles are supported, including dashed and underscore. This is set with the table.defaultColumnIdStyle option.

JSON can also be fetched from a server. In this case you can use the dataset option:

$('#my-ajax-table').dynatable({
  dataset: {
    ajax: true,
    ajaxUrl: '/dynatable-ajax.json',
    ajaxOnLoad: true,
    records: []
  }
});

It expects a corresponding skeleton table node, with thead and tbody.

The documentation is thorough and includes examples for each of these things, and the other features provided by the library.

nanoGallery

Nobody's sent me a jQuery gallery for a while. nanoGALLERY (GitHub: Kris-B / nanoGALLERY, License: CC BY-NC 3.0) by Christophe Brisbois supports Flickr and Google+, and supports responsive layouts. You can get a gallery going with a Google account like this:

$('#elt').nanoGallery({
  kind: 'picasa',
  userID: 'you@example.com'
});

It comes with CSS, but you can theme it. It displays a gallery navigator using folders, so it could scale up quite well to a large collection.

Documentation for the main options and expected markup can be found in the project's readme file.

jQuery Audit

jQuery Audit (GitHub: zertosh / jquery-audit, License: MIT) by Andres Suarez is a Chrome Developer Tools extension for auditing jQuery. It adds a sidebar (under Elements) that includes details of delegated events and internal data.

The documentation has explanations of the main features, and instructions on how to use the extension properly. For example, you can dig into bound functions for event handlers which can be bound differently based on the library.

Featured

jquery plugins galleries images select

jQuery Roundup: 1.10.1, 2.0.2, ikSelect, photoWall.js

Posted on .

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

jQuery 1.10.1 and 2.0.2

"A new release already? It's only been a week! Yes, because you deserve it. We're greatly encouraged by all the people who upgraded and found our well-hidden 'we completely hosed relative animations' easter egg," writes Dave Methvin, about the release of jQuery 1.10.1 and 2.0.2.

The full background to this bug was documented in ticket #13939. Another animation-related bug was fixed, and an IE selector/iframe issue as well.

ikSelect

ikSelect (GitHub: Igor10k / ikSelect) by "Igor10k" is another select replacement plugin! This one supports custom markup and inline-block, optgroup, adding and removing options, callbacks, and event triggers.

The API is clean and idiomatic jQuery. There's a single entry point, $(selector).ikSelect which can be used to apply the plugin to a select, or issue commands to an instance of ikSelect. Various options are supported, like setting the width automatically and adding search support (known as filtering in this case).

photoWall.js

photoWall.js (GitHub: jeremyjcpaul / photowall, License: MIT, jQuery: photowall) by Jeremy JC Paul creates a photo gallery in a similar style to Google+/Picasa, where clicking on an image opens a panel that displays additional metadata.

The markup allows the photo's title and description to be specified like this:

<div class="photowall">  
  <div class="pw-slide">
    <img class="pw-image" src="images/image-filename.jpg" />
    <div class="pw-image-desc">
      <!-- Any HTML content can go in here. -->
    </div>
  </div>
</div>  

The plugin is invoked using $(selector).photoWall(), and supported options include event handlers and animation speed.

Featured

jquery plugins galleries slideshow sortable

jQuery Roundup: Plugin Registry, imagemax, jQuery Sortable

Posted on .

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

jQuery Plugin Registry

jQuery: Write once, do more, then write a weird framework-specific manifest file, learn Git, then share!

The new jQuery Plugin Registry has finally been released. It's based on WordPress, and you can download the source from GitHub: plugins.jquery.com.

To list a plugin on the registry, take a look at the Publishing Your Plugin guide. The workflow is based around Git, and you'll need to write a jquery.json manifest file so the registry can display appropriate metadata. Even though dependencies are listed, there isn't an official automated tool for installing them (a jQuery npm or component equivalent):

If you're looking to just browse and use jQuery plugins in your application or site, not a lot has changed. Plugins each have basic pages that provide a link to the plugin download, as well as past versions, documentation, issue tracker, and source code repository. Download links may serve you a zip file with the plugin assets, or link to the best resource to download the build of the plugin you're looking for.

Given the amount of people writing JavaScript libraries with an optional jQuery support layer, having to add an extra file just to get published on a website seems odd to me. While it means you don't need to create an account on the plugin registry site, people will end up with several json files littering their repositories and getting out of sync. There's probably already a Node tool for automatically generating jQuery, Component/Bower, and npm/Ender json files.

imagemax

imagemax (GitHub: zerostatic / imagemax, License: MIT) by Matt Wallace is a fullscreen slideshow plugin. Images are displayed in the background and scaled to fit the window.

Like other gallery plugins, this one will display a set of images in a container, but it also takes an array of images as an argument:

$('#bg').imagemax({
  imageArray: ['img/bg1.jpg','img/bg2.jpg','img/bg3.jpg']
, autoPlay: 4000
});

jQuery Sortable

jQuery Sortable (GitHub: johnny / jquery-sortable, License: BSD3) by Jonas von Andrian is a drag-and-drop sort library that doesn't require jQuery UI. It supports nested lists, and the demo (with default options) shows a nice "drop" indicator so it's easy to see where an element is being moved to.

The author has demonstrated it being used with Bootstrap, and it works well with Bootstrap's markup and styles. It allows tables to be sorted, but this won't work as well in Konqueror or IE.

Featured

jquery testing plugins galleries truncation

jQuery Roundup: trunk8, tcsst, MaxImage

Posted on .

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

trunk8

trunk8 (GitHub: rviscomi / trunk8) by Rick Viscomi is a text truncation plugin. Truncating text in browsers is actually quite awkward to do well, and I haven't yet found a plugin that does it particularly well when a certain number of vertical lines is required. However, this one appears to do that through the lines option, and it also does a lot more: tooltips can be created, character count is supported, and the internal calculations are cached so it should perform very well.

The author has attempted to address performance using several familiar client-side hacks, so if speed is an issue this might be a good choice. The author hasn't included unit tests or benchmarks, so it might take a bit of jsPerf to really see how efficient it is.

tcsst

tcsst by Paul Battley is a CSS testing script for jQuery. The author wrote it because "life's too short to click around". It's basically a simple test runner with a CSS-specific flavour: tests are defined in terms of CSS selectors:

tcsst(function(tc){  
  tc.test('top of paragraph should be at a multiple of line-height', 'p',
    function(test, element){
      var lineHeight = parseInt($('body').css('line-height'), 10);
      var diff = $(element).offset().top % lineHeight;
      test.assert((0 == diff), 'Off by ' + diff + 'px');
    });
});

It's an interesting concept, and I think there's a lot of room for time-saving assertions that are tailored for CSS.

MaxImage 2.0

MaxImage 2.0 (GitHub: akv2 / MaxImage, License: MIT/GPL) by Aaron Vanderzwan is a fullscreen background slideshow plugin. There's a demo of MaxImage that shows it being used with the jQuery Cycle and Easing plugins.

This plugin actually checks if the browser supports background-size, so it should look good in modern browsers. It also pre-loads images.

Featured

jquery plugins tooltips galleries

jQuery Roundup: grumble.js, miniTip, Mosaiqy

Posted on .

Note: You can send your plugins and articles in for review through our [contact form](/contact.html) or [@dailyjs](http://twitter.com/dailyjs).

grumble.js

grumble.js (GitHub: jamescryer / grumble.js) by James Cryer and Huddle.com is a very flexible tooltip library:

A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified. Any CSS style can be applied. There's auto-magic size adjustment for use with localised text. FX queues for animating multiple grumbles.

It uses CSS3, but will use Microsoft's proprietary filters for IE6+.

The example seen on the site's homepage works like this:

$('h1').grumble({
    text: 'Bubble-tastic!', 
    angle: 85, 
    distance: 100, 
    showAfter: 500 
});

miniTip

miniTip (GitHub: goldfire / miniTip, License: MIT and GPL) by James Simpson is a lightweight tooltip
plugin. This one uses title attributes to display neat little tooltips.

There are options for customising the content, delay, events,
animations, but the most basic usage is just
\$('#tip).miniTip();.

Mosaiqy

Mosaiqy (GitHub: fcalderan / mosaiqy, License: CC BY-ND
3.0
) by Fabrizio
Calderan is a plugin for displaying images in a grid and manipulating
them with animations. HTML5 and JSON/JSONP are used for the templates
and data. CSS3 hardware acceleration is used where available, and it
will fetch data from popular sites like Flickr and Instagram.

Full details of usage and configuration options can be found at
fabriziocalderan.it/mosaiqy.