10 jQuery Scripts To Optimize Forms Last week I posted HTML5 Forms Styled With CSS3. There you can find useful links on how to style your forms and add effects with HTML5 and CSS3. I mentioned that beside for old browser fall back you won’t need Javascript. But if you want to optimize your forms and add more options, Javascript is still needed. We are talking about less common options(not standard in every form) such as adding extra fields, password validator, file upload, etc. I have chosen the more common optimization scripts and almost all are simple ones making it easier to implement in your design or to customize. Turn any webform into a powerful wizard with jQuery Collapser plug-in Password Validation Give Your Characters a NobleCount Submit A Form Without Page Refresh Simple Chained Combobox Ajax Upload; A file upload script with progress-bar, drag-and-drop Create a Progress Bar With Javascript Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework jQuery Add/Remove Input Fields
A Step-by-Step Tutorial of Building a Simple Peer-to-Peer WebSocket App – Part 1 | The Zinger This tutorial series walks you through the simple steps of building an HTML5 WebSocket app, demonstrating the power of the publish/subscribe development pattern directly in JavaScript. Our sample is almost as simple as a Chat app, the “Hello World” app of the WebSocket world, but is a tad more visual and dynamic. After trying out the completed application, you can either jump in the code and play with it right away, or move on to Part 2 of this tutorial for a step-by-step guide. About the Environment This tutorial requires a WebSocket server. Getting Started Firstly, to understand how the tutorial environment in JSFiddle works, open up the completed demo in JSFiddle. Note: The sample code uses an HTML5 element, <input type=”range”> that is unfortunately not supported by every browser. JSFiddle provides a simple, integrated environment to edit the source of your web pages and apps. In the bottom right pane, you can interact with the completed app. Modify the name of the topic. Like this:
JavaScript : 3 fondamentaux Après quelques années à écrire dans un langage, on finit facilement par oublier les premières difficultés que l’on avait rencontrées. Et à force de faire de la veille, de l’autoformation et de parler entre experts dans des conférences, j’ai un peu quitté la réalité de la majorité des équipes Web. Maintenant que je suis consultant indépendant je retourne dans des équipes qui avaient autre chose à faire que de se demander si on a le droit de parler de classe en JavaScript, quelle est la bonne définition d’une closure, ou quelles sont les fonctionnalités de EcmaScript 5 qui auraient du rester dans Ecmascript.Next. J’avais déjà parlé sur ce blog de JavaScript et la programmation orienté objet pour les développeurs PHP, nous allons explorer ici les 3 notions fondamentales de JavaScript qui sont probablement les plus grosses sources de bugs, d’incompréhension et de frustration pour le développeur Web moyen. Le maître mot de ses concepteurs semble avoir été la versatilité. La théorie La pratique
jQuery 1.5 Released: What is new? As they promised, jQuery Team released a new version of jQuery today. It has come a long way from its initial version and has become one of the most used JavaScript frameworks in the world. I will try to tell you the exciting news in the new version. As the new version is released, the jQuery Team updated their jQuery 1.5 API Documentation which is very useful and handy. The biggest news is jQuery.sub() which allows a developer to override native jQuery methods without actually affecting the methods that other users would interact with – or even create encapsulated APIs for your plugins that avoid namespace collision. New jQuery AJAX The jQuery Team rewrote the whole jQuery AJAX module. Perhaps the largest change is that a call to jQuery.ajax (or jQuery.get, jQuery.post, etc.) now returns a jXHR object that provides consistency to the XMLHttpRequest object across platforms (and allows you to perform previously-impossible tasks like aborting JSONP requests). Prefilters Converters Transports
Skill Level Indicator by apovtx Welcome to Skill Level Indicator's GitHub Page. Skill Level Indicator is a javascript function that helps you create nice and highly customizable rounded skill indicators. It's usage is very simple. It only requires a browser that supports the html5 canvas element. See it in action: Usage After including the script in your page you only have to just call it with 1 mandatory argument and some optional changes you may want. To include it in your page you just need to have: and to create a skill indicator: And that's all! Options You can customize the output with many different options: ToDo There are many things that are in the ToDo list! Create the canvas element automatically (will be in JQuery plugin version)Change the font-family of the textFallback for browsers that don't support canvasCalculate the text size depending on the radius and name length (done)
Memory leak patterns in JavaScript JavaScript is a powerful scripting language used to add dynamic content to Web pages. It is especially beneficial for everyday tasks such as password validation and creating dynamic menu components. While JavaScript is easy to learn and write, it is prone to memory leaks in certain browsers. In this introductory article we explain what causes memory leaks in JavaScript, demonstrate some of the common memory leak patterns to watch out for, and show you how to work around them. Note that the article assumes you are familiar with using JavaScript and DOM elements to develop Web applications. Memory leaks in JavaScript JavaScript is a garbage collected language, meaning that memory is allocated to objects upon their creation and reclaimed by the browser when there are no more references to them. Internet Explorer and Mozilla Firefox are two browsers that use reference counting to handle memory for DOM objects. What's wrong with circular references? Listing 1. Another memory leak pattern
HTML5 Grayscale Image Hover Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I've put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo). Credits: thanks to Darcy Clarke (my Themify's partner) for the jQuery and Javascript code. View Demo HTML5 Grayscale The Purpose This demo is intented to show you how to make a grayscale/color image hover effect with HTML5 and jQuery. jQuery Code The jQuery code below will look for the target images and generate a grayscale version. How to use it To apply this to your site: include a copy of jquery.js paste the code as shown above set the target image (eg: .post-img, img, .gallery img, etc.) you may change the animation speed (ie. 1000 = 1 second) Compatibility It works with any browser that support HTML5 and Javascript such as Chrome, Safari, and Firefox. Credits
JavaScript reference JavaScript is a scripting language primarily used in Web applications. It allows authors to create dynamic HTML (DHTML) pages. The JavaScript language has three components: Core JavaScript is the base part of the JavaScript language that is supported on both the client and server side. Dottoro provides you a complete standard and browser specific Core and Client-side JavaScript reference with detailed descriptions, syntax, examples, browser support information, cross-browser solutions and much more. JavaScript is primarily used for event handling, form validation, DOM and style manipulation, browser detection, animation and more. Unfortunately, client side scripting has a drawback; sometimes different browsers support different language elements. Contents: External links:
Adding a JavaScript-based diff « Glen Smith Posted by Glen on Mar 17, 2011 in Grails, Groovy | 3 comments I’ve been on the hunt lately for some JavaScript based diffing routines.I’ve had a look at a few of them, and the one I’ve settled on is google-diff-match-patch which they use in the Grails wiki! (Thanks Peter Ledbrook for the pointer!) My particular need was around diffing a fairly complex “tree” structure. Here’s an example of the one of these control libraries (the Australian ISM) being diffed (notice the token changes I’ve hacked into the version on the right): What I really like about google-diff-match-patch is that the API is very simple, and comes in a single JS file with no dependencies. In my case, I wanted to diff the whole tree in html (since I can generated the tree itself from a nice re-usable Grails taglib). The library comes with a sample JavaScript “prettyHtml” diff which you can cut and paste and customise. Loving the new diff feature! Thanks to Neil Fraser for an awesome lib!