jQuery UI slider extension that enhances range capabilities

I'm going to provide you with the code that makes it possible to set bounds to range slider handles (minimum and maximum) and some more sugar along with it.

I needed to create a range slider that is a bit smarter than the one provided by jQuery UI library that only allows to set minimum and maximum values for the whole slider, but I needed to set a few things more. I had to provide a range slider that would allow users to select time range between midnight and midday the next day (36 hours all together). These were my requirements:

• Lower handle can only move to midnight the next day (so it can move between 00:00 and 1d 00:00) - this simply means that time range must start today
• Selected range must be at least 1 hour wide
• Selected range can't be wider than 24 hours all together

These were my requirements and although I like jQuery UI plugins/widgets and even though it comes with a slider it doesn't work as expected. I could of course put it all in my slide handler, but tha wouldn't be reusable and it would also not allow me to do some additional things I implemented along. Want to know which ones?

BLToolkit MapResultSet builder

or How I refactored my seemingly identical methods with generic type parameters

As I've written in the past I'm using BLToolkit lightweight ORM on one of my projects. But some parts of it seem very silly actually and I can't really see why did they decide to do certain parts the way that they did. One of them being the configuration for multiple result sets. You know those where you write TSQL query that returns more than one result. BLToolkit has this nice DbManager mapping method called ExecuteResultSet() that takes an array of MapResultSet objects. And these you have to prepare yourself first so mapper will actually populate your object lists. Their example looks like this (just the relevant code):

   1:  List<Parent> parents = new List<Parent>();

   2:  MapResultSet[] sets = new MapResultSet[3];

   3:   

   4:  sets[0] = new MapResultSet(typeof(Parent), parents);

   5:  sets[1] = new MapResultSet(typeof(Child));

   6:  sets[2] = new MapResultSet(typeof(Grandchild));

   7:  // and so on and so forth for each result set

   8:   

   9:  using (DbManager db = new DbManager())

  10:  {

  11:      db

  12:          .SetCommand(TestQuery)

  13:          .ExecuteResultSet(sets);

  14:  }

As you can see you have to create an array of MapResultSet objects of the correct size (using a magic value - and you know I don't like them) and then set an instance to each (again using magic values). Seems tedious? I thought so as well. Hence I've done it differently.

Cross browser headers with vertical rotated text

You've probably come across the problem of displaying these kind of tables:

• many columns
• header column at the top
• content cells display narrow data - flags (yes/no, true/false, y/n, on/off, finite states like yes/no/maybe etc.) or just icons that denote some sort of state as in feature list tables where each cell displays either a check-mark or nothing or green and empty cirles or similar...
• header cells contain much wider data than content cells - more words that take much valuable horizontal space

If you had to display these kind of tables you've probably been thinking how could you make header cells narrower but not clip their content so headers still make sense... The idea is to display header cells as tall cells with vertically displayed text so columns can stay narrow as their content cells need. This way our tables get horizontally usable and don't take much space. It's true that header row becomes higher (depending on the amount fo text that you'd like to display, but hey there's just one header row in the whole table.

Anyway. So if you did struggle with this and also wanted it to display approximately the same on all three major nowadays browsers than you did spend some time solving it. If you didn't but you think you may in the future, then just use the code I'll provide here and off you go.