jlStyleSheet – A CSS Stylesheet Changer For jQuery

Posted on August 9, 2010 by

jlStyleSheet is a CSS stylesheet changer jQuery plugin I designed which allows you to preview or switch the CSS stylesheet for your webpage with a click.

You can try jlStyleSheet on this webpage. You can also download the source-code by following the download link below.

Download: Git The Source Code

Changelog:

  • 1.0.4 – 9.15.10 – Cookie is set only if a default theme is present or a switch has occurred.
  • 1.0.3 – 9.14.10 – Preview stylesheet is removed if no default is present.
  • 1.0.2 – 9.13.10 – Had to revisit the cookies. Fixed the bugs. Cleaned up the code some by removing some unnecessary variables and combining the preview and switch functions.
  • 1.0.1 – 9.13.10 – Fixed a bug which caused cookies to not work as intended. Fixed a bug in the default cookie options. Fixed an error in the documentation (the default cookie name was incorrect).
  • 1.0.0 – 8.9.10 – Initial release

Example Use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Jason Lau" />
<title>jlStyleSheet Test Page</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.jlstylesheet.js"></script>
<script>
jQuery(function(){

var mySelect = function(){
alert('Theme selected!');
};

$('body').jlstylesheet({
defaultTheme: 'test1',
onSelect: mySelect
});

});
</script>

</head>

<body>
<a href="javascript:void(0)" rel="test1" id="test1" class="jlstylesheet-option">Test 1</a> <a href="javascript:void(0)" rel="test2" id="test2" class="jlstylesheet-option">Test 2</a> <a href="javascript:void(0)" rel="test3" id="test3" class="jlstylesheet-option">Test 3</a><br /><br />
<span class="test1"><strong>Test 1</strong></span><br />
<span class="test2"><strong>Test 2</strong></span><br />
<span class="test3"><strong>Test 3</strong></span>

</body>
</html>

Call jlstylesheet() on the body selector. Use the class .jlstylesheet-option on any object that is a stylesheet option. Use the rel=”" attribute to hold the stylesheet filename.

<a href="javascript:void(0)" class="jlstylesheet-option" rel="mystylesheet">Change Stylesheet</a>
<input type="button" class="jlstylesheet-option" rel="mystylesheet" value="Change Stylesheet" />
<img src="mypic.png" class="jlstylesheet-option" rel="mystylesheet" />



Available Options:

jlStyleSheet has the following options available for customization.

Name Type Default
cookieName String Default: ‘jlstylesheet’
The name of the cookie that the plugin will set for your domain. Once a stylesheet has been loaded, it will be remembered on future loads.
cookieOptions Object Default: {expires:365}
The options for the cookie that the plugin will set for your domain. Uses the same syntax as the jQuery cookies plugin.
defaultTheme String Default: none
Loads a default stylesheet as soon as the page loads.
directory String Default: null
The link or directory of the css files. Leave this blank if the css files are in the same folder as this plugin. This option helps because you don’t have to type in a directory when you type the filename in the rel attribute.
extension String Default: ‘.css’
The file extension for your stylesheet files. This option helps because you don’t have to type in an extension when you type the filename in the rel attribute.
onHover Function Default: null
Callback function to be executed whenever the stylesheet option is in hover state.
onSelect Function Default: null
Callback function to be executed whenever the stylesheet option is clicked.
onSwitch Function Default: null
Callback function to be executed after a new stylesheet is loaded.
themePreview Boolean Default: true
Switches the webpage stylesheet to the one which is currently in mouseover hover state to provide a quick preview. The previously selected stylesheet reloads when the mouse exits the option object.

Posted in jQuery | 15 Comments »
Tagged: , , , , , , , , , , , , , , , , , , , ,

  • barberJ

    Is there a way to check the cookie value before setting the style?

  • barberJ

    In pseudo code:
    if cookie-value is-set
    load-stylesheet(cookie-value)
    else
    load-stylesheet(default)
    end if

    I am trying to get this to work on multiple pages so this is what should be checked on page load of every page of a site.

  • barberJ

    I have added this code to the jquery.cookie.js file:
    // After this line:
    if(options.defaultTheme){

    switchTheme(dt);
    }
    // ADDED>>>>
    if ($.cookie(options.cookieName) != ”) {
    switchTheme(options.directory + $.cookie(options.cookieName));
    }

  • Jason

    Hello, we must have been looking at that at the same moment. I was already working on some fixes. Please download the newer version.

    To get the cookie value –
    var cookie_value = $.cookie('jlstylesheet');

  • barberJ

    Correction – I amended the jquery.jlstylesheet.js file.

  • barberJ

    Totally messed up now. On page load of another page it adds the full path again to the cookie. On mouse over it is working. Will have a closer look tomorrow.

  • Jason

    It’s all fixed now (he says with his fingers crossed). Version 1.0.2

  • barberJ

    Getting close to a result, but it seems every page has it’s own cookie, rather than one cookie for the site. This means the theme loads a different stylesheet on each page or none at all.

  • barberJ

    Being no expert on cookies, I am finding that on each page you switch the style setting, a new cookie is created for that page. So when revisiting that page, it is reading the old cookie. I have tried setting the path of the cookie in cookieOptions.

  • barberJ

    Another problem. If there is no cookie set and no default style set and you preview a style, what happens when you hover away?
    Something like
    if cookie value == null
    $(“head”).remove:last(‘<link…')

  • Jason

    There is a new version available.
    Please try the test pages at http://jasonlau.biz/jlstylesheet/.
    Feel free to comment if you continue to experience problems with this plugin.

  • barberJ

    I have it working now by setting a default style and setting preview to false.
    Setting preview to true was working if there was a cookie set but ‘onmouseout’ (hover off) it was not returning to the original style.
    Thanks for the code :)

  • Jason

    When a visitor first enters the webpage the default theme is set in the cookie unless the cookie already exists, in which case the cookie theme will load instead. If there is no default theme, no cookie is set unless a switch occurs. If no default theme or cookie is present during preview, all stylesheets with the class .jlstylesheet-theme are removed on mouseout, which should restore any original styles. It is important to NOT use the class .jlstylesheet-theme on your original stylesheet or it will be removed during preview.

  • POSE -itive

    I just found out, that some parts might not load correctly when there is a visibility tag in it. I have two texts on my page in the exact same spot and it depends on the style which one gets hidden. So if I switch styles, both texts get hidden because the page doesn’t reload completely.
    If I reload the page it will be visible again.

    Is there a work around?

    Take a look here: http://www.pose-itive.de/index_eng.html

    The switch is on the yin yang symbol.

  • http://jasonlau.biz Jason Lau

    Be sure to define the styles for all objects in both stylesheets. Also, if you define a particular style in one stylesheet, you must also define the same style in the the other stylesheet.
    For example, when you defined the styles for #yin and #yang you only defined the visibility for one of those objects in each stylesheet. You must define the visibility for BOTH objects in BOTH stylesheets. Even if the object is visible, you need to define it as such or the visibility will not change when the stylesheet does.
    See below, I have defined the visibility of both objects.
    #yang {
    position: absolute;
    width: 300px;
    height: 200px;
    top: 60px;
    left: 550px;
    z-index: 7;
    visibility: visible;
    }

    #yin {
    position: absolute;
    width: 300px;
    height: 200px;
    top: 60px;
    left: 550px;
    z-index: 0;
    visibility: hidden;
    }
    In other words, any styles you defined when the page loads have to be redefined in any additional stylesheets or no changes will occur.