Home > Tags > Document Object Model
Page 1

Carrying Out Tasks in the Background with HTML5 Web Workers

HTML5 offers a range of improved options for executing JavaScript functions. With Web Workers, you can execute scripts in the background, so that intensive processing need not interfere with the main functionality of your page. Of course this is most useful for complex tasks, but in this tutorial we will demonstrate the basics of using Web Workers with your pages using a simple example. At the moment the most recent versions of all major browsers, except Internet Explorer, support Web Workers - you...
Read more

Using Custom Attributes in HTML5

Custom attributes are among the most significant additions for HTML5, and can play a major role in semantic Web development. In this tutorial we'll go through a practical example of creating and accessing HTML5 custom data attributes, including the necessary JavaScript functions. It was possible before HTML5 to add your own attributes to HTML elements and access them using JavaScript, but if you've ever tried it you'll know you can forget about getting your markup to validate. HTML5 provides the...
Read more

What Can You Do With Paper.js?

There are many JavaScript frameworks that leverage HTML5. Paper.js is one of these frameworks that uses Document Object Model (DOM) to structure objects in an easy-to-understand manner.  It offers creative and neat ways of doing lots of stuff on a Web browser that supports the <canvas> tag. It also offers a new and interesting approach to drawing vector graphics. The basic setup is shown below: <script src="js/paper.js" type="text/javascript"></script> <script src="js/main.js"...
Read more

Switch on With jQuery’s New Event Methods

The latest version of jQuery, version 1.7.1 at the time of writing, has completely overhauled its event system, giving us just two new methods to replace all existing event methods such as bind(), live() or delegate(). Event handling has been a core part of jQuery for a long time, but over the years the jQuery event landscape has flourished and grown, with successive releases increasing the number of methods for handling events. The new event methods on() and off() condense these different methods...
Read more

How To Change A Page’s Background As The User Scrolls

jQuery is great for adding enhancing effects that would otherwise be impossible with just HTML and CSS. In this tutorial we're going to use jQuery and two plugins to gradually change a website's background as the user scrolls the page. We'll be using the Color Animation and Waypoints plugins. The Color Animation plugin adds animations to the color properties of elements. jQuery already includes an animate function, this plugin simply extends it. The Waypoints plugin allows us to execute a function...
Read more

New methods in jQuery 1.6

jQuery is an actively-developed JavaScript library with a fairly rapid release cycle. As well as general enhancements, performance tweaks and bug fixes, new methods are frequently added to the library. In this article we’ll take a look at the new methods that have been added to the 1.6+ release and some of the enhancements. Delaying the ready event with the holdReady() method The holdReady() method is used to delay the firing of jQuery’s ready event, a cornerstone event which is popularly used...
Read more

Implement an Image Slideshow Using a jQuery Plugin

Image slideshows are a dime a dozen on the web. You see them used for advertisements, featured articles, product showcases, and plain old photo reels. Today, we're going to quickly implement a slideshow using the jQuery plugin Cycle by Mike Alsup. Cycle is a great plugin with years of development behind it. We're going to use the Lite version. It lacks some of the features of the full version (like different transitions), but it is super lightweight. While the full version is 49kb, the lite version weighs...
Read more