JavaScript language a- z cheat sheet Here is an A - Z list of some Javascript idioms and patterns. The idea is to convey in simple terms some features of the actual Javascript language (rather than how it can interact with DOM). Enjoy... Array Literals An array literal can be defined using a comma separated list in square brackets. Arrays in javascript have a wide selection methods including push() and pop(). In the example above, the chanceCivilisationCallback callback function is invoked by peakOil. Configuration Object Instead of passing around a bunch of related properties... Use a configuration object The use of a configuration object makes it makes it easier to write clean APIs that don't need to take a huge long list of parameters. Note: The closure is the object literal returned from annoymous function. Constructor Functions (Built in) There are no classes in Javascript but there are construtor functions which use the new keyword syntax similar to the class based object creation in Java or other languages. Then...
jQuery Sample - Free Source Code, Examples, Tutorials, and Demos for jQuery, AJAX, and jQuery UI Basic AJAX Techniques In this post, I'll be explaining the basics of making AJAX requests using jQuery, JavaScript and HTML. A quick summary of what AJAX is: the web browser sends an HTTP request to the server for a specified file or web service; the server then, generally, sends back some data or a file. Now, lets review the simpler AJAX commands jQuery provides. The simplest version of .load(url) - this method is distinct from the other AJAX methods in that it is called on a DOM element, rather than being a global function. The response from the server is then injected into the provided DOM element. Generating a Table with AJAX and XML jQuery allows you to navigate XML using the same DOM functions used for traversing HTML documents. jQuery Effects: Slide, Fade, and Animate jQuery comes with a handful of excellent CSS-based animation effects. Capturing and Programming for Mouse Events Basic DOM Traversal with jQuery The fundamental structure of the DOM is that of a tree. HTML Code
40 Exceptional jQuery Interface Techniques and Tutorials With the advent of JavaScript/web application libraries and frameworks, it’s become much easier to build interactive components for a site. For the folks that are unfamiliar with jQuery – it’s a popular, high-performance and compact JavaScript library/framework. jQuery will allow you to reduce the amount of code you have to write for dealing with browser quirks, memory leaks, and repetitive code by providing you with a set of useful and highly-optimized and thoroughly-tested functions and methods. In this article, we explore the strengths of jQuery in letting web developers create impressive client-side-based user interface components. Modal Windows 1. In this jQuery tutorial, you’ll discover a technique for creating a slick modal window that appears when the user clicks on the triggering element (in this case, form submit input, but you can easily modify it into other HTML elements like <a>). Live Demo 2. Live Demo 3. Live Demo Tool Tips 4. Live Demo 5. Live Demo 6. Live Demo Module Tabs 7. 8.
Submit A Form Without Page Refresh using jQuery Previously on Nettuts+, Philo showed how you can use jQuery to add form validation to wordpress comments that works without any page reload. Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial I'll show you how easy it is to do just that -- submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background). Let's get started. What We're Building In this example, we have a simple contact form with name, email, and phone number. If you have found this article without any prior familiarity with jQuery, a great place to get started would be Jeffrey Way's article on 15 Resources to get you Started with jQuery From Scratch. Step 1 - Build the HTML Form Let's take a look at our html markup. You might notice that I have included a div with id contact_form that wraps around the entire form. Conclusion
21+ Javascript WebUI Frameworks | Designtopx There are times when a web designer will have to emulate a desktop program for the web. There are many tools written in javascript which can help web designers create consistent user interfaces for the web. Designing web elements and letting the browser determine how it should look may be okay for some projects but for products where branding is important additional help is required to keep the look consistent regardless of the web browser used. Here are 21+ javascript based web Graphic User Interface tools which can help design consistent UI elements across different browsers. For Desktop Browsers 1. Ample SDK is a standard-based cross-browser JavaScript GUI Framework for building Rich Internet Applications. 2. Ext JS is a JavaScript platform for rapid development of cross-browser web apps. dhtmlxLayout is a JavaScript DHTML component that provides powerful and efficient solution for building Ajax-enabled web interfaces with ease. 4. 5. jQuery UI 6. 7. 8. 9. 10. 11. 12. 13. 16. iWebkit
50+ Amazing Jquery Examples- Part1 Dec 20 2007 * This post is regularly updated. Many of us have been using a good deal of jQuery plugins lately. Menu 1) LavaLamp 2) jQuery Collapse -A plugin for jQuery to collapse content of div container. 3) A Navigation Menu- Unordered List with anchors and nested lists, also demonstrates how to add a second level list. 4) SuckerFish Style Tabs 5) jQuery UI Tabs / Tabs 3 – Simple jQuery based tab-navigation 6) TabContainer Theme – JQuery style fade animation that runs as the user navigates between selected tabs. Accordion 7 ) jQuery Accordion Demo 8) Simple JQuery Accordion menu SlideShows 9) jQZoom- allows you to realize a small magnifier window close to the image or images on your web page easily. 10) Image/Photo Gallery Viewer- allows you to take a grouping of images and turn it into an flash-like image/photo gallery. Transition Effects 11) InnerFade – It’s designed to fade you any element inside a container in and out. 13) Highlight Fade jQuery Carousel Demo : Color Picker 17) jQuery Color Picker
15 Javascript Web UI Libraries, Frameworks and Toolkits Almost all of the rich web applications that we currently see on the web today rely on a subtle set of UI controls, libraries or frameworks (or toolkits) that not only greatly simplify application development, they also provide a consistent, reliable, and highly interactive User Interface. What more could you ask for? Currently, there are a wide varied range of Web UI frameworks covering varied languages – for today we will focus on Javascript Web UI libraries. Not all libraries are suited for every project, but most developers will still rely on a single UI framework, a faithful friend they will always turn to in times of need… …so, if you are looking for a fresh UI outlook, below you will find the best 15 Javascript Web UIs, all offering, to different degrees, solutions. LivePipe: UI Components for Prototype LivePipe UI is a suite of widgets and controls for applications that has been built using the Prototype Javascript Framework. UKI – Simple UI Kit for Complex Web Apps jQuery UI Yahoo!
40+ Techniques of JavaScript for Professional UI Home » JavaScript » 40+ Techniques of JavaScript for Professional UI This is specialy for Web Developers and Design because they are using very much JavaScript for make more beautiful our UI (User Interface), JavaScript can add a lot of special effects that can really improve the user’s experience, when we add JavaScript/jQuery techniques that add an extra dose of usability to any UI (User Interface/Webpage), we need to figure out more practical styling and functionality techniques to provide a great user experience, in whole package we are using CSS, JavaScript and jQuery libraries. SocialHistory.js Create a simple ul list with a nice slide-out effect for <li> elements jQuery Hover Sub Tag Cloud Textboxlist Auto-Completion CSS+Javascript power. MooGenda: a complete javascript json calendar based on MooTools Month View Demo Week View Demo Day View Demo How to implement a Post-to-Wall Facebook-like using PHP and jQuery How to implement a news ticker with jQuery and ten lines of code MoreCSS.js
15 jQuery Plugins for Better Web Page Element Layouts CSS does a pretty darn good job of helping to lay out a web page… but not always. Even with all the versatility that CSS offers, it sometimes is not enough and, dare I say it, I really hate to say it – HTML tables are on [very few] occasions missed, as they can fill in the holes that CSS layout techniques may leave behind. Thankfully we do not have to venture down the road of HTML tables, there is a White Knight that can save is, as it always does – there are jQuery plugins and its marvelous community of developers that release an endless river of powerful and always useful plugins. jQuery Masonry Masonry is a layout plugin for jQuery. Downloads & Docs »Masonry Demo Columnizer jQuery Plugin The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. Downloads & Docs »Columnizer Demo UI.Layout Plug-in This plug-in was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. Downloads & Docs »UI.Layout Demo jLayout Columnize