So, about those standard browser form buttons - kind of boring, aren’t they? All grey and flat (although if your lucky, your browser might even give you some gradients). You know the ones I’m talking about - the buttons that you get by writing html like . And while that produces a perfectly functional button, wheres the spice? Wheres the pizazz!?

Read More »

Cascading Style Sheets, when used properly, do a great job of tidying up messy HTML, but have you ever felt like your CSS need some refactorization of its own? And sometimes, as part of that refactoring, it would be nice to split your CSS into multiple files - but now your thinking to yourself “well, that’s no good, now I’ll have some css files that depend on others and I will need to remember what needs what when I’m writing new html pages.” Fortunately, the designers of CSS felt your pain, and so added the @import rule into CSS2. Read More »

A UI component common in many applications (and starting to become common on the web as well) is the accordion menu. A number of javascript libraries provide accordion menus, but today we are going to take a look at how to build our own - because that is what we do here at Switch On The Code! Read More »

Everybody who has done any major website coding loves the CSS background-Image property. Besides doing plain old background images quite well, it has been used and abused in dozens of ways to get nice flicker free rollover images But while we will be using the background-Image property today, it will not be our main focus - instead we will be taking a look at the background-position property. Read on to learn about what this property is, and how it can be extremely useful when writing a website (and we show you yet another way to do rollover images). Read More »

We have talked about animation in javascript before (notably Sliding Panels), but here we are going to take the concept one step further. This tutorial is about writing a generic animation function - a function which, given an html element, can move and resize that element over a given time period. So, for instance, you could use this function to get sliding panel functionality, or to move some text around on the screen, or pretty much any dynamic movement that you would want to do to a single element on a webpage. Read More »

A classic user interface design element is the tabbed panel - in fact the browser you are using right now probably uses tabs. There are many styles and designs for tabbed panels on web pages as well, but tend to be static. Here, we are going to create a tabbed panel using javascript that you can add tabs to on the fly. Read More »

This tutorial provides a step-by-step guide to creating sliding panels (like the one on the left) using nothing but Javascript and CSS. We used these panels on Gaming Textures so the user could hide parts of the page when they weren’t being used. Read More »