CODEWITHSUNDEEP
jquerymootools
Mac Taylor
Mac Taylor

Reputation: 5168

color switcher in mootools OR jquery

this is my simple javascript function to switch colors and it works fine , but as far as i need to enable jquery or mootools in my website then its better to have this function modernized 

function changeThemeColor(color)
{
    switch(color)
    {
        case "style1":
        default:
            document.getElementById('CSSfile').href = 'css/style1.css';
            setCookie('ThemeColor','style1',7);
            break;
        case "style2":
            document.getElementById('CSSfile').href = 'css/style2.css';
            setCookie('ThemeColor','style6',7);
            break;
    }
}

i know this maybe a huge quest but i really need to convert this code either into jquery or mootools

Upvotes: 1

Views: 393

Answers (4)

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

for mootools (or indeed, jquery) i'd create a map of styles instead and do something like this:

var changeThemeColor = function(colour) {
    var colours = { // set your mapping here.
        style1: "style1",
        style2: "style6"
    }, style = colours[colour] || colours['style1']; // default to style1 if not mapped

    document.id("CSSfile").set("href", "css/"+style+ ".css");
    Cookie.write("ThemeColor", style, {
        duration: 7,
        path: "/"
    });
};

trying to make it more modular/pattern based so it can easily support adding new styles in the future. the best way is to have this via an options var as second argument where you can overwrite (externally) the default mapping and internally, do Object.merge().

Upvotes: 1

user113716
user113716

Reputation: 322542

If your code works, why slow it down be converting it to library code that will just convert it back to what you have?

If this is actually what your code looks like, you could get rid of some of the redundancy:

function changeThemeColor(color) {
    document.getElementById('CSSfile').href = 'css/' + color + '.css';
    switch(color) {
        case "style1":
        default:
            setCookie('ThemeColor','style1',7);
            break;
        case "style2":
            setCookie('ThemeColor','style6',7);
            break;
    }
}

The style2 is sending 'style6' to setCookie(). If that's a mistake, and it should be sending 'style2', you could further reduce it.

function changeThemeColor(color) {
    document.getElementById('CSSfile').href = 'css/' + color + '.css';
    setCookie('ThemeColor', color, 7);
}

Upvotes: 1

rterrani
rterrani

Reputation: 526

If you want to use jQuery change this

document.getElementById('CSSfile').href = 'css/style1.css';

to

$("#CSSfile").attr("href",'css/style1.css');

and if you want to change the color from a div is

$("#divId").css("color","#f0f0f0")

Sorry for my english, i am from Argentina

edit: http://plugins.jquery.com/project/Cookie Here you have a cookie's jQuery plugin

Upvotes: 1

noio
noio

Reputation: 5812

For MooTools:

function changeThemeColor(color)
{
    switch(color)
    {
        case "style1":
        default:
            $('CSSfile').set('href','css/style1.css');
            Cookie.write('ThemeColor','style1',{'duration':7});
            break;
        case "style2":
            $('CSSfile').set('href','css/style2.css');
            Cookie.write('ThemeColor','style6',{'duration':7});
            break;
    }
}

As you can see, the edits are so small I wouldn't even bother implementing them if I were you. It's not going to make your site more futureproof either.

Upvotes: 1

Related Questions