background preloader

Jumpstart Your jQuery Plugin Development

Jumpstart Your jQuery Plugin Development

.css Description: Set one or more CSS properties for the set of matched elements. As with the .prop() method, the .css() method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs. When a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. When using .css() as a setter, jQuery modifies the element's style property. As of jQuery 1.8, the .css() setter will automatically take care of prefixing the property name. As of jQuery 1.6, .css() accepts relative values similar to .animate(). As of jQuery 1.4, .css() allows us to pass a function as the property value: This example sets the widths of the matched elements to incrementally larger values. Note: If nothing is returned in the setter function (ie. function( index, style ){} ), or if undefined is returned, the current value is not changed. Demo:

The Ultimate Guide to Writing jQuery Plugins I have written a few articles about jQuery Plugin Development in the past which readers seem to have been interested in, but I have since then written many more plugins and have thus picked up a few more tips and tricks. I have therefore decided to put together this more comprehensive guide on jQuery Plugin Development. I also want to note the importance of knowing how to develop jQuery plugins well as I find myself building many little custom plugins for my sites making it much easier to maintain not to mention reuse in other projects. I have a nice jQuery Plugin Development Boilerplate on GitHub which I use as a starting point for all my plugins, I keep it updated with all the latest little tips and tricks I pick up along the way. Keep All Your Code in a ClosureThis is more of a general guideline for JavaScript development all together, but I still do see plugins and code out there that break this rule.

.animate Description: Perform a custom animation of a set of CSS properties. The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. Animation Properties and Values All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used). In addition to style properties, some non-style properties such as scrollTop and scrollLeft, as well as custom properties, can be animated. Shorthand CSS properties (e.g. font, background, border) are not fully supported. In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. Animated properties can also be relative. Duration Callback Functions Basic Usage Step Function Easing Per-property Easing Demo:

Script Junkie | jWorldmaps: The Anatomy of a jQuery Mapping Plugin Ever want to know how to write a jQuery plugin? For some of you, the answer may be yes, because learning anything new and cool is what drives you. For others, the answer may well be no, because learning in the abstract isn’t as important as solving the particular problem you’re facing today. In this article, I’m aiming to satisfy both groups by showing you how I solved a particular problem with my website code by creating a jQuery plugin of my own. Background One common desire for website creators/owners is a tool or tools that will help them measure the reach of their sites. What’s the Problem? Implementing Worldmaps isn’t terribly difficult, nor is showing the map of visitor locations. Well, in my case, I wasn’t satisfied to just use the standard 160 pixel wide thumbnail map. How I Was Doing It Right now, you may be thinking, “well that’s easy too, just use a little jQuery, or even just hand-write the JavaScript” and you’d be right…that’s exactly where I started. Why a Plugin?

Things you may not know about jQuery I was going to do a bit of a series, releasing a jQuery tip every day or week or something, but I think I’m a little too lazy to commit to something like that. So I’ve compiled them all into one post! I’ll probably add to the list at later dates so make sure to bookmark it! Do you have a tip nobody knows about? – Add it in the comments…

The Definitive Guide Bootstrap Need reasons to love Bootstrap? Look no further. By nerds, for nerds. Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web. Made for everyone. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!)

Javascript Territory - JSter Javascript Catalog API Reference - PouchDB Most of the PouchDB API is exposed as fun(arg, [options], [callback]) where both the options and the callback are optional. Callbacks use the function(err, result) idiom where the first argument will be undefined unless there is an error, and the second argument holds the result. Additionally, any method that only returns a single thing (e.g. db.get) also returns a promise. new PouchDB([name], [options]) This method creates a database or opens an existing one. Options options.name: You can omit the name argument and specify it via options instead. Notes: In IndexedDB and WebSQL, PouchDB will use _pouch_ to prefix the internal database names. Example Usage: var db = new PouchDB('dbname');// orvar db = new PouchDB(' Create a WebSQL-only Pouch (e.g. when using the SQLite Plugin for Cordova/PhoneGap): Create an in-memory Pouch (in Node): db.destroy([options], [callback]) Delete database. Notes: With a remote CouchDB on Node, options are passed to request. Using db.put()

Access Control for Cross-Site Requests Abstract This document defines a mechanism to enable client-side cross-site requests. Specifications that want to enable cross-site requests in an API they define can use the algorithms defined by this specification. If such an API is used on resources, a resource on can opt in using the mechanism described by this specification (e.g., specifying Access-Control-Allow-Origin: as response header), which would allow that resource to be fetched cross-site from Status of this Document This section describes the status of this document at the time of its publication. This is the 12 September 2008 Working Draft of the "Access Control for Cross-Site Requests" document. Please send comments to the WebApps Working Group's public mailing list public-webapps@w3.org with [access-control] at the start of the subject line. This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. 1.

Dive Into HTML5

Related: