I have a custom theme switcher in my code, which works fine, but when I use a link that isn't a first-party jquery-ui theme in my code, my webpage doesn't look like what the third party group advertises, probably meaning I may be missing something.(The theme I am currently testing is "Arctic" from wijmo)
This brings me to my questions:
- What are some links that might work?
- and, How might I change my code to be capable of fixing the fact that some links won't work?
var themes = {
"Arctic": "http://cdn.wijmo.com/themes/arctic/jquery-wijmo.css", //theme from http://wijmo.com/theming/
"Base": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/base/jquery-ui.css",
"Black tie": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/black-tie/jquery-ui.css",
"Blitzer": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/blitzer/jquery-ui.css",
"Cupertino": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/cupertino/jquery-ui.css",
"Dark hive": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/dark-hive/jquery-ui.css",
"Dot luv": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/dot-luv/jquery-ui.css",
"Eggplant": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/eggplant/jquery-ui.css",
"Excite bike": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/excite-bike/jquery-ui.css",
"Flick": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/flick/jquery-ui.css",
"Hot sneaks": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/hot-sneaks/jquery-ui.css",
"Humanity": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/humanity/jquery-ui.css",
"Le frog": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/le-frog/jquery-ui.css",
"Mint choc": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/mint-choc/jquery-ui.css",
"Overcast": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/overcast/jquery-ui.css",
"Pepper grinder": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/pepper-grinder/jquery-ui.css",
"Redmond": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/redmond/jquery-ui.css",
"Smoothness": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css",
"South street": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/south-street/jquery-ui.css",
"Start": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/start/jquery-ui.css",
"Sunny": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/sunny/jquery-ui.css",
"Swanky purse": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/swanky-purse/jquery-ui.css",
"Trontastic": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/trontastic/jquery-ui.css",
"Ui darkness": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/ui-darkness/jquery-ui.css",
"Ui lightness": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/ui-lightness/jquery-ui.css",
"Vader": "http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/vader/jquery-ui.css",
}
$(function() {
$(":button").button();
$("body").tooltip();
$(".theme-select").selectmenu({
change: function() {
//localStorage.style = $(this).val();
$("#theme").prop('disabled', true).prop('href', themes[$(this).val()]).prop('disabled', false);
//$("body").css("font-family",$(":button").css("font-family"));
},
});
/*if (!localStorage.style) {
localStorage.style="ui-lightness";
}else{
$(".theme-select").val(localStorage.style);
$("#theme").prop('disabled',true).remove();
$("<link id='theme' href='"+themes[$(".theme-select").val()]+"' rel='stylesheet'>").appendTo("head");
//$("body").css("font-family",$(":button").css("font-family"));
//$(".theme-select ui-selectmenu-text").text(localStorage.style);
$(".theme-select").selectmenu("refresh");
}*/
$(".ui-selectmenu-button").click(function() {
$("body").animate({
scrollTop: "+=100px",
}, 1000);
}); //make webpage scroll to show the opened list
$("#white,#black").click(function() {
//localStorage.background = $(this).attr("id");
$("body,#output").css({
"background-color": $(this).attr("id"),
"color": ($(this).attr("id") != "white" ? "white" : "black")
});
});
/*if (!localStorage.background) {
localStorage.background="white";
}else{
$("#"+localStorage.background).attr("checked",true).click().parent()//.controlgroup("refresh");
}*/
$(".group").append('<button class="min-tool" title="Minimize or Maximize tooltip"><span class="ui-icon ui-icon-circle-minus"></span></button><button class="x-tool" title="Remove tooltip"><span class="ui-icon ui-icon-circle-close"></span></button>').controlgroup();
$(".min-tool").bind("click", function() {
$(this).parent().find(".min-tool").toggleClass("ui-corner-all", 900) //soften (or harden) edges
.siblings().not(".min-tool,select") //find all siblings exclding myself or tools with the same class or things that need to stay hidden
.toggle(900); //and toggle their visibility with an animation
});
$(".x-tool").bind("click", function() {
if (!(confirm("Are you sure you want to remove this widget?\n\nWidget purpose: " + $(this).parent().data("purpose")))) return;
$(this).parent().hide();
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet">
<link id="theme" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div style="position:absolute; bottom:0px; z-index:-999;" data-purpose="Lets you select how the webpage should look">
<div class="group">
<p>
Don't like how the site looks? Feel free to change the theme below!
<br/>
</p>
<select class="theme-select" title="Change theme">
<option>Arctic</option>
<option>Base</option>
<option>Black tie</option>
<option>Blitzer</option>
<option>Cupertino</option>
<option>Dark hive</option>
<option>Dot luv</option>
<option>Eggplant</option>
<option>Excite bike</option>
<option>Flick</option>
<option>Hot sneaks</option>
<option>Humanity</option>
<option>Le frog</option>
<option>Mint choc</option>
<option>Overcast</option>
<option>Pepper grinder</option>
<option>Redmond</option>
<option>Smoothness</option>
<option>South street</option>
<option>Start</option>
<option>Sunny</option>
<option>Swanky purse</option>
<option>Trontastic</option>
<option>Ui darkness</option>
<option selected>Ui lightness</option>
<option>Vader</option>
</select>
<input id="white" type="radio" name="background-color" checked="checked" />
<label for="white" title="Change background color">White</label>
<input id="black" type="radio" name="background-color" />
<label for="black" title="Change background color">Black</label>
</div>
<br/>
<p style="font-size:0.7em">
For more information on these themes, go
<a target="_blank" href="https://jqueryui.com/themeroller/">here</a>.
<!--may add more or different link in the future-->
</p>
</div>
</body>
</html>