background preloader

Learning jQuery - Tips, Techniques, Tutorials

Learning jQuery - Tips, Techniques, Tutorials
Related:  JQUERY

convert svg into raphaël » atirip and have really nice VML rendering in IE as a bonus. Why? One day I thought that if I need to use SVG’s for my web layouts (and I do) the better way is to draw them with the tool I’m used to - Adobe Illustrator - and just convert them into Javascript. Parsing SVG I set up simple PHP XML parser with start and end tag handlers. UPDATE 22.09.2013 the code is now in Github Nothing difficult in converting. Modifying Raphaël UPDATE 22.09.2013 This is badly outdated now So far so good. And that’s a problem because Raphaël is written in way that you cannot extend or rewrite any of crucial pieces needed, in javascript no outside access for private variables and methods exist, so the only option is to fork and write your own version of Raphaël. Strokes Raphaël, has hardcoded (?!? Fill-rule Raphaël, does not support fill-rule attribute. \"fill-rule\": \"nonzero\" and case \"fill-rule\": node[setAttribute](att, value); break; handler is needed in setFillAndStroke private function. viewBox Here’s how I did it.

annyang! Easily add speech recognition to your site Go ahead, try it… Say "Hello!" Annyang! Let's try something more interesting… Say "Show me cute kittens!" Say "Show me Arches National Park!" Now go wild. That's cool, but in the real world it's not all kittens and hello world. No problem, say "Show TPS report" How did you do that? Simple. What about more complicated commands? annyang understands commands with named variables, splats, and optional words. Use named variables for one word arguments in your command. Use splats to capture multi-word text at the end of your command (greedy). Use optional words or phrases to define a part of the command as optional. What about browser support? annyang plays nicely with all browsers, progressively enhancing browsers that support SpeechRecognition, while leaving users with older browsers unaffected. It looks like your browser doesn't support speech recognition. Please visit in a desktop browser like Chrome.

jQuery UI Sharrre - A plugin for sharing buttons Salvattore — A jQuery Masonry alternative with CSS-driven configuration jQuery 50 jQuery Function Demos for Aspiring Web Developers - Smashing Coding Every aspiring Web developer should know about the power of JavaScript and how it can be used to enhance the ways in which people see and interact with Web pages. Fortunately, to help us be more productive, we can use the power of JavaScript libraries, and in this article we will take a good look at jQuery in action. What Is jQuery? Link In a nutshell, jQuery is a leading JavaScript library that can perform wonders on your Web pages and make your Web development life much easier and more enjoyable. With the rise in popularity of jQuery since its arrival in 2006, over an estimated 24 million websites (50% of them being the 10,000 most visited websites) currently reap the benefits, and as Google Trends suggests, it’s the most popular JavaScript library. Thousands of Web developers worldwide use jQuery to innovate on their websites and stay up to date on trends. jQuery And CSS Link Styles play a big part in the look and feel of any website, and jQuery can help us change them dynamically.

jQuery Plugin – Increment ← jQuery Increment Plugin Inspired by this article on, I decided to release a plugin dedicated solely to quick keyboard-based manipulation of numeric values in HTML input fields. It’s called Increment. Simply assign the set of inputs you wish to attach this behavior to:$('input.hours').increment(); And let your fingers do the walking: use the up arrow to increment values, down arrow to decrement. Hold down shift for greater increments (maxIncrement), Ctrl/Cmd for smaller ones (minIncrement). Use Cases: Time sheet applications (how I came to develop this), Order / Requisition forms, anywhere multiple numeric form inputs are needed. v0.6 — Added support for mousewheel plugin, small Closure Compiler bugfix v0.5 — Initial release Increment has been tested on: Firefox 3.6 / WinChrome 4.0 / WinIE 8 / WinSafari 4 / MacFirefox 3.6 / MacChrome 5 Beta / Mac Download Increment Now New v0.6 with mousewheel plugin support Your feedback is appreciated.

Redactor WYSIWYG editor on jQuery by James Fenimore Cooper Winding its way among countless islands, and imbedded in mountains, the "holy lake" extended a dozen leagues still further to the south. With the high plain that there interposed itself to the further passage of the water, commenced a portage of as many miles, which conducted the adventurer to the banks of the Hudson, at a point where, with the usual obstructions of the rapids, or rifts, as they were then termed in the language of the country, the river became navigable to the tide.​ "Come," he said, with a good-humored smile; "the buck that will take to the water must be headed, and not followed." The route taken by Hawkeye lay across those sandy plains, relived by occasional valleys and swells of land, which had been traversed by their party on the morning of the same day, with the baffled Magua for their guide.

Apprendre et comprendre jQuery – 1/3 • Tutoriels jQuery Tutoriels jQuery Introduction rapide et en douceur à l’utilisation d’une des bibliothèques JS à la mode. Ou comment ajouter une couche d’interactions simplement et proprement à vos pages. NB : ce billet sera divisé en trois parties. Publié il y a déjà trop longtemps… Introduction jQuery est une bibliothèque JS développée principalement par John Resig. Par bibliothèque on entend donc un ensemble cohérent de fonctions permettant de s’affranchir des tâches rébarbatives et répétitives de façon uniforme sur les navigateurs les plus courants. Elle est sous licence GPL et MIT, et donc complètement réutilisable sur des travaux professionnels. Les navigateurs supportés sont : Firefox 1.5+Internet Explorer 6+Safari 2.0.2+Opera 9+ La bibliothèque est utilisée par exemple sur des sites comme : DellGoogle CodeDiggNBCAmazonMozillaWordPressDrupalSPIPThe Zend Frameworketc Par ailleurs cette bibliothèque est compatible (elle n’entre pas en conflit) avec d’autres. Pré-requis Bases Appel <! Compression Une fonction etc.

jQuery++ I am a MIT licensed collection of extremely useful DOM helpers and special events for jQuery 1.8 and later. I’m not a UI project like jQuery UI or jQuery Tools. Instead, I’m all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, I am jQuery’s bald-spot covering toupee. Select the plugins you want and click “Download” for a customized, unminified JavaScript file: Learn more about how I can be useful to you. Get jQuery++ There are several ways to get and setup jQuery++: using the download builder using individual files using Steal using AMD Using the download builder Simply select the files you want and click “Download”. Using AMD The files to load the jQuery++ plugins with an AMD module loader like RequireJS, are located in the amd/ folder of the full download. define(['jquery', 'jquerypp/dimensions', 'jquerypp/event/resize'], function($) { $('#element').outerWidth(500).resize();}); Annotated source Annotated source

You Might Not Need jQuery Multiple Area Charts with D3.js In this tutorial we will introduce some basics of D3.js and create an infographic with multiple area charts along with a context tool to zoom and pan the data. View demo Download source The D3.js website describes itself as “a JavaScript library for manipulating documents based on data.” The reason I focus on D3 is because it is one of the most robust frameworks available, while also remaining flexible and web standard agnostic. So what kind of visualizations can you create with D3? Since area charts are pretty common, it’s a great place to start. The .CSV I downloaded from Gapminder contains electricity consumption per capita from 1960. With this data we will create 5 area charts. First thing we need to do is to set up an HTML page. The majority of the code will now be in JavaScript, which can be in an external file or directly on the page. Next we will want to add an SVG tag to the page. In this example, I’m going to recommend using SVG for two reasons: