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. Documentation Complete documentation can be found on this page. Browser support This plugin has been tested and is known to work in the following browsers Firefox 2.0+ Safari 3.1.1+ Opera 9+ Internet Explorer 6.0+ Demonstration Demo Page Download Download Source Code 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. Uniform - Sexy forms with jQuery. 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. It should be noted that the current design of the JavaScript language, did not fully anticipate or fully implement an object oriented system.
Object Oriented Programming Goals Simple Objects Defining a Class - Object Constructors Prototypes Explained. JSON. 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.
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. jQuery UI Dialog The jQuery UI framework offers up a functional Dialog widget that allows resizing and also the ability to display forms. Tutorials:Getting Started with jQuery. 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. And it’s the first step towards rich internet applications of the future. Asynchronous JavaScript and XML isn’t a new programming language, as it is often mistakingly called. Basically, AJAX is a set of XHTML, CSS, DOM, XMLHttpRequest and XML, put together and used together for the same purpose – to improve the user-server-interaction.
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. AJAX Auto Completer 1. 2. 3. 4. 5. Online javascript beautifier. 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. 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. 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 programming style has evolved since then, as any good programmer's should. I have learned to fully embrace prototypalism, and have liberated myself from the confines of the classical model. 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(); } if (typeof Object.create !