-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjquery-and-jquery-ui-fallbacks.html
More file actions
47 lines (42 loc) · 7.4 KB
/
jquery-and-jquery-ui-fallbacks.html
File metadata and controls
47 lines (42 loc) · 7.4 KB
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
---
layout: layout
title: jQuery and jQuery UI Fallbacks
---
<div class="post-wrapper">
<h1>jQuery and jQuery UI Fallbacks</h1>
<p>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.</p>
<p>You may also be familiar with <a href="http://html5boilerplate.com/" title="HTML5 Boilerplate" target="_blank">HTML5 Boilerplate</a>, who in their default index.htm page, provide you with a great bit of javascript code to use for the default jQuery library fallback.</p>
<pre style="font-family: Consolas; font-size: 13px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: white; background-position: initial initial; background-repeat: initial initial;"><span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">src</span><span style="color: blue;">=</span><span style="color: blue;">"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</span><span style="color: blue;">></</span><span style="color: maroon;">script</span><span style="color: blue;">></span>
<span style="color: blue;"><</span><span style="color: maroon;">script</span><span style="color: blue;">></span> window.jQuery || document.write(<span style="color: maroon;">'<script src="/content/js/libs/jquery-1.7.1.min.js"><\/script>'</span>)<span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span></pre>
<p>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.</p>
<p>The same code can then be applied when using the jQuery UI Library. I use the one supplied via the Microsoft;</p>
<pre style="font-family: Consolas; font-size: 13px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: white; background-position: initial initial; background-repeat: initial initial;"><span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">src</span><span style="color: blue;">=</span><span style="color: blue;">"//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"</span><span style="color: blue;">></</span><span style="color: maroon;">script</span><span style="color: blue;">></span>
<span style="color: blue;"><</span><span style="color: maroon;">script</span><span style="color: blue;">></span> window.jQuery.ui || document.write(<span style="color: maroon;">'<script src="/content/js/libs/jquery-ui-1.8.17.min.js"><\/script>'</span>) <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span></pre>
<p>Again if the CDN library is not loaded, then just add a reference to the local file.</p>
<h2>What about the CSS file?</h2>
<p>If you are using a CDN reference for your javascript file, then why not do the same with the css file?</p>
<p>A great method for a jQuery UI CSS file fallback was provided by <a href="https://twitter.com/#!/olimortimer" title="Oli Mortimer on Twitter" target="_blank">@olimortimer</a> (<a href="http://jsfiddle.net/olimortimer/LDYEf/" title="JSFiddle" target="_blank">JSFiddle</a>)</p>
<p>Reference the CDN css file in your Head section</p>
<pre style="font-family: Consolas; font-size: 13px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: white; background-position: initial initial; background-repeat: initial initial;"><span style="color: blue;"><</span><span style="color: maroon;">link</span> <span style="color: red;">href</span><span style="color: blue;">=</span><span style="color: blue;">"http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/cupertino/jquery-ui.css"</span> <span style="color: red;">rel</span><span style="color: blue;">=</span><span style="color: blue;">"stylesheet"</span> <span style="color: red;">type</span><span style="color: blue;">=</span><span style="color: blue;">"text/css"</span> <span style="color: blue;">/></span>
</pre>
<p>You will need to add a single line of HTML to your page, I put it directly after the Body tag.</p>
<pre style="font-family: Consolas; font-size: 13px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: white; background-position: initial initial; background-repeat: initial initial;"><span style="color: blue;"><</span><span style="color: maroon;">div</span> <span style="color: red;">class</span><span style="color: blue;">=</span><span style="color: blue;">"ui-helper-hidden"</span><span style="color: blue;">></</span><span style="color: maroon;">div</span><span style="color: blue;">></span>
</pre>
<p>Then after your jQuery and jQuery UI fallback coding, you could add the following;</p>
<pre style="font-family: Consolas; font-size: 13px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: white; background-position: initial initial; background-repeat: initial initial;"><span style="color: blue;"><</span><span style="color: maroon;">script</span><span style="color: blue;">></span>
<span style="color: darkgreen;">// jQuery UI CSS Fallback</span>
$(<span style="color: blue;">function</span> () {
<span style="color: blue;">if</span> ($(<span style="color: maroon;">'.ui-helper-hidden:first'</span>).is(<span style="color: maroon;">':visible'</span>) === <span style="color: blue;">true</span>) {
$(<span style="color: maroon;">'<link rel="stylesheet" type="text/css" href="/Content/Css/jquery-ui.css" />'</span>).appendTo(<span style="color: maroon;">'head'</span>);
}
});
<span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span></pre>
<p>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.</p>
<p>Here are some handy jQuery and jQuery UI CDNs</p>
<ul>
<li><a href="http://code.google.com/apis/libraries/devguide.html#jquery">http://code.google.com/apis/libraries/devguide.html#jquery</a></li>
<li><a href="http://www.asp.net/ajaxlibrary/cdn.ashx">http://www.asp.net/ajaxlibrary/cdn.ashx</a></li>
<li><a href="http://code.jquery.com/">http://code.jquery.com/</a></li>
</ul>
<p><em><span style="color: orange; font-weight: bold;">PLEASE LEAVE COMMENTS!</span> </em><em>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!</em></p>
</div>