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...
HTML5 includes a host of new input elements, such as the output tag. Using the output tag in conjunction with the "oninput" event listener, you can create simple or complex Web page calculators, giving the user instant results. The output tag allows you to build forms using semantic markup, since the element is specifically designed for displaying calculation results. In this tutorial we will create a simple Web page calculator to demonstrate using the output element. Many of the new input elements...
With CSS3 you can give your users a greater level of control over how they view your pages without having to employ complex JavaScript functions. Using the resize property in CSS3, you can set elements to be automatically resizable. These elements appear within the browser with a subtle indicator at the bottom right corner letting users know that the element is resizable. On clicking and dragging the corner, the user can resize your element. The resize property in itself is not complex, but can have...
With HTML5, you can set any of your Web page text elements to be editable by users. Using the "contenteditable" attribute, you can instruct the browser to allow users to insert, delete and alter the text your page contains as they view it. There are many possible uses for this technique, such as allowing users to customize the way your pages appear to them each time they visit. In this tutorial, we will run through the basics of letting users edit your text content, including saving their edits for future...
With HTML5 you can embed SVG (Scalable Vector Graphics) markup directly into your pages. In this tutorial we go through the process of including a simple SVG element in an HTML page. We will also run through the technique for altering SVGs in JavaScript in cases where this is preferable to using the HTML5 canvas element. With HTML5, developers have a choice between the canvas element and inline SVGs. Which one is preferable really depends on the details of a project. In general, SVG brings the advantage...
Offline storage is one of the most anticipated features of HTML5. With users browsing to your pages and accessing your Web apps on various devices, often with limited connectivity, the Application Cache utility could prove to be a serious advantage. With HTML5 App Cache, you can instruct supporting browsers to cache copies of certain files. Once these files have been downloaded they will then be accessible offline. In this tutorial we will work through a simple example of caching a page, including...
With CSS3, you can rotate Web page elements by a specified number of degrees, clockwise or anti-clockwise. With a small amount of HTML and JavaScript code in conjunction with CSS declarations, you can also animate these rotations. In this tutorial we will work through the process of rotating an image element by varying amounts as well as animating the function, initiating the rotation on user interaction with the page. Create a Page ... Save a new HTML file in your chosen editor, using the following...
With CSS3, you can apply animated effects on Web page elements in 3D as well as 2D. In this tutorial we will go through the basics of rotating in 3 dimensions and will combine these transforms with the scale and translate transforms for more complex results. We will also add a basic level of interaction to animate the effects as the user interacts with the page. Create a Page with an Image Element ... Create a basic page with a CSS section in the head area, as follows: <!DOCTYPE html> <html> <head>...