0

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.

1

2 Answers 2

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/

2
  • 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, 2012 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. Oct 15, 2012 at 12:22
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.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.