If you are familiar with using Content Delivery Networks (CDNs) then you might be familiar with the situation of the CDN temporarilly going offline. In this case, any of your referenced files will not be loaded into your HTML page, which will potentially break everything.
You may also be familiar with HTML5 Boilerplate, who in their default index.htm page, provide you with a great bit of javascript code to use for the default jQuery library fallback.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="/content/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
Here you will see that there is a reference to Googles CDN for the jQuery library, a protocol relative URL, and the fallback code. If jQuery is not loaded via the CDN, then a reference to the local file is added.
The same code can then be applied when using the jQuery UI Library. I use the one supplied via the Microsoft;
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"></script> <script> window.jQuery.ui || document.write('<script src="/content/js/libs/jquery-ui-1.8.17.min.js"><\/script>') </script>
Again if the CDN library is not loaded, then just add a reference to the local file.
If you are using a CDN reference for your javascript file, then why not do the same with the css file?
A great method for a jQuery UI CSS file fallback was provided by @olimortimer (JSFiddle)
Reference the CDN css file in your Head section
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/cupertino/jquery-ui.css" rel="stylesheet" type="text/css" />
You will need to add a single line of HTML to your page, I put it directly after the Body tag.
<div class="ui-helper-hidden"></div>
Then after your jQuery and jQuery UI fallback coding, you could add the following;
<script> // jQuery UI CSS Fallback $(function () { if ($('.ui-helper-hidden:first').is(':visible') === true) { $('<link rel="stylesheet" type="text/css" href="/Content/Css/jquery-ui.css" />').appendTo('head'); } }); </script>
The code checks to see if the <div> with the class is visible or not, if it is visible, then the CDN has failed. We can then add a reference to your local copy.
Here are some handy jQuery and jQuery UI CDNs
PLEASE LEAVE COMMENTS! I am always interested in hearing back from those who read my blog. Please leave a comment if you found this useful, want to suggest any changes to my code, or anything else! Thanks!
