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
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.
tabindexattribute 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
noneis 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.
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.
Let's start with a basic example. Here's the HTML for a nav menu that can be toggled on or off:[html] [/html]
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 (
We just need to update the jQuery selectors to use
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
I'll admit that the
data-hook selectors aren't the prettiest. Let's fix that by extending jQuery with a custom function:
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.
tableelement. 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.
bower install jquery.tablesorter
tablesorterto 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.
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%