Uniform - Sexy forms with jQuery Events Attach a handler to an event for the elements. Bind an event handler to the “blur” JavaScript event, or trigger that event on an element. Bind an event handler to the “change” JavaScript event, or trigger that event on an element. Bind an event handler to the “click” JavaScript event, or trigger that event on an element. Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element. Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements. Remove event handlers previously attached using .live() from the elements. Bind an event handler to the “error” JavaScript event. The current DOM element within the event bubbling phase. An optional object of data passed to an event method when the current executing handler is bound. The element where the currently-called jQuery event handler was attached. Returns whether event.preventDefault() was ever called on this event object.
80 AJAX-Solutions For Professional Coding Advertisement Web-developers can create amazing web-applications with AJAX. Stikkit1, Netvibes2, GMail3 and dozens of further web-projects offer a new level of interactivity we’ve used to give up the idea of. Modern web-applications can be designed with enhanced user interfaces and functionalities, which used to be the privelege of professional desktop-applications. AJAX makes it possible to create more interactive, more responsive and more flexible web-solutions. Asynchronous JavaScript and XML isn’t a new programming language, as it is often mistakingly called. In this article we’d like to present a list of over 90 useful AJAX-based techniques you should always have ready to hand developing AJAX-based web-applications. You may also want to take a look at the article 60 More Ajax and Javascript Solutions For Professional Coding9. AJAX Auto Completer 1. 2. 3. 4. 5. AJAX Instant Edit 6. 7. 8. AJAX Menus, Tabs 9. 14 Tab-Based Interface Techniques18 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20.
Object Oriented Programming in JavaScript Introduction The first version of this paper, written in 2003, had several shortcomings, not the least of which was that the techniques described were specific to Internet Explorer. I've updated and improved on the original, to document the current state of the art, especially in light of the extensive interest in AJAX technology and the increasing adoption of the FireFox browser. All the examples presented here will follow the ECMA language standards and can be applied to Internet Explorer, FireFox, and ActionScript (in Macromedia Flash). While early adopters of JavaScript used it as a simple scripting engine to create dynamic web pages, modern web designers have come to use more sophisticated object oriented techniques in building their code. I will present here, both the common paradigms used in object oriented JavaScript programming, and also suggest some helper functions that you can use in your code to streamline the process. Object Oriented Programming Goals Simple Objects References
Prototypal Inheritance Douglas Crockford www.crockford.com Five years ago I wrote Classical Inheritance in JavaScript (Chinese Italian Japanese). It showed that JavaScript is a class-free, prototypal language, and that it has sufficient expressive power to simulate a classical system. My journey was circuitous because JavaScript itself is conflicted about its prototypal nature. new () produces a new object that inherits from .prototype This indirection was intended to make the language seem more familiar to classically trained programmers, but failed to do that, as we can see from the very low opinion Java programmers have of JavaScript. Fortunately, it is easy to create an operator that implements true prototypal inheritance. function object(o) { function F() {} F.prototype = o; return new F(); } The object function untangles JavaScript's constructor pattern, achieving true prototypal inheritance. So instead of creating classes, you make prototype objects, and then use the object function to make new instances.
An Introduction to YUI With jQuery dominating the JavaScript framework landscape, many newcomers aren't exposed to other JavaScript frameworks. The truth is that there are a plethora of excellent JavaScript frameworks available, like MooTools, Prototype, Ext JS, and...YUI! While not as well known as some of the other libraries, YUI provides a wealth of tools for the web developer. Today, we're going to take a quick tour of some of its features. What is YUI? YUI (short for Yahoo User Interface and pronounced Y-U-I) is an open source JavaScript and CSS library developed primarily by Yahoo.com. There are currently two supported versions of YUI. Why YUI? So you may be wondering, why should I even consider learning another JavaScript framework? Ok, now that you've heard a little about YUI, let's start looking at some code! Including the Library YUI allows for a lot of flexibility when it comes to loading the library; let's look at a couple ways you can do it. Method 1: YUI 3 Seed File Method 2: YUI 3 Configurator Events
Javascript/CSS Compression As some of you may know, I am currently working on a content management system. Although I am not able to share all of the code – it is proprietary after all – I already made one debugging tool public. This tool can be used to test some common techniques which decreases the bandwidth generated by feed consumers. Today I am going to make a second tool public – including source code. It is a method to decrease the loading time of a page by combining all the different css or javascript files and compress them. About six months ago I noticed the pages generated by the content management system were in itself very clean and small, but that these pages still took a long time to load for new visitors. The solution turned out the be simple, combine all the different files into a single large file and compress that file using gzip. The idea is that you have one directory for css files and one directory for javascript files on your server. But there is more. Configurating this script is easy.
Online javascript beautifier Tutorials « Jquery Labs Archive for "Tutorials" Loading ... Facebox is a lightweight Facebook-style Lightbox that can display images, divs, and even entirely remote pages (via AJAX) inline on a page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype. Description A simple horizontal accordion plug-in for jQuery. Learn how to create a thumbnail photo gallery, where clicking a button reveals the entire photo and more information about that photo. This JavaScript code can be used to convert ordinary HTML tables into scrollable ones. Description If you love the Coda-Slider plug-in for jQuery, then you will find this plug-in very useful for displaying lots of content in a small area. Description A This tutorial explains how to use a slider to control the text size of an article on a page. Description With some custom JavaScript and jQuery magic you can create some interesting widgets.
15+ jQuery Popup Modal Dialog Plugins and Tutorials jQuery Popup Modal Dialog Windows Modal dialog windows are a great way to show quick information to your users, but to also alert them of errors, warnings, prompts for information and more. When you bring jQuery into the mix, you know you’re going to end up with a slick dialog that really makes the application or website come alive. The following is a list of 15+ jQuery Popup Modal Dialog Plugins and Tutorials. There are a couple towards the bottom that you’ll want to pay attention to. On one the original is in Italian, but I’ve included a link to an English translation. Let the fun begin! jqModal qModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. NyroModal Modal popup windows provide a quick way to show data without reloading the entire page. Simple jQuery Modal Window Tutorial In this tutorial, I’m going to share how to create a simple modal window with jQuery. Rating: 7.7/10 (1255 votes cast)