The aforementioned CSS and images are inside that /css directory, plus some other goodies, like example code for using each of UI’s widgets. When I want to use a jQueryUI theme in an ASP.Net, I just copy the theme-name subdirectory from /css into the App_Themes .Net solution folder. From there, it’s a simple matter of letting the web app know to use the one of the themes in Web.config:

<pages styleSheetTheme="start" />

I used StyleSheetTheme over Theme, because a) StyleSheetTheme is processed earlier in the page lifecycle–before page control properties applied–and b) since these are style-only themes (meaning no .Net-specific .skin files that contain server-processed control properties), StyleSheetTheme just makes more sense.

Now that I have a couple of Themerolled themes, how the heck do I get the right customized JavaScript file to load? Glad you (er, I) asked!

When you download a themerolled theme, the included JavaScript file is named jquery-ui-1.7.1.custom.min.js (with the appropriate version number if you are reading this a while after I write it). The first thing I do is change that “custom” into the name of the theme: jquery-ui-1.7.1.south-street.min.js — and drop it into my site’s /js directory.. Now it’s time to crack open my Master page’s code-behind:

public partial class MasterPage 
 : System.Web.UI.MasterPage {
  protected void Page_Init(object sender, EventArgs e) {
    //prefer StyleSheetTheme, but use Theme if
    //  no StyleSheetTheme is present
    string themeName = Page.StyleSheetTheme != null 
     ? Page.StyleSheetTheme 
     : Page.Theme;
 
    string uiScriptPath = string.Format(
     "~/js/jquery-ui-1.7.1.{0}.min", 
     themeName);
 
    ScriptManager1.Scripts.Add(
     new ScriptReference(uiScriptPath));
  }
}

Not using ASP.Net AJAX? Then replace that last statement with:

Page.ClientScript.RegisterClientScriptInclude(
 this.GetType(), "jqueryui", uiScriptPath);

Now, if you want to provide a way for users of your site to switch between themes, the right customized jQueryUI file gets picked up!

On a related note, the MasterPage class has no PreInit event, so we cannot globally (i.e., just one time) do the following:

//no such thing as a MasterPage.PreInit event :-(
//  so, only works on content, i.e., aspx pages
protected void Page_PreInit(object sender, EventArgs e) {
  //grab from profile or session or cookie, etc.
  Page.StyleSheetTheme = Profile.Theme;
}

So how can we easily pick up our JavaScript file across the whole site if I want users to be able to switch between themes? (Microsoft suggested doing so in Global.asax in the above linked suggestion…but how the blazes can you access the Page.(StyleSheet)Theme inside Global.asax?!)

It just so happens that Sue Googe blogged about solving that very problem and also posted her solution to CodeProject. In brief, she created a BasePage class (which inherits from Page) in the /App_Code folder that sets the theme, and then all your site pages inherit from BasePage. Less than ideal for a pre-existing site with many pages, but I have yet to find or come up with a better globally-available solution. (Thanks, Sue! ^_^)

In a thread on the jQuery discussion group that (re)announced Paul’s userscript, Karl Swedberg suggested putting the version of jQuery in the image’s title attribute so it would show as a tooltip when you hover over it. As I am curious about when each site started using jQuery and what capabilities they have available on their site, I thought that was a fantastic idea. So, I copied Paul’s detector script to my own server, and added in Karl’s suggestion (modifying my userscript to point to my modded detector script).

I had been (and am still) having some problems with the version tooltip showing on my home browser–some plug-in or configuration issue, no doubt–so I cobbled together something that would display the page’s jQuery version in a div when I clicked on the icon.

Now, on a separate track, Karl had talked about how to create a jQuery bookmarklet that would insert jQuery into pages that do not have it, in order to have jQuery’s power on the console in Firebug or Dragonfly–or slightly more painstakingly with “javascript:” statements in the address bar for Internet Exploder and Safari (does Safari have its own console?). I’ve been using and loving it ever since I found it.

