CODEWITHSUNDEEP
jqueryjquery-uithemesthemeroller
Clax
Clax

Reputation: 176

Dynamically switching JQuery themes?

If I download multiple JQuery themes how can I give the users of my web application the ability to dynamically switch between themes?

Upvotes: 3

Views: 4724

Answers (2)

Johan van Breda
Johan van Breda

Reputation: 593

Apart from the themeswitcher, you can do change the theme dynamically by removing the links to the current theme. Add new links with the new theme. This enjoys the advantage that you can change also your own themes.

See below for an Ansatz 

<head>
<link href="./jquery-ui-first/jquery-ui.css" id="qtheme" rel="stylesheet">
<link href="./css/specials-first.css" id="mtheme" rel="stylesheet">
</head>

Now consider to change the theme upon a button clicked :

$(#otherthemebutton).click(function(){
    $("#qtheme").remove();
    $("#mtheme").remove();
    qelem = loadCss("./jquery-ui-other/jquery-ui.css","qtheme");
    qelem = loadCss("./css/specials-other.css","mtheme");
    document.getElementsByTagName("head")[0].appendChild(qelem);
    document.getElementsByTagName("head")[0].appendChild(melem);
});

loadCss = function(filename,id) {
    var elem=document.createElement("link");
    elem.id=id;
    elem.rel="stylesheet";
    elem.type="text/css";
    elem.href=filename;
    return elem;
}

You need to ensure that the underlying (external) javascript is for the same version.

Upvotes: 0

Clax
Clax

Reputation: 176

Nick Craver's comment was correct, the themeswitcher widget was ideal:
http://jqueryui.com/docs/Theming/ThemeSwitcher
new link: https://github.com/harborhoffer/Super-Theme-Switcher

Upvotes: 2

Related Questions