HTML5 offers lots of significant advantages to developers, but browser support is still pretty low. There's no reason not to start inserting HTML5 functions into sites now, as long as you take the necessary steps to check for browser support and provide alternative content for everyone else. In this tutorial we'll go over the basics of using HTML5 and JavaScript to exploit the enhanced storage facilities on offer. With HTML5 you can store more data - and store it more efficiently. The two main data storage...
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"...
We’re going to wrap up our tutorial on how to develop a responsive website this week by making our secondary page, well, responsive. We created our large layout for the page in our last tutorial, but now we want to make it fluid so that it will display nicely across various platforms, ranging from tablets and mobile devices to PC’s. Let’s take a quick peak at what we’re working towards. Notice how once we hit the skinnier, mobile version of the site we go to a more vertical layout. This makes it...
In the last post, Creating and Manipulating Modal Popups, I discussed what the JavaScript method showModalDialog is used for and how to implement it in your website. Part two of this topic will focus on using popups to manipulate data and pass information from the child page back to the parent. User Experience ... Manipulating data in the popup window can be tricky, because modal windows do not function like normal ones. In a normal window, when your page does a postback, the postback is rendered...
CSS3 offers a wealth of possibilities in terms of visual and interactive effects, even allowing you to create animated elements without the need for either Flash or JavaScript. In this tutorial we'll go through the process of translating a page element using a CSS3 transform. The translate function essentially moves an element by a specified distance along the X and Y axes. You do need to provide browser-specific code to create reliable transforms, but the technique is not particularly complex....
At this point we’re just about done with the homepage of our responsive website. We’ve got our navigation in place, our background images resize nicely, and our other elements are able to resize and adjust to various screen resolutions. Today we’re going to focus on tying the page off with a footer. I’ve always admired sites that put some thought in to the bottom of their page design. There are certainly times when a footer requires nothing more than some basic contact info and maybe a copyright...
Occasionally, I have needed a web page to call a child page in order to display information or to be used in a way to maintain information that will then be re-displayed back on the parent page. I didn’t want the user to be able to get back to the parent page until they have performed some function on the child page. One solution for this scenario is to use Modal Popups. In this tutorial, I will show how to use JavaScript’s window.showModalDialog() to create a Popup window and display information....
Geolocation is one of the most exciting features offered by HTML5. Using some relatively simple JavaScript code, you can create Web applications that determine various aspects of the user location, including longitude, latitude and altitude plus more. Some Web applications can even provide navigation functionality by monitoring the user position over time, integrating with map systems such as Google Maps API. As with all HTML5 functions, you cannot yet rely on browser support. Where browser...