jquery4u.com - Archives (janvier 2015)
1 jQuery Fan Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets.
CSS Filters are a powerful tool to manipulate images using just CSS. Once implemented in all browsers, you will be able to apply effects to images without any need for external software.
CSS filters constitute a huge topic in themselves and I am not going to discuss all the available filters here. What I am going to talk about is how you can use multiple filters to produce a complex effect – and make your own image editor.
If you want to dig deeper, feel free to check out Filters on MDN or Understanding CSS Filter Effects, on HTML5 Rocks, both of which cover the general topic of filters in more detail.
CSS Filter Syntax
To write a filter effect in your CSS, just use filter: and name of the filter (like grayscale, blur, etc.).
Here’s how you would apply a 90% grayscale filter to an element:
And in the case of webkit browsers, you’ll need a prefix:
[code language="css"] .example { -webkit-filter: grayscale(90%); } [/code]The value of a filter’s property generally falls between 0 and 1, but there are a few exceptions. For example, the blur property uses pixel units and can be any whole number. Also, the hue-rotate filter value is a whole number with a ‘deg’ unit.
Combining Multiple Filters
You may combine any number of functions to manipulate the rendering. However, if you want to apply more than one filter effect, you can do so by space separating them in a single declaration. Here’s how you’d combine grayscale and blur:
Continue reading %Build a Simple Image Editor with CSS Filters and jQuery%
In a project I developed a few years ago there was a search form made of a main field and then many other fields to refine the search. In that project a user typically needed to perform the same search multiple times with just one or two fields changed. Filling the form again and again was a pain so we decided to help the users in quickly achieving their goal. In this article I'll show you how to recreate the same improvement using jQuery, jQuery.deserialize, and the Web Storage API.
The Requirements
To improve the form I mentioned in the introduction, we decided to show a list of previously performed searches, up to 20. The searches are stored into the browser using the Web Storage API. If you have a login system in place, you may want to modify the demo so that the searches are stored in a database. In my case this wasn't an option as there wasn't a login system. Each item of the list is made of text representing the value the user wrote in the main field, and a sublist showing the name of the field and the value(s) written or selected (in case of checkboxes and radio buttons). When the user clicks one of these searches, the form's fields are automatically filled with the values of that search. Doing so, if the user needs to perform the same research he/she has nothing to do but click the Submit button; otherwise the user can change the fields needed and then perform the search. This small improvement saved a lot of time for the users of that project and was much appreciated. The final result of this article is shown below and also available as a JSFiddle:The Markup
The first step is to create the form to enhance. If you'll use this approach in a project you are working on, you'll have your own with its own specific fields, but for the sake of the example here I'll create a dummy one containing a different type for each field. For instance, I'll use thesearch, text, email, checkbox, radioand date type. This way you can see how this method works with different types.
There is nothing more to say about the form, so here is the code that we'll employ:
[html]
[/html]Continue reading %Auto-filling Forms with jQuery and the Web Storage API%
Not so long ago, I built a Chrome extension that lets users export lists from Trello. You can see the short series on how that was done here. That extension had some room left for improvements, though.
For example, checking whether the board has changed - something that’s less than simple to do considering all of Trello is ajaxy and the URL changes via undetectable pushstate. We also want it to support having multiple Trello tabs open, so just checking the URL wouldn’t do. It would also be good if we could somehow make sure slow page loads don’t affect the “page ready” state - in the original extension, due to Trello’s “over-ajaxness”, the page was “ready” before the content loaded - even the board’s area was loaded via ajax and as such, events weren’t easy to attach to the core DOM elements of Trello’s UI.
For that purpose, and to make my life developing extensions for Trello easier in the future, I decided to build a TrelloUI library which will take care of this particular issue for me. The TrelloUI library will be extended with other functionality in the future, but for now, let’s build our “ready checker”.
Continue reading %Custom Events and Ajax Friendly Page-ready Checks%
In the previous part, we built the basics of our extension, implementing authentication through a custom Foundation-powered settings screen and using Trello’s JavaScript client library. In this part, we’ll finish our extension by adding the exporting logic and UI.
Messaging
When we authenticate with Trello on the settings screen, the Trello token is saved in local storage. However, the settings page is its own page and, effectively, its own environment - ergo, neither the extension’s background page nor the extension’s content scripts have access to it. This is where we need to use message passing.
The chrome.extension.sendMessage API is used to send messages to and from background pages. In our case, we’ll be using it to send the token from the settings page to our background page. Since our settings adventure is done as soon as this is completed, we might as well automatically close the tab, to improve user friendliness.
Continue reading %How To Build a Trello Chrome Extension – Exporting Lists%
At SitePoint, we use Trello extensively. Sure, it has its quirks and could use an improvement or two in various areas, but for the most part, it’s revolutionized the collaborative experience of not only staff, but also authors and their editors.
I recently found myself needing to export card titles from a specific list for a non member. By default, Trello only supports full board exports to JSON and that’s something that crashes my tab on a board of over 100 members with hundreds of cards. There’s a small army of Trello extensions in the store, and yet curiously, none that export lists in any manner.
Let’s make a Chrome extension that can do this for us! If you’re in a rush and just want to see the end result, see the Github repo for the final version of this tutorial’s code.
Building a Chrome Extension
I figured the best approach would be an extension because a separate application doing only these exports might be too much. Besides, Trello has a nifty API which we can use to get everything we need. I also figured it would be a nice transition back into extension development, something I hadn’t done for a while.
Continue reading %How To Build a Trello Chrome Extension – API Authentication%