jquery ThemeSwitcher has problems with HTTPS

Question

I use the jquery theme roller in my project and I've noticed that it is creating a Chrome warning:

The page at https://mysite/ displayed insecure content from http://static.jquery.com/ui/themeroller/images/themeGallery/theme_90_dark_hive.png.

and worst, it makes the "green banner" (secure site) to become white again.

So I've researching and I've found the root of this problem is jquery.ui.themeswitcher.js which has a variable with an non-SSL URL:

imgPrefix:"http://static.jquery.com/ui/themeroller/images/themeGallery/theme_90_",

If I change it to "https" the images are not loaded (in fact, it seems that this protocol is not enabled there). So the question is: is there any HTTPS enabled site where I can get the files?

Answer 1

I had similar errors so I downloaded the js from http://jqueryui.com/themeroller/themeswitchertool/, saved it as jquery.themeswitcher.js and replaced all http jquery-ui urls with google apis https urls.

The only changes were in the var switcherpane where each link looks like:

<li><a href=
"http://jqueryui.com/themeroller/css/parseTheme.css.php?....">
<img src=
"http://jqueryui.com/themeroller/images/themeGallery/theme_90_ui_dark.png" alt=
"UI Darkness" title="UI Darkness" /> <span class="themeName">UI
darkness</span></a></li>

Which I replaced with:

<li><a href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/ui-lightness/jquery-ui.css">
<img src="content/images/theme_90_ui_light.png" alt="UI Lightness" title=
"UI Lightness" /><span class="themeName">UI lightness</span></a></li>

If you search through the file there are a few other html images that are referenced further down.

You can find all the images here

Answer 2

I'm not sure about custom themes, but Microsoft's CDN has the pre-built themes hosted, and they are compatible with https even though http is listed.

http://www.asp.net/ajaxlibrary/CDNjQueryUI1820.ashx

Answer 3

You can simply set the src links to "https" and it will work fine.

<link rel="stylesheet" href="themes/MyTheme.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.1/jquery.mobile.structure-1.4.1.min.css" />    
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>    
<script src="https://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>