DailyJS

DailyJS

The JavaScript blog.


Tagpagination
Featured

jquery ui plugins async pagination jquery-ui

jQuery Roundup: UI 1.10.3, simplePagination.js, jQuery Async

Posted on .

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

jQuery UI 1.10.3

jQuery UI 1.10.3 was released last week. This is a maintenance release that has fixes for Draggable, Sortable, Accordion, Autocomplete, Button, Datepicker, Menu, and Progressbar.

simplePagination.js

simplePagination

simplePagination.js (GitHub: flaviusmatis / simplePagination.js, License: MIT) by Flavius Matis is a pagination plugin that supports Bootstrap. It has options for configuring the page links, next and previous text, style attributes, onclick events, and the initialisation event.

There's an API for selecting pages, and the author has included three themes. When selecting a page, the truncated pages will shift, so it's easy to skip between sets of pages.

jQuery Async

jQuery Async

jQuery Async (GitHub: acavailhez / jquery-async, License: Apache 2) by Arnaud Cavailhez is a UI plugin for animating things while asynchronous operations take place. It depends on Bootstrap, and makes it easy to animate a button that triggers a long-running process.

The documentation has some clever examples that help visualise how the plugin works -- two buttons are displayed so you can trigger the 'success' and 'error' events by hand. It's built using $.Deferred, so it'll work with the built-in Ajax API without much effort.

Featured

jquery plugins menus pagination usability toolbars

jQuery Roundup: jQuery-menu-aim, Toolbar, ngInfiniteScroll

Posted on .

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

jQuery-menu-aim

jQuery-menu-aim (GitHub: kamens / jQuery-menu-aim, License: MIT) by Ben Kamens is a for making large dropdowns in a similar style to Amazon. Ben has written a post about why this is desirable: Breaking Down Amazon's Mega Dropdown.

At every position of the cursor you can picture a triangle between the current mouse position and the upper and lower right corners of the dropdown menu. If the next mouse position is within that triangle, the user is probably moving their cursor into the currently displayed submenu. Amazon uses this for a nice effect. As long as the cursor stays within that blue triangle the current submenu will stay open

Ben made a diagram of this to visualise the area used to detect the mouse.

jQuery-menu-aim

I thought this was a great piece of work, both from the developers at Amazon and Ben in recognising something interesting was going on behind the scenes. The plugin comes with an example, and has configuration options for integrating it with your existing markup.

Toolbar

Toolbar

Toolbar (GitHub: paulkinzett / toolbar, License: MIT, jQuery: toolbar) by Paul Kinzett is a plugin for quickly creating popup toolbars with icons. The markup is an unordered list, and the toolbar can be oriented both vertically and horizontally.

The plugin includes CSS and icons, so it can be dropped straight into a project and should look similar to the examples on the site.

ngInfiniteScroll

ngInfiniteScroll (GitHub: BinaryMuse / ngInfiniteScroll, License: MIT, npm: ng-infinite-scroll) is an AngularJS project that depends on jQuery which can help implement infinite scrolling. It's used by adding the infinite-scroll attribute to an element, and then implementing a controller that can fetch data when required.

The remote data demo shows how it works by calling Reddit's JSONP API.

Featured

jquery apps pagination productivity

jQuery Roundup: jQuery-Paging, Pomodoro Timer App, SAP HTML5 Toolkit

Posted on .

 jQuery-Paging

We've seen a lot of pagination plugins on DailyJS recently, but diversity is good so I'll keep collecting them until somebody convinces me not to! jQuery-Paging (License: MIT/GPL, GitHub: infusion / jQuery-Paging) by Robert Eisele is another take on client-side pagination. Usage centres around the number of items to paginate:

$(selector).paging(itemCount, options);

The plugin will generate a list of links, and clicking a link will cause the onSelect method to fire, which is one of the plugin's many options. Formatting is handled in a relatively unique way -- a format string and formatting callback are used:

$('#pagination').paging(itemCount, {
  format: '[< ncnnn >]',

  onFormat: function(type) {
    switch (type) {
      case 'block': // n and c
        return '<a>' + this.value + '</a>';
      case 'next': // >
        return '<a>&gt;</a>';
      case 'prev': // <
        return '<a>&lt;</a>';
      case 'first': // [
        return '<a>first</a>';
      case 'last': // ]
        return '<a>last</a>';
    }
  }
});

This is an interesting solution to handling formatting in pagination plugins.

Robert has lots of other jQuery and HTML5 projects listed on his site, here: xarg.org/projects/.

 Pomodoro Timer App

Pomodoro Timer screenshot

Pomodoro Timer (GitHub: oivoodoo / pomodoro-app) by Alexander Korsak is designed to manage time using the Pomodoro Technique. It's implemented using Backbone.js and jQuery Mobile. It comes with a little wrapper that allows it to run on Heroku.

The Backbone.js code is carefully organised into collections, models, routers, and views. It serves as a good example of a self-contained Backbone.js application, particularly in terms of code organisation.

SAP's HTML5 UI Toolkit

That's right, you're seeing something made by SAP on DailyJS. I was initially sceptical when I saw their new HTML5 UI toolkit, and the tutorials are PDFs, which didn't help. However, when I saw the jQuery-style API I started to read more:

$(document).ready(function() {
  $('#uiArea').sapui('Button', 'btn', {
     text: 'Hello World!',
     press: function() { $('#btn').fadeOut(); }
  });
});

DailyJS reader Stefan sent this in, and he had a few comments about it that I thought I'd share:

Interesting side note: Their primary target for this is first tablets, then mobile then PCs and they will only support HTML5 (no fallbacks for older IEs).

From what I can gather, SAPUI5 uses jQuery, so it seems like the sapui method in the example is a plugin they've implemented for convenience. Unfortunately, downloading the beta requires an account, and even with a hastily created free account I couldn't get it to download. Regardless, I expect jQuery can now include SAP in their "who's using jQuery" list.

Featured

jquery plugins promises pagination lazyloading

jQuery Roundup: jPages, youRhere, jquery.lazyLoader, Deferred and Promise in jQuery

Posted on .

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

jPages

jPages (License: MIT, GitHub: luis-almeida / jPages) by Luis Almeida is a client-side pagination plugin that can page through a set of elements in an unordered list. Given some suitable HTML, perhaps containing a list of images:

<!-- Future navigation panel -->  
<div class="holder"></div>

<!-- Item container (doesn't need to be an UL) -->  
<ul id="itemContainer">  
    <!-- Items -->
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>  

Then to get pagination controls the only JavaScript we need to use is $('div.holder').jPages({ containerID : 'itemContainer' });.

The author has written lots of demos, applying the plugin to lazy loading images, or even using titles as links to create sub-navigation for a page.

youRhere

You Are Here

youRhere (License: MIT or GPL, GitHub: fastrd / youRhere) by Daniel Sternlicht transforms pages of text to allow the reader's progress to be saved. The current mouse position is displayed with an arrow, and clicking on a line will highlight it. This can persist by using localStorage.

Basic usage is just $('#content').yourhere();.

jquery.lazyLoader

jquery.lazyLoader (License: MIT, GitHub: davetayls / jquery.lazyLoader by Dave Taylor aims to make image loading more responsive by loading images based on the browser viewport size. With carefully named images it can work pretty much automatically:

$('a').lazyLoader({
  img: function(url, windowWidth) {
    if (windowWidth >= 768){
      return url.replace(/.(jpg|gif|png)$/i, '-mega.$1'); 
    } else {
      return url;
    }
  }
});

jQuery plugin authors take note! Dave has raised the bar! He's not only included tests, but he's also running them through a CI server (davetayls/jquery.lazyLoader)! I'm not saying he's the first person to do this, but given the amount of plugins we receive at DailyJS with no tests I found it a pleasant surprise.

Deferred and Promise in jQuery

Deferred and promise in jQuery by Edwin Martin is an introduction to the tools jQuery provides for working with these functional concepts.

So what is a deferred and what is the difference with a promise? As you have seen above, a promise is an object that is returned from an asynchronous function. You need a deferred when you write such a function yourself.

Edwin aims to explain how to use promises and $.Deferred, and also explain how they're different.

Featured

JSON jquery plugins pagination

jQuery Roundup: Jsonify, jquery-download, jqPagination

Posted on .

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

Jsonify

Jsonify by Jorgen Horstink can serialize DOM elements into JSON through the use of HTML5 data attributes. The two attributes, data-jsonify-name and data-jsonify-getter, are used to map and process values as they're serialized:

$.jsonify({
  getters: {
    fruit: function () {
      return this.html().toLowerCase();
    }
  }
});

Then $('form').jsonify() can be used to process a form with fields like this:

<span data-jsonify-name="food.fruit[0].name" data-jsonify-getter="fruit">Orange</span>:  
<input type="checkbox" data-jsonify-name="food.fruit[0].value" value="yes"><br>

<span data-jsonify-name="food.fruit[1].name" data-jsonify-getter="fruit">Banana</span>:  
<input type="checkbox" data-jsonify-name="food.fruit[1].value" value="yes"><br>

<span data-jsonify-name="food.fruit[2].name" data-jsonify-getter="fruit">Strawberry</span>:  
<input type="checkbox" data-jsonify-name="food.fruit[2].value" value="yes"><br>  

jquery-download

jquery-download demo

jquery-download (License: BSD, Demo: jquery-download demo) by John Krauss allows the DOM, or parts of it, to be downloaded through data: URIs. The author's demo has some SVG, so this plugin could be used to extract and download SVG as it's edited.

The same author has a load of new stuff on GitHub at github.com/talos.

jqPagination

jqPagination screenshot

jqPagination (GitHub: beneverard / jqPagination, License: GPL v3) by Ben Everard is a different interface for pagination: next and previous selectors are displayed, but if the current page text is clicked then a page number can be entered. A callback gets the current page number when it's changed:

$('.pagination').jqPagination({
  paged: function(page) {
    // do something with the page variable
  }
});

In the callback, anything could happen: the current location could be changed, or an Ajax method could load more content from a RESTful API. The author has included CSS as part of the plugin's source.