Creating Custom JQueryUI Buttons for a Toolbar – Part 3

Welcome to part 3 of my JQueryUI Button Toolbar tutorial. If you missed any of the previous ones, you can click here for Part 1, or here for Part 2. Otherwise, read on.

Up to this point we’ve created a pretty simple, but good looking toolbar from just a single image using JQueryUI’s button widgets and some CSS trickery. We also looked at how using JQueryUI  we transformed basic HTML Form elements into our buttons and yet they still retained their characteristics, such as a radio button group or checkboxes. Now, the last part of this tutorial will go over how to programmatically alter these button states and groups.

Contine reading

Creating Custom JQueryUI Buttons for a Toolbar

For the last several months I’ve been neck deep in Javascript, and JQuery has become an invaluable tool in my arsenal. JQuery coupled along with JQueryUI provides such an incredible amount of power and flexibility, I can’t even imaging trying to create web applications without them anymore. With all that power though, is surprising little documentation for some aspects of it. One such place I found myself recently was when I was tasked to create a toolbar for my application. Now, a toolbar seems such a “no-duh” thing, but I didn’t want to approach creating one the old fashioned way. I wanted to leverage JQueryUI to its fullest. So, here I write a tutorial that tries to explain more about creating toolbars with JQueryUI than what is provided by JQueryUI’s own documentation.

Contine reading

Creating a Basic Horizontal Scrollable DIV region – Part Two

Continuing from my previous tutorial, about creating a horizontal scrollable region using HTML and CSS. We can see that creating a horizontally scrollable region isn’t too hard, but the end result is rather basic, and has some minor issues. In particular, the size of the scrollable area was hardcoded and as a programmer, hardcoding is usually grounds for a public flogging. Besides the hardcoding, visually, it doesn’t look great, because the scrollbar is not proportional to the true width of the scrollable region. Of course, if you know how many items will be in your scrollable region, then you can calculate the width before hand, and then hardcoding isn’t so bad. But if you are working on an application, you might not know until after the page is rendered. So, how do we attempt to fix this?

Contine reading