How do I switch between 2 css stylesheets for use with jQuery-UI?

Question

I'm quite new to jQuery and javascript in general and I've created a simple .html file in order to test using 2 different jQuery-ui stylesheets.

What I'm trying to achieve is the example dialog will open with the "flick" stylesheet and the datepicker within this dialog will open with the "ui-lightness" stylesheet.

I have tried to append the selected stylesheet when the user clicks the textbox in the dialog but the "flick" stylesheet is still used.

My code in my html file is as follows:

<!doctype html>

<html>

<head>
<meta charset="utf-8">
<title>jQuery Multiple Themes</title>
<link rel="stylesheet" type="text/css" href="css/flick/jquery-ui-1.9.0.custom.css">

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

<script type="text/javascript">

    function openDialog() {
        $("#dialog").dialog();
    }

    function loadDatePicker() {

        $('head').append('<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.1.8.24.custom.css">');

        $("#date").datepicker({});
    }

</script>

</head>

<body>

<input type="button" value="Open Dialog" onclick="openDialog()">

<div id="dialog" title="Test Mutiple Themes" style="display: none">
    Click to open a date picker in a different CSS theme
    <input id="date" type="text" size="8" onclick="loadDatePicker()">
</div>

</body>

</html>

It is hopefully a simple syntax error I am not seeing due to lack of experience with these scripts.

Try this http://stackoverflow.com/questions/3182840/javascript-jquery-removing-or-replacing-a-stylesheet-link — Harsha Venkataramu, Oct 15 '12 at 11:34

score 2 · Answer 1 · answered Oct 15 '12 at 11:35

2

<ul id="nav">
<li><a href="#" rel="/path/to/style1.css">Default CSS</a></li>
<li><a href="#" rel="/path/to/style2.css">Larger Text</a></li>
<li><a href="#" rel="/path/to/style3.css">Something Different</a></li>
</ul>

The jQuery

$(document).ready(function() { 
$("#nav li a").click(function() { 
    $("link").attr("href",$(this).attr('rel'));
    return false;
});
});

Explanation here: http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

answered Oct 15 '12 at 11:35

Rick Calder

18,310
3
24
41

Thanks for the response. I know about being able to switch the style of a whole page, but what about individual jquery-ui elements? – jazibobs Oct 15 '12 at 12:15
I think there are two ways you could go about this. Include both stylesheets, remove the datepicker elements from the flick stylesheet and vice versa or combine the two so that the elements style correctly. I can't think of a way to assign a style sheet to a specific item when the two sheets have conflicting styles in them. It will take some time but honestly that's the only way I see of accomplishing what you're after practically. Apologies for not understanding the gist of the question the first time around. – Rick Calder Oct 15 '12 at 12:22

score 1 · Accepted Answer · answered Oct 15 '12 at 12:32

1

On the themeroller download page you can set up a "CSS SCOPE" for theme. This will prefix a classs of your choosing in front of all of the UI classes within the stylesheet.

This allows setting a dialog up with your scope class for dialogs in the markup, and another widget like dateepicker with it's scope class.

answered Oct 15 '12 at 12:32

charlietfl

170,828
13
121
150

Thank you very much this is the solution I found. More information is available at: http://filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/ – jazibobs Oct 16 '12 at 09:30

How do I switch between 2 css stylesheets for use with jQuery-UI?

2 Answers2