Image Desaturate jQuery plugin Latest version: 0.7 (changelog) Stable version: 0.6 (changelog) Prev. version: 0.5.2 Example jQuery plugin page Contact: miksir@maker.ru This plugin used for replace image by gray version. harthur/brain Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options. Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. Note: on single selects, the first element is assumed to be selected by the browser. No Results Text Support Setting the "No results" search text is as easy as passing an option when you create Chosen: Limit Selected Options in Multiselect You can easily limit how many options the user can select: Right-to-Left Support
Backbone.js Training - A Multi-Day, Hands-On, Training Class Notice Of Course Discontinuation Please note that as of January 2013 I am no longer offering my Backbone training class on a regular basis. I have exited the consulting world in favor of a full time position working with Kendo UI as a Developer Advocate. While I will continue to be a part of the Backbone community with my new position, offering a private, on-site training class is not something I will be able to do right now. I may bring this back out at some point in the future, but I don't know when (if at all). Backbone.js Resources There are many resources available for both learning Backbone.js and for asking questions when you run into issues. My Own Resources Documents And User Groups Blogs Code / Sample Projects Application Structure / Boilerplates Books Backbone.js Fundamentals (online book) Addy Osmani is writing a free e-book discussing the fundamentals of Backbone, with a collaborative approach through the use of Github. Backbone.js + CoffeeScript (e-book) Backbone Fundamentals
jQuery.fracs · larsjung.de To use the core lib just include jquery.fracs-0.12.0.js. The outline feature can be found in jquery.outline-0.12.0.js and depends on the core lib (you'll need to include both files). Fractions To retrieve the fractions of an element use: var fracs = $(selector).fracs(); this will return an object of type Fractions. Or bind a callback function: function callback(fracs: Fractions, previousFracs: Fractions) { ... // context variable *this* will be the corresponding HTMLElement ...}; $(selector).fracs(callback); The callback function will be called whenever fracs and previousFracs are unequal. $(selector).fracs('check'); Outline Add a canvas to your document (use a fixed position to keep it in viewport)
Learning JavaScript Design Patterns Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language. One reason for this is that they help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we're attempting to solve. Design patterns also provide us a common vocabulary to describe solutions. This can be significantly simpler than describing syntax and semantics when we're attempting to convey a way of structuring a solution in code form to others. In this book we will explore applying both classical and modern design patterns to the JavaScript programming language. Target Audience This book is targeted at professional developers wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language. Acknowledgments Credits Reading We already use patterns everyday
$.geo docs $.geo is an open-source, geospatial mapping jQuery plugin from Applied Geographics developed with the intention of making spatial web mapping significantly simpler than it may initially seem. We would like to point out the term "open-source" to explictly state that Google, Bing, MapQuest, Yahoo! & ESRI are generally free but not open. Please read the following sections for more information and examples, and thank you for considering us! Also, that the documentation comes first with this project and can be lightyears ahead of the code. docs This project takes pride in having easy-to-use, up-to-date documentation. examples Now that that's out of the way, here are some code examples! internals Lastly, short of looking through the source code you can read a bit about the internal design decisions we made in the following section.
Key Principles of Maintainable JavaScript JavaScript is a curious language. It's easy to write, but difficult to master. By the end of this article, hopefully, you'll transform your spaghetti code into a five-course meal, full of readable, maintainable yumminess! Why is it So Tough? The thing to remember, above all else when writing JS code, is that it's a dynamic language. This means there are a lot of ways to do things. The "hardness" of JavaScript is clearly evident when considering the following image: The teeny tiny book on the left is Douglas Crockford's MUST READ book, JavaScript: The Good Parts. While both of these books are excellent reads, The Good Parts illustrates that, although JavaScript has a LOT of stuff in it, the good parts can be summed up in a considerably shorter read. This, naturally, led to a lot of sleepless nights for web developers. You can read an article on the history of JavaScript here, but the gist of it is that Brandon Eich, in 1995, was hired by Netscape to design a language. Making it Better
jVectorMap Unit Testing Backbone.js Apps With QUnit And SinonJS This article will be appearing in my forthcoming book on Backbone.js and continues the section on unit testing. We previously looked at Jasmine and will now look at QUnit and SinonJS. QUnit is a powerful JavaScript test suite written by jQuery team member Jörn Zaefferer and used by many large open-source projects (such as jQuery and Backbone.js) to test their code. It’s both capable of testing standard JavaScript code in the browser as well as code on the server-side (where environments supported include Rhino, V8 and SpiderMonkey). Quite a few Backbone.js contributors feel that QUnit is a better introductory framework for testing if you don’t wish to start off with Jasmine and BDD right away. My personal recommendation is that it’s worth comparing both frameworks and opting for the solution that you feel the most comfortable with. Getting Setup Luckily, getting QUnit setup is a fairly straight-forward process that will take less than 5 minutes. Sample HTML with QUnit-compatible markup: App
jQuery.ScrollTo Notice I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article. Introduction An article about animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself. How to specify what to scroll ? Simple, all the matched elements will be scrolled, for example: $('div.pane').scrollTo(); If you need to scroll the window (screen), then use: $.scrollTo(); How to specify where ? Settings Getting the real scrollable element out of a node In order to find the real element whose attributes will be animated, you need to call $.fn. $(window). Manually finding the scrolling limit ScrollTo always had an internal function that calculates the scrolling limit for both axes. Overloading This plugin accepts the arguments in two ways, like $.animate(). $().scrollTo( , , ); $().scrollTo( , ); In this second case, you can specify the duration in the hash.
Working with Dates Tutorial by Matt Doyle | Level: Intermediate | Published on 19 November 2002 Categories: This tutorial describes JavaScript's Date object, and shows how you can use it to manipulate dates. Also included is a simple script to display today's date on your web page. JavaScript's Date object makes it easy to handle dates in JavaScript. In this tutorial we'll take a look at using the Date object, and end with a simple example script that displays the current date on the web page! The Date object The Date class is used to store and retrieve dates in JavaScript. new Date ( ) This creates a new Date object with the value of the current date and time on the browser PC. x = new Date ( ); This creates a new Date object with the date value represented by the number of milliseconds since midnight on Jan 1, 1970. x = new Date ( 86400000 ); creates a new date object x with a date value of midnight, Jan 2, 1970. For example: x = new Date ( "January 6, 1972" ); x = new Date ( "January 6, 1972 16:05:00" );
Essential jQuery Plugin Patterns - Smashing Coding Advertisement I occasionally write about implementing design patterns1 in JavaScript. They’re an excellent way of building upon proven approaches to solving common development problems, and I think there’s a lot of benefit to using them. Plugin development has evolved over the past few years. Some developers may wish to use the jQuery UI widget factory3; it’s great for complex, flexible UI components. I began to think about plugin patterns after noticing a number of efforts to create a one-size-fits-all jQuery plugin boilerplate. Let’s assume that you’ve tried your hand at writing your own jQuery plugins at some point and you’re comfortable putting together something that works. My advice won’t provide solutions to every possible pattern, but it will cover popular patterns that developers use in the wild. Note: This post is targeted at intermediate to advanced developers. Patterns $.fn.myPluginName = function() { }; (function( $ ){ $.fn.myPluginName = function() { };})( jQuery );