How to create a multi-option Style Switcher using jQuery?

Question

I need to create a multi-option Style Switcher for my WordPress theme, but I can't get anything working (see code below). By multi-option I mean this: The user should be able to select a custom color, pattern and font independently of each other (a simple css link swap-out won't do). All this is far beyond my current skill level, can anyone help me in the right direction?

Basic Markup:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Style Switcher</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/plugins.css">
</head>
<body id="top">
    <div id="wrapper">
        <p>The quick brown fox jumps over the lazy dog.</p>
    </div>
    <script src="js/plugins.js"></script>
    <script src="js/scripts.js"></script>
</body>
</html>

scripts.js (2nd attempt) Adapted from this theme.

// DOM READY, NO CONFLICT REMAP
jQuery(document).ready(function($){

    // THEME NAME
    var themeID='mytheme';

    // STYLE SWITCHER MARKUP
    $('body').append(
        '<div id="ss">'+
            '<p>'+
                '<select id="ssColor" name="ss-color">'+
                    '<option value="red">Red</option>'+
                    '<option value="green">Green</option>'+
                    '<option value="blue">Blue</option>'+
                '</select>'+
            '</p>'+
            '<p>'+
                '<select id="ssPattern" name="ss-pattern">'+
                    '<option value="pat-a">Pattern A</option>'+
                    '<option value="pat-b">Pattern B</option>'+
                    '<option value="pat-c">Pattern C</option>'+
                '</select>'+
            '</p>'+
            '<p>'+
                '<a id="ssReset" href="">Reset</a>'+
            '</p>'+
        '</div>'
    );

    // RESET
    $('#ssReset').click(function(){
        var i=0;
        var cookies = new Array();
        $('#ss select').each(function(){
            var cookie = $(this).attr('name');
            cookies[i] = cookie;
            i++;
        });
    });

    // ???
    var cookiesMax=cookies.length;
    for(var i=0, max=cookiesMax; i<max; ++i){
        $.dough(themeID+'-'+cookies[i],'remove');
    }

    // APPLY CHANGES FUNCTION
    function applyChanges(id,selectName,selectValue){
        var cookieName=id+'-'+selectName;
        $.dough(cookieName,selectValue);
        location.reload();
    }

    // PROCESS
    $('#ss select').change(function(){
        var selectName = $(this).attr('name');
        var selectValue = $(this).val();
        applyChanges(themeID,selectName,selectValue);
    });

});

scripts.js (1st attempt) Adapted from this tutorial.

// DOM READY, NO CONFLICT REMAP
jQuery(document).ready(function($){

    // APPLY STYLES FUNCTION
    function apply_styles(bgcolor,bgpattern){
        $('html').css('backgroundColor','#'+bgcolor);
        $('html').css('backgroundImage','url(img/'+bgpattern+')');
    }

    // CREATE COOKIE FUNCTION
    function create_cookie(bgcolor,bgpattern){
        $.dough('bgcolor','remove');
        $.dough('bgcolor',bgcolor);
        $.dough('bgpattern','remove');
        $.dough('bgpattern',bgpattern);
    }

    // READ COOKIES ELSE DEFAULTS
    var cbgcolor=$.dough('bgcolor');
    var cbgpattern=$.dough('bgpattern');
    if(cbgcolor!=undefined&&cbgpattern!=undefined){
        apply_styles(cbgcolor,cbgpattern);
    }else{
        apply_styles('fff','default.gif');
    }

    // STYLE SWITCHER
    $('body').append(
        '<div id="style_switcher">'+
            '<p><strong id="colorpicker_box"><em></em></strong></p>'+
            '<ul id="patterns">'+
                '<li><img src="css/img/spat1.gif" rel="pat1.gif" alt=""></li>'+
                '<li><img src="css/img/spat2.gif" rel="pat2.gif" alt=""></li>'+
                '<li><img src="css/img/spat3.gif" rel="pat3.gif" alt=""></li>'+
            '</ul>'+
            '<p><strong id="save_css">Save</strong></p>'+
        '</div>'
    );

    // COLORPICKER
    $('#colorpicker_box').ColorPicker({
        onShow:function(colpkr){$(colpkr).fadeIn(500);return false;},
        onHide:function(colpkr){$(colpkr).fadeOut(500);return false;},
        onChange:function(hsb,hex,rgb){
            $('#colorpicker_box em').css({backgroundColor:'#'+hex});
        }
    });

    // PROCESS VALUES
    var pickerValue= // store 'hex' from COLORPICKER above, but how?
    var patternValue= // store rel="" value of CLICKED '#patterns li img'
    $('#save_css').click(function(){
        apply_styles(pickerValue,patternValue);
    });

});

Gary Green · Answer 1 · 2011-05-12T12:25:33.243

You need to move your "PROCESS VALUES" bit into the onChange event in the colour picker, since the code is executed straight away otherwise and you want to act when the colour picked is KNOWN, then process that value.

$('#colorpicker_box').ColorPicker({
        onShow:function(colpkr){$(colpkr).fadeIn(500);return false;},
        onHide:function(colpkr){$(colpkr).fadeOut(500);return false;},
        onChange:function(hsb,hex,rgb){
            // PROCESS VALUES
            var patternValue= // store rel="" value of CLICKED '#patterns li img'
            $('#save_css').click(function(){
                apply_styles('#' + hex, patternValue);
            });

            $('#colorpicker_box em').css({backgroundColor:'#'+hex});
        }
    });

I'm not sure I get your comment "store rel="" value of CLICKED '#patterns li img" -- you've not even got a click event on any of the images, nor is there a rel value on them.

Thank you, this is helpful! However, the cookies are still not working :/ When I click save it applies the selected color (from the picker) to ``, which is exactly what it should do, but it doesn't _remember_ it when I navigate to another page (which is what the cookies are supposed to do, store the value so it doesn't change from page to page). I'll try to implement a click event to capture the pattern values, thank you for pointing me in the right direction with those – sometimes I overlook the most obvious things :/ — ulukai, May 12 '11 at 13:02

score 0 · Answer 2 · answered May 12 '11 at 12:36

0

Ok here we go:

<head>
  <link class="css" href="red.css" /> <!-- default style give url and whats not --> 
  <script>
      $('select').change(function (){
          $('.css').remove();
          var val = $(this).val();
          $('<link class="css" href="'+val+'" />').appendTo('head');


      });
  </script>
</head>
<body>
<select>
 <option value="black">black</option>
 <option value="red">red</option>
</select>
</body>

Besides you have jquery theme switcher anyways why mess around ? lol

answered May 12 '11 at 12:36

Val

17,336
23
95
144

Um, I'd consider this kind of solution as a last resort, but it doesn't save the value using a cookie – so whenever the user navigates to another page the style would revert back to the default, right? – ulukai May 12 '11 at 13:09
not really you could just save it on a cookie and on your `` when you print out `red.css` you could say `black.css` or whatever the cookie value is :) – Val May 12 '11 at 13:40

How to create a multi-option Style Switcher using jQuery?

2 Answers2