background preloader

JavaScript Tutorial

Rendering Text with Javascript, Canvas and VML Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally. Typeface.js uses browsers’ vector drawing capabilites to draw text in HTML documents. The typeface.js project has two components: the perl module for converting fonts, and the javascript library for drawing in the browser. This code is and always will be free and open source. Requirements: Firefox 1.5+, Safari 2+, Internet Explorer 6+ Demo: License: MIT License

jQuery: The Write Less, Do More, JavaScript Library JavaScript Tutorial and Reference Become the JavaScript expert in record time: this comprehensive JavaScript tutorial guides you every step of the way. Creating great web pages without JavaScript is hard - JavaScript is the backbone of dynamic web design and gives your pages a real edge. JavaScript is not restricted to your web pages: you can use it for processing / housekeeping of intranets and your local files, and in stand alone HTML Applications (HTA), and if you master JavaScript variant called Action Script you can even create cool casino games like the ones in the sites below: Note: This tutorial assumes that you are using JavaScript Editor, which assists you in many ways and makes your scripting a breeze. However, it is not a prerequisite. Download 30-day trial of JavaScript Editor, which has been used in designing everything from the pregnancy calculator to stock trading software: 30 days is more than enough for you to become a JavaScript guru :) Introduction Part 1: JavaScript Essentials Part 5: AJAX tutorial

CrossSlide - A jQuery plugin to create pan and cross-fade animations CrossSlide is a jQuery plugin implementing in 2kB 1 of Javascript code some common slide-show animations, traditionally only available via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery's animation facility, so it is as portable across browsers as jQuery itself (that is, a lot!) Internally CrossSlide does not rely on lookup tables, building instead a "chain" of functions. CrossSlide can create a few different effects, depending on how it's called. Static cross-fade The simplest effect, a cross-fade between static pictures is just as simple to set up: #placeholder is the block-level element (such as a div ) whose contents will be replaced with the animation. The first parameter to the crossSlide() function call is a dictionary of options. To get the static cross-fade effect you must specify the sleep option, which is the time every image will take on its own, and the fade option, which is the duration of each cross-fade animation between images. Ken Burns effect

Splintered Striper (-) Back in March 2004, David F. Miller demonstrated a little bit of DOM scripting magic in his A List Apart article Zebra Tables. His script programmatically adds two alternating CSS background colours to table rows, making them more readable and visually pleasing, while saving the document author the tedious task of manually assigning the styling to large static data tables. Although David’s original script performs its duty well, it is nonetheless very specific and limited in its application. It only: works on a single table, identified by its id, with at least a single tbody section assigns a background colour allows two colours for odd and even rows acts on data cells, rather than rows, and then only if they have no class or background colour already defined Taking it further In a recent project I found myself needing to apply a striped effect to a medium sized unordered list. Being more general purpose, the function in my splintered striper experiment is necessarily more complex.

10 jQuery scripts to improve your site’s interface | Design daily news With the past years rise of web 2.0, javascript frameworks have developed and made it easy for the average webmaster to make his site more dynamic. One of those frameworks, jQuery, has become extremely popular due to its ease of use and its incredibly light weight. Following are ten jQuery scripts to improve your site’s interface. Thickbox Focus on some content, image or webform, through a modal window. When to use it? Script, demo and documentationWordPress plugin Tabulations Create tabbed views of content. When to use it? Script, demo and documentation Coda slider Create a slider like the one you can see on Coda’s website. When to use it? Script, demo and documentationWP Coda: A great WordPress theme that allows you to easily create a Coda-like website with WordPress. Galleria Galleria is a javascript image gallery written in jQuery. When to use it? Script, demo and documentation jTip Tooltip solution based on jQuery, flexible and customizable. When to use it? Stylesheet switcher When to use it?

A JavaScript survival guide Are you a programmer who is considering learning JavaScript, but unsure whether it is worth the pain? Then this blog post is for you: I argue that it is worth it and give tips for surviving the language. Why learn JavaScript? The present The main reason for choosing JavaScript is the breadth of its ecosystem: the web platform, Node.js, JSON, NoSQL databases, Cordova/PhoneGap, automating PhotoShop and many other apps, etc. Compared to Java, I like the interactivity of JavaScript and the web platform. I also like the flexibility of the language. The future ECMAScript 6 [1], the upcoming version of JavaScript fixes many of JavaScript’s problems: not enough data structures, limited built-in support for inheritance, no built-in support for modules, shadowing this, functions playing too many roles, … Additionally, there is much innovation and experimentation around: Take your time to get to know JavaScript An important insight for learning JavaScript (paraphrasing Golo Roden): JavaScript’s power

JavaScript Framework Showdown: Which Should You Use? With so many JavaScript framework options to choose from, it’s no surprise a lot of developers are wondering which they should use for their build. If that sounds like you, you’re in the right place. To make your framework decision easier, we’ve outlined the pros and cons of AngularJS, Backbone.js, and Ember.js, based primarily on our own experience teaching these courses at Code School. AngularJS AngularJS is a client-side JavaScript framework that allows you to organize large, client-heavy applications into something manageable. Known for its versatility, Angular shines with nifty features like two-way data binding and the ability to make custom HTML tags/attributes/comments that encapsulate functionality. Angular’s biggest drawback is having many ways of accomplishing the same thing. Backbone.js Unfortunately, the "hands-off" approach of Backbone may mean implementing many features that are already in other frameworks. Ember.js Still Not Sure? Hopefully this quick guide has been useful.