jquery4u.com - Archives (juillet 2014)
1 jQuery Fan Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets.
There are plenty of ways to allow users to draw a signature in a browser window, many involving clever jQuery plugins. Everything is going digital and this is the future we must all look forward to. Here are the best digital signature plugins I've found. 1. jSignature A jQuery that simplifies creation of a signature capture field in a browser window, allowing a user to draw a signature using mouse, pen, or finger. Check out a demo. 2. Signature Pad A jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration. Check out a demo.
Continue reading %4 jQuery Digital Signature Plugins%
jQuery is a lovely library, and for many years now it has changed the way thousands of developers approached their projects. When jQuery was created, CSS wasn't able to create complex animations, leaving JavaScript as the way to go. jQuery helped a lot with animations thanks to the several methods created for this purpose. Although it comes with a few simple animations (fadeIn(), hide(), slideDown(), and so on), to keep its weight low, the library provides a very flexible method called animate(), which allows us to create any animation we desire. This method is the topic of this article.
jQuery's animate() is a wrapper method, meaning that it operates on a set of previously selected DOM elements, wrapped by jQuery. This method allows you to apply your own custom animation effects to the elements in the set. To do that, we have to provide a set of CSS style properties and values that those properties will reach at the end of the animation. The intermediate values that the style achieves during the effect (automatically handled by the animation engine) are determined by the duration of the effect and the easing function, two options we'll discuss soon.
The list of CSS style properties that can be animated is limited to those that accept numeric values. The value can be an absolute value (like 200), or a relative value from the starting point. In the case of an absolute value, jQuery assumes pixels as the default unit. We can also specify other units like em, rem, or percentages. To specify relative values, we have to prefix it with += or -= to indicate relative target values in the positive or negative direction, respectively.
Now that we know a little about animate(), it's time to look at its signatures and its parameters.
Signatures and Parameters
This method comes in two main forms, and most of its parameters are optional (denoted using the usual square brackets):animate(properties[, duration][, easing][, callback])animate(properties[, options])
properties(Object): A hash containing the values that should be reached at the end of the animation.duration(Number|String): The duration of the effect in milliseconds or one of the predefined strings: "slow" (600ms), "normal" (400ms), or "fast" (200ms). The default is "normal".easing(String): The easing function name to use when performing the transition. The default value is "swing".callback(Function): A function to execute when the animation is completed for each animated element.-
options(Object): A hash containing a set of options to pass to the method. The options available are the followings:always(Function): A function called when the animation completes or stops without completing.complete(Function): A function executed when the animation is completed.done(Function): A function called when the animation completes.duration(String|Number): Same as previously described.easing(String): Same as previously described.fail(Function): A function executed when the animation fails.progress(Function): A function run after each step of the animation. The function is called only once per animated element.queue(Boolean): If the animation has to be placed in the effects queue (more on this in a few moments). The default value istrue.specialEasing(Object): A hash of one or more CSS properties whose values are easing functions.start(Function): A function executed when the animation begins.step(Function): A function to invoke for each animated property of each animated element.
queue option allows us to run animations in sequence when it's set to true, or in parallel when set to false. That's quite a lot of power in our hands that we can use as we like.
In the remainder of this article, we'll demonstrate some of these arguments in action to give you a taste of what's possible with animate().
Example Uses
In this section we'll build some demos to unleash the power ofanimate(). Keep in mind that this method isn't a good fit for very, very complex animations because of issues concerning the performance and the smoothness of the animations.
Running a Single Animation
Running a single animation is pretty easy, and involves just one call of the method. For example, we may want to move an element from one side of a box to the other. To illustrate this animation we'll set up twodiv elements, one inside the other. We'll style them so that the inner div has a red background. The code to complete this is shown below.Continue reading %A Guide to the jQuery animate() Method%
High-resolution displays are becoming more and more common, with all kinds of devices achieving the so-called "Retina display" level. Your sites and apps need to look good at these screen resolutions, so here are some plugins that can help. 1. retina.js An open source script that makes it easy to serve high-resolution images to devices with retina displays.
Continue reading %6 of the Best Retina Display jQuery Plugins & Demos%
Getting started After last week’s Web Starter Kit from Google, a nice intro came out showing how web technologies work together. On SitePoint we have a good look at the time element, and we also a comprehensive look at HTML5′s track element to add further detail to your videos. Design a better experience Web design […]
Continue reading %On Our Radar: Android’s Material, Better Design, and Refactoring%
Whether you’re keen on using jQuery to display photos, chats, Instagram feeds, or lists, this grab-bag of recent jQuery plugins has something for everyone. 1. jQuery googleslides A jQuery plugin to display your Google Photos. 2. jquery.JamCity jquery.JamCity v. 2.0.0 3. ChatJS A full-featured, lightweight, Facebook style jQuery plugin for instant messaging. ChatJS also comes […]
Continue reading %jQuery Grab-Bag: 10 New Plugins%
Google Analytics provides an overwhelming quantity of information. If you do nothing but add the tracking script to your pages, you'll be faced with an endless stream of data and reports about user activity on your site. However, while Analytics shows exit pages it won't tell you which links users clicked to leave your site. In this article we'll discover how to add outbound link tracking.
Does Google Record Outbound Links?
Probably. If you're linking from one site using Analytics to another using Analytics Google could record that relationship. Unfortunately, reports would be misleading if one or more outbound sites didn't use Analytics. Google has additional means of collecting data: you can gather a lot of statistics when you own the top browser and search engine! But we're then moving away from on-site Analytics into more dubious territory; Google wouldn't necessarily want to share that data.Continue reading %How to Track Outbound Links in Google Analytics%