Those of us who are used to GUI frameworks are used to the many components often built in. Everything from textboxes to progress bars are at our disposal. But when you move to the web there are no 'built in' version of many of these building blocks. The treeview has many incarnations on the web, and there is good reason. It is a versatile component, usable in any type of collection management. There are many ways to get a treeview going on the web, but today we will be taking jQuery and making a quick and dirty treeview - one that can be built and used in a matter of minutes.

Lately I've been working with jQuery plugins and I decided to create a tutorial demonstrating how to use the jQuery plugin system to build a simple star ratings control.

Last time we talked Cake, we went over the very basics of website building in CakePHP. All we did was grab some data, pass it to the view and crudely display it on the page. Today, we will be building on our code from the last tutorial. We will be using some cool features of Cake to streamline and style our code.

We've written lots of tutorials about sliding panels, and in all the previous tutorials we saw how to implement sliding panels from scratch or how to implement them using our generic animation library. In this tutorial, we're going to build them using the very popular Javascript library, JQuery.

Today's tutorial is going to show how to create a horizontally scrolling div using jQuery, html, and css. The main part of this tutorial is going to focus on the jQuery which is used to build the slider which controls the scrolling. One of the first questions that is going to pop into your head is, "why?". Well the main reason to do this is to be able to build a custom scroll bar/slider. You can also introduce extra functionality using the jQuery slider.

Here at SOTC we have been working with Drupal as of late where we are working on updating our site. One of things that I couldn't find a whole lot of documentation on it is getting simple basic Javascript stuff working in Drupal 6. So to get people moving in the correct direction I decided to throw out a small tutorial on this, especially since Drupal 6 has built in support for jQuery, a Javascript library - which should make adding fancy stuff pretty easy.

We've written several different tutorials about sliding panels, and each time we get requests for different features and functionality. The first feature I addressed was starting the panels in an up position and having them slide down. Lately we've been getting comments about how to put the panels inline with the rest of the content. That is, when the panel expands or contracts, the rest of the page moves with them. That's what this tutorial will address today.

Sometimes, user interfaces can be really constraining. A whole lot of stuff to do, and not nearly enough pixels to do it in. In regular desktop applications, in is extremely common to put useful and repetitive items in a context menu, to keep them from cluttering up the screen. However, it is generally frowned upon to put context menus on a web page - because then they will interfere with the browser's normal context menu. But, as always, there are special cases - for instance, Google Maps has its own context menu, and it seems to work pretty well.

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:
<input type="button" value="I'm a Button!" />.

There are all sorts of fun things that you can do in javascript and html once you have a basic drag infrastructure working - and in fact we have covered a whole bunch of these possibilities here at Switch on the Code. Today we are going to take a look at another one - using a container as a sort of 'window' on a larger object. Almost every mapping website makes use of this technique, and Google Maps probably does it best - you only have so much space on the screen to look at the map, but you can grab and drag around the map inside of its container to view different areas.