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.
So continuing from yesterdays post (click here in case you missed it), we’ll take a look at the next step; grouping the buttons and working with other input types, like Radio Buttons and Checkboxes. Once that’s done, we can look at what it takes to disable buttons or entire groups of buttons.
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?
Most web pages don’t really require the need to be wide, in fact most web pages are deliberately designed to fit within a maximum of 1000 pixels or less. The main reason is to maintain content within the viewable area of the screen, making the assumption that the base level of systems would support a screen that is 1024 pixels wide. Now, even though a computer screen is typically wider than tall, it’s more natural for a web page to extend downward indefinitely and web browsers can handle vertical scrolling, without much effort. Of course, there are times when you want to create a cool user interface that calls for a horizontally scrolling navigation bars of some kind. It sounds easy enough right? But as life would have it, trivial things sometimes turn out to be difficult. One easy way to create a horizontal region is to use an iFrame, but iFrames are not really within the same space as your web page, since, well, it’s a frame, and a completely separate html document. The ideal, would be to use DIV tags, and keep the structure completely within the same page.
In a divergence from me reviewing apps or gadgets, I decided to share some knowledge. My profession is web and application development; although as of late, it’s been more systems admin and support specialist. In this tutorial I talk about two very useful tools that I use often. XAMPP and Joomla.