CODEWITHSUNDEEP
jquery
swapna
swapna

Reputation: 143

jQuery Multiple Grouped Stylesheet Switcher

I have three groups of css style sheets and I want to choose one from each group all the time. Looking for some jQuery that does the job, with smooth transition and that the page does not refresh.

Here are the three groups:

  1. To choose colors- one of three needs to be active.
  2. To choose either header or footer- one of two needs to be active.
  3. To choose width of sidebar- one of two needs to be active.

Stylesheets in one group can be chosen irrespective of what stylesheet is active in other two groups.

<!--To Choose Colors-->
<link rel="stylesheet" type="text/css" href="grey.css" title="tgrey">
<link rel="alternate stylesheet" type="text/css" href="green.css" title="tgreen">
<link rel="alternate stylesheet" type="text/css" href="navy.css" title="tnavy">

<!--To Choose either header or footer-->
<link rel="stylesheet" type="text/css" href="topbar.css" title="ttop">
<link rel="alternate stylesheet" type="text/css" href="bottombar.css" title="tbottom">

<!--To Choose normal or wide sidebar-->
<link rel="stylesheet" type="text/css" href="smallsidebar.css" title="tsmall">
<link rel="alternate stylesheet" type="text/css" href="bigsidebar.css" title="tbig">

Thanks

Upvotes: 0

Views: 72

Answers (1)

Blundering Philosopher
Blundering Philosopher

Reputation: 6805

This should work for you:

In this example, I only used 2 stylesheets to switch between, but if it works for your situation, you can extrapolate.

I added a class color to two stylesheets [similar to what you will need]:

<link class="color" rel="stylesheet" type="text/css" href="green.css" title="green">
<link class="color" rel="alternate stylesheet" type="text/css" href="red.css" title="red">

Where each stylesheet only changes one div's background-color. [red.css to 'red', green.css to 'green'].

The function waits for a click anywhere in the HTML body:

$(document).ready( function() {
    function newSheet(className, color) {
        var nodeList = $('link.' + className);
        for(var i = 0; i < nodeList.length; i++) {
            nodeList[i].disabled = true;
            if (nodeList[i].title === color) {
                nodeList[i].disabled = false;
            }
        }
    }
    $('body').click(function() {
        $(this).fadeOut( function() {
            newSheet('color', 'red');
            $( this ).fadeIn();
        });
    });
});

If this works for you and you want help extrapolating to the 2 other 'classes' of stylesheets you need, let me know!

Upvotes: 2

Related Questions