jquery4u.com - Archives (décembre 2014)
1 jQuery Fan Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets.
Together with the parallax scrolling effect, rotating content is another example of an effect that you often see implemented in websites. You can see it used to rotate news, tweets, Facebook posts, and so on. When built using jQuery, often developers create the widget employing the hide() and the show() methods (or the similar methods such as fadeIn()/fadeOut() and slideUp()/slideDown()). The problem with them is that, after performing the animation (if any), these methods change the value of the display property of the selected element(s) to none and back to the original value respectively. This behavior leads to an accessibility issue.
In this article we'll describe what the issue is and how you can use different jQuery's methods to achieve the same effect but taking care of accessibility.
The Problem
Some people, usually but not limited to visually impaired people, use the TAB key to navigate a website. If you're not familiar with this concept, what happens is that every time a user hit the TAB key a focusable element of the page is focused. The order in which the elements are focused follows the the order they appear in the DOM (exceptions apply) starting from the very beginning of the page. Some examples of focusable elements (learn more inWhen Do Elements Take the Focus?) are links, input fields, buttons, and everything that has a value for the
tabindex attribute greater than or equal to 0 (learn when and how to use tabindex). The important point to understand is that an element hidden by setting its display property to none is not focusable.
With this in mind you can see that if a TAB user is focusing an element (for example a link) that has been hidden using the hide() method and then the user presses the TAB key, there is a problem. Being hidden in that way is like the element has been temporarily removed from the DOM, so there isn't a next element to focus. What browsers do in this case is to reset the position, usually focusing the URL of the page. This causes a lot of frustration to the users because they have to start from the beginning of the page every time they reach this death zone. Even more, some of your users can't even see your awesome rotating effect - all they want to do is access your content easily.
Show Me the Code
To give you a better handle on this situation, consider the following markup: [html]This is a text with a link 1 and another link 1
This is a text with a link 2 and another link 2
This is a text with a link 3 and another link 3
This is a text with a link 4 and another link 4
Continue reading %How to Accessibly Rotate Contents with jQuery%
If you've used jQuery much at all, then you're probably already familiar with event binding. It's fairly basic stuff, but dig a little deeper and you'll find opportunities to make your event-driven code less brittle and more manageable.
A Better Selector Strategy
Let's start with a basic example. Here's the HTML for a nav menu that can be toggled on or off:
[html] [/html]And here's some JavaScript to toggle the nav menu when the button is clicked:
[js] $('.nav-menu-toggle').on('click', function() { $('nav').toggle(); }); [/js]This is probably the most common approach. It works, but it's brittle. The JavaScript depends on the button element having the nav-menu-toggle class. It would be very easy for another developer, or even a forgetful you in the future, to not realize this and remove or rename the class while refactoring.
The heart of the problem is that we're using CSS classes for both presentation and interaction. This violates the separation of concerns principle, making maintenance more error-prone.
Let's try a different approach:
[html] [/html]This time we're using a data attribute (data-hook) to identify elements. Any changes involving CSS classes will no longer affect the JavaScript, giving us better separation of concerns and sturdier code.
We just need to update the jQuery selectors to use data-hook instead:
Notice I opted to use data-hook for the nav element as well. You don't have to, but I like the insight it provides: anytime you see data-hook, you know that element is referenced in JavaScript.
Some Syntactic Sugar
I'll admit that the data-hook selectors aren't the prettiest. Let's fix that by extending jQuery with a custom function:
With that in place, we can rewrite the JavaScript:
[js] $.hook('nav-menu-toggle').on('click', function() { $.hook('nav-menu').toggle(); }); [/js]Continue reading %Effective Event Binding with jQuery%
When developing a website we often need to show some tabular data. We might need to show the next flights from Rome to London, the hotels available in a selected date range, or the last books published by a publisher like SitePoint. HTML provides an element for tabular data that, not surprisingly, is called table. The problem with it is that this element doesn't have an API that allows you to sort its rows based on a certain criteria, such as the price from low to high.
As a consequence of this lack of API, several JavaScript libraries have been developed and published to address this issue. In this article I'll introduce you to Tablesorter (actually a fork of it), a jQuery plugin for client-side table sorting.
What is Tablesorter?
Tablesorter by Rob Garrison is a fork of the original Tablesorter library developed by Christian Bach. Tablesorter is a simple jQuery plugin that provides dynamic row sorting based on the values of one or more given columns, and also offers the possibility to paginate tables created using the HTMLtable element. As I mentioned in the introduction, this plugin helps in filling the gap for these often needed features that aren't native in HTML. Being a client-side library, one of its main advantages is that our users don't need to reload the page they're visiting in order to sort the data. Besides, client-side sorting is often very fast unless there is a very large amount of data to sort.
What you'll love about this library is its simplicity. In its most basic case you have to include the library and then call a method, called tablesorter(), to provide the possibility to sort the data of a table. Finally, this plugin has extensive documentation that will help you in handling most of the situations you may encounter in your projects.
Now that you know what this plugin is all about, let's see how you can use it in your website.
Getting Started with Tablesorter
To use Tablesorter you have to download it and include it in the pages where you intend to use it. You can obtain Tablesorter in a few different ways. The first is by visiting its GitHub repository, while the second is through the following Bower command.bower install jquery.tablesortertablesorter to all the tables you want to use with the plugin. This is needed for styling purposes only but it's something you really want to do, otherwise the theme won't be applied. Although the plugin still works, your users won't have any clue about the added features.
Adding the tablesorter Class
There are two ways in which you can add the class to the tables of interest. The first, and simpler, is to manually add the class name in the HTML source. But what if you can't access or modify the HTML source? In this case you can employ JavaScript to dynamically add it. Let's say that you want to allow your users to sort the data of every table in the page. To do so, you can write code like the following and place it at the bottom of the page:
[js]
var tables = document.getElementsByTagName('table');
for (var i = 0; i < tables.length; i++) {
tables[i].className += ' tablesorter';
}
[/js]
This gives you the widest browser compatibility possible. However, if you only need to support modern browsers, you can take advantage of the classList API and other methods to retrieve DOM elements like queryselectorall().
Using jQuery, the previous code can be shortened to:
[js]
$('table').addClass('tablesorter');
[/js]
At this point we can call the method tablesorter() to expose the sorting functionality. A minimal example use of the plugin is shown below:
[js]
$('table').tablesorter();
[/js]Continue reading %Sorting Tables with Tablesorter%