Thursday, March 25, 2010

Bogdan Raczynski Samurai Math Beats Lyrics

i just wanna play checkers, one and together
i just wanna play checkers, one and together
learnin ninja-moves
karate battle stars we'll become
you and I together, let's learn ninja moves
lets learn to battle the galaxy for ownership of the kingdom
and whats to come
we'll do battle in outer-space and fight the bastardly citizens of who resist tem.bu....
you and i doin ninja moves
doin karate moves
doin black-belt style
black belt
lets just fight the forces of evil in our galaxy, together
with our light sabers
with our pistols and guns and sticks and bones and rabbits and dogs and poop and all we can find
la la la la.. waaa...
black belt
these are the kenji's samurai math beats yes uh, yes uh

Tuesday, March 16, 2010

jQuery: Detect Windows XP Theme


I started building a jquery dropdown widget, and i ran into a problem where i was not styling the dropdown arrow correctly because i developed the widget in the classic theme, but the xp theme styled widgets differently.

Clearly i needed to be able to assign different classes to my widget depending on the user's theme if i wanted the widget to look natural to that user.

The problem is that the user's theme setting is not something available through a javascript api call, nor is it in the user agent string. I used a javascript technique called feature detection to get this information. Here is how it works:

We create a button element and assign it background color called 'ButtonFace'. This is a special system color that is different depending on what theme you use. Next we need to get the computed color of the button element, and remove the element from the DOM. The idea is that a user in XP theme will have a slightly different colored button than a user in the classic theme.

I used some jQuery to make my life easier, but it would be easy to port this code to any other framework, or do it in plain javascript.


The code above plugin will create a new jquery.support object $.support.windowsTheme which contains a name member that will be set to 'xp' if user is using the XP windows theme, 'classic' if they are using the classic theme, and undefined if they are using a custom theme, or another operating system.

To see this code in action look at this demo page

For further updates to this code please visit the jquery plugin page

Caveats:
  • This code does not check if the user is actually using windows, you would need to add that check yourself.
  • I have tested this code in firefox 3.6 and IE6,7 on windows XP. This code should really be also tested on Vista and Windows 7.
See also:
It has come to my attention that someone has already done this before