Karl recently wrote about an updated jQuery bookmarklet that has things like a spiffy div that pops up and tells you what it’s doing. When I saw that and thought about the display-on-click that I’d added to my jQuery Detector, I just knew that these were two great tastes that had to, er, play golf together.

So, here is the “debug” version of the script, i.e., with line breaks and long(er) variables names:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

(function() {
  var version=0.3, //cheaply find version when compressed
    b=document.getElementsByTagName('body')[0],
    el=document.createElement('div'),
    img = document.createElement('img'),
    els = el.style, ims = img.style,
    //"jquery is present" image
    jqimg='http://jquery.com/images/favicon.png';
 
  // style info div
  els.position='fixed';
  els.bottom='2px';
  els.right='20px';
  els.width='200px';
  els.height='24px';
  els.margin='0 auto 0 auto';
  els.padding='5px 10px 5px 10px';
  els.backgroundColor='#c33';
  els.color='#fff';
  els.fontSize='8pt';
  els.textAlign='center';
  els.display='none';
 
  // style jquery detector icon
  ims.position='fixed';
  ims.bottom='2px';
  ims.right='2px';
  ims.zIndex='5';
  ims.cursor='pointer';
  ims.border='0';
 
  b.appendChild(img);
  b.appendChild(el);
 
  // function overhead in order to rebind click event after loading jQuery
  // showJq(): img.click = display version of jQuery currently loaded
  function showJq() {
    var jq=jQuery, v = jq.fn.jquery;
    //"if" protects jquery.com from needless rechecking
    if(img.src!=jqimg) img.src=jqimg;
    img.title=v;
    el.innerHTML='Using jQuery v'+v;
    jq(img).click(function(){
      els.display='block';
      window.setTimeout(function() {
        jq(el).fadeOut('slow');
      }, 1000);
    });
  }
  //jquery exists; display version on icon click
  if (typeof jQuery != 'undefined') {
    showJq();
  //no jquery; show bland icon and load jquery on click
  } else {
    img.src='http://jquery.com/images/ics.png';
    img.title='Load jQuery';
    img.onclick=function(){ //todo: rebind click event to above
      var s=document.createElement('script');
      s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
      document.getElementsByTagName('head')[0].appendChild(s);
      var i = 0;
      // loadJQuery(): recursive calls until jQuery finishes loading
      function loadJQuery() {
        el.innerHTML='jQuery Loading...';els.display='block';
        if (++i < 10 &#038;& typeof jQuery == 'undefined') {
          window.setTimeout(loadJQuery, 50);  //recheck every x milliseconds
        } else if (i >= 10){    //don't try rechecking more than y times
          el.innerHTML='Load jQuery failed<br/>(try again?)';
        } else {    //finished loading; show version and fade out
          img.onclick=showJq; //rebind to just show version
          el.innerHTML='jQuery loaded, v'+jQuery.fn.jquery;
          img.src=jqimg;  //reset img url to jquery icon
          window.setTimeout(function() {
            jQuery(el).fadeOut('slow');
          }, 1000);
        }
      }
      loadJQuery();   //start loading jquery
    };
  }
})();

Once that’s done, all that’s left is to churn this (much heavier than Paul’s original) script through the YUI Compressor to cut its size down a bit. I also turned on compression for my scripts directory to get even more mileage out of it.

I have not yet gotten this working in Opera 9.5x, though Paul’s original script worked fine in 9.2x.

Each of the resulting scripts are available below:

• jQuery Detector userscript (for Greasemonkey/user scripts)
• jQuery Detector Script (referenced by the userscript)
• jQuery Detector Script – debug (verbose)

Can you find problems or think of improvements—or give me tips on why I’ve broken it in Opera?

var rfc2822 =
/^[\w!#$%&'*+/=?^`{|}~-]+(?:\.[\w!#$%&'*+/=?^`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])*)+\.(?:[a-z]{2,4}|museum|travel)$/i;

That’s a JavaScript variable declaration, but the RegExp is valid for Perl and can be quickly translated for other languages.