CODEWITHSUNDEEP
javascriptjquerycsscolor-picker
Roman Kiriluck
Roman Kiriluck

Reputation: 79

Changing color for different elements

in my project I have two buttons that change the color of the entire layout, like font color, background color, hovered color and box shadow color. Now it works like that:

$('#red').click(switchRed);
$('#green').click(switchGreen);
$('#blue').click(switchBlue);

function switchRed() {
    $('.shadow-color').css('box-shadow', '0 0 0 2px #d94d4b, 0 0 0 #d94d4b');
    $('.font-color').css('color', '#d94d4b');
    $('.bg-color').css('background', '#d94d4b');
    $('.hover-color').hover(function(){
        $(this).css('background', '#d94d4b');
    }, function(){
        $(this).css('background', '');
    });
    $('.focus-color').focus(function() {
        $(this).css('box-shadow', '0 0 5px #d94d4b');
    });
    $('.focus-color').blur( function() {
        $(this).css('box-shadow','');
    });
    $('.color-icon').attr('src', 'img-v4/dl-button-red.png');
}

function switchGreen() {
    $('.shadow-color').css('box-shadow', '0 0 0 2px #86aa66, 0 0 0 #86aa66');
    $('.font-color').css('color', '#86aa66');
    $('.ui-tooltip-content').css('box-shadow', '0 0 0 5px #86aa66');
    $('.bg-color').css('background', '#86aa66');
    $('.hover-color').hover(function(){
        $(this).css('background', '#86aa66');
    }, function(){
        $(this).css('background', '');
    });
    $('.focus-color').focus(function() {
        $(this).css('box-shadow', '0 0 5px #86aa66');
    });
    $('.focus-color').blur( function() {
        $(this).css('box-shadow','');
    });
    $('.color-icon').attr('src', 'img-v4/dl-button-green.png');
}

It works fine, but if I'd have 4-5 or even more color buttons i'd have to multiply all these functions and my script would be completely unreadable. Could you help me to create a clean and compact script. It should work the next way: We have 2-3 buttons with different color backgrounds. By clicking the button we get it's color attribute and add this color to font, background, hover and so on.

Upvotes: 3

Views: 94

Answers (3)

whiterabbit25
whiterabbit25

Reputation: 277

What you're looking for is to create a function with parameters. Functions allow you to pass in a value; the function plugs said value into its inner-workings. In your case you'd be passing in a color value, something like this...

function setColor(color) {
    $('.shadow-color').css('box-shadow', '0 0 0 2px ' + color + ', 0 0 0 ' + color);
    $('.font-color').css('color', color);
    $('.bg-color').css('background', color);
    etc....
}

You use the parentheses to pass in one or more parameters (values), and then in the function code you use the names you set for the parameters as placeholders. That way it doesn't matter which color you pass in, it'll just be plugged into all the right spots.

Then, when you want to use the function, you would just say

$('#red').click(function () {
    setColor('#d94d4b');
});

and so on down the line.

Upvotes: 1

Amit
Amit

Reputation: 1385

Assuming that, while clicking on two buttons, you are just changing color of some elements and background image of some elements. There is only one color and background image used in all 3 layouts. Based on these assumptions, following code snippet should work

$('#red').bind('click', { color: '#d94d4b', image_src: 'img-v4/dl-button-red.png' }, switchLayoutColor);
$('#green').bind('click', { color: '#86aa66', image_src: 'img-v4/dl-button-green.png' }, switchLayoutColor);
$('#blue').bind('click', { color: 'blue', image_src: 'img-v4/dl-button-blue.png' }, switchLayoutColor);

function switchLayoutColor (event) {
    var data = event.data;
    var color = data.color;
    var image_src = data.image_src;

    $('.shadow-color').css('box-shadow', '0 0 0 2px ' + color + ', 0 0 0 ' + color + ');
    $('.font-color').css('color', color);
    $('.bg-color').css('background', color);
    $('.hover-color').hover(function(){
        $(this).css('background', color);
    }, function(){
        $(this).css('background', '');
    });
    $('.focus-color').focus(function() {
        $(this).css('box-shadow', '0 0 5px ' + color);
    });
    $('.focus-color').blur( function() {
        $(this).css('box-shadow','');
    });
    $('.color-icon').attr('src', image_src);
}

Upvotes: 0

mahesh kalantre
mahesh kalantre

Reputation: 51

    HTML Code: <input type=button id ='red' value="red" data-colorcode = '#d94d4b' data-image = 'dl-button-red.png'>
    JS code: function switchColor() {

        var colorCode = $(this).data('colorcode');
        var colorImage = $(this).data('image');


        $('.shadow-color').css('box-shadow', '0 0 0 2px colorCode 0 0 0 '+colorCode);
        $('.font-color').css('color', colorCode);
        $('.bg-color').css('background', colorCode);
        $('.hover-color').hover(function(){
            $(this).css('background', colorCode);
        }, function(){
            $(this).css('background', '');
        });
        $('.focus-color').focus(function() {
            $(this).css('box-shadow', '0 0 5px ');
        });
        $('.focus-color').blur( function() {
            $(this).css('box-shadow','');
        });
        $('.color-icon').attr('src', 'img-v4/d'+colorImage );
    }

I hope this is working for you, logical part is define your color "data-color = '#d94d4b' " and get this color into jquery "    var colorCode = $(this).data('colorCode');" pass to color variable

Upvotes: 0

Related Questions