The query string in the DOM has always been a bit awkward, why there isn't a standard method of parsing it is beyond me. The normal route most people follow is to convert it in to a simple array of Key/Value pairs. This allows you to then access the values of the query string using the array accessor syntax. //domain.com/index.html?key=value var value = querystring_array['key']; Still a little clumsy isn't it? Wouldn't it be great to be able to just retrieve the value from a normal JavaScript/JSON object?...
CSS3 introduced a novel concept, the ability to specify multiple, layered background images. This allows you to build up an image using smaller parts to create a more complex image. This feature allows you to have one single element instead of one for each image, it also means you don't have to worry about z-indexing as it is automatic. In this tutorial we'll be creating an animated header using layered background images. We're going to then apply an animation to position everything and add some interactive...
Hyperlinks and buttons are a functional yet in general boring aspect of a website or web application. They tend to provide very little feedback when you interact with them. This doesn't have to be the case, it's very easy to add some simple styling to let the user know that they have either interacted with or can interact with an element. Pseudo-classes And Selectors ... Pseudo-classes for links have been in CSS for many years and for the most part people just reset them all to be the same color and text-decoration....
In this weeks tutorial we'll be creating a WordPress widget to display the current weather for a specified location. To do this we'll be using the great Weather Underground API. You can sign up for a free developer account here, or sign up for a professional account to get increase request rates. Signing Up ... Once you've signed up and registered for your API key, you should see something like the following. To actually query the API we just need the API key. The Wunderground API does not use OAuth to authenticate...
Ever noticed if you resize your browser window with Gmail open (or Asana or a host of other sites) the various elements on screen resize automatically in a smooth animation? This can be done using JavaScript or jQuery, but can also be achieved using CSS3 transitions and @media selectors. Introduction to @media selectors ... If you already have a responsive design you'll probably be familiar with @media selectors. If you're not familiar, they are essentially a way of applying specific CSS classes to...
Have you ever started filling out a form or blog post only to have your session to expire or your browser to crash losing all of your work in the process? HTML5 introduced the concept of browser storage mechanisms. HTML5 storage has the ability to store string values in either local or session variables. The localStorage variable can persists across sessions and can be of any size. This behavior is similar to a cookie, however it does not suffer from the same limitations. In this tutorial we'll be utilizing...
In HTML5 forms got a major upgrade with the addition of some simple, yet flexible validation attributes. To support these added attributes CSS3 also added several new pseudo selectors styling controls based on their validation state. Adding validation ... To illustrate the new attributes and some of the new input types, we'll be building up a simple sign up form. Every sign up form is essentially the same, you fill in your details and click submit. How many times has the form been reset on you after you've...
Last week I briefly touched on the customization possibilities of Google Maps, this week we'll be taking a more in depth look at what exactly you can customize. The options available include customization for all aspects of the map such as: Roads Points of Interest e.g. Schools, Parks and Hospitals Methods of Transport Water Landscape features e.g. Man made or Natural This covers not only custom colors, but the icons and text associated with each element. Getting Started ... This tutorial is a follow...