CODEWITHSUNDEEP
jquerycsscolor-picker
Xavier
Xavier

Reputation: 8362

jquery colorpicker and CSS3 gradients

I have a question regarding CSS3 Gradients and a plugin for jQuery called color picker,

What i am trying to achieve is the user can change the background of a image to their chosen gradients; i have tried a number of solutions but can not seem to get the gradient part to work.

Here is the development version: http://prosperitymedia.co.uk/pm/logo.html

Here is the color picker: http://www.eyecon.ro/colorpicker/

Please note i have only tested the dev version in FF4 so i am not sure if it will work in other browsers.

here is my code:

        // initial colour value
    var gradientHexOne = '333333';
    var gradientHexTwo = '666666';




    $('#logo_gradient_1_colorSelector').ColorPicker({
        color: "#" + gradientHexOne,
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            // every time a new colour is selected, this function is called
            gradientHexOne = hex;
            $('#logo_gradient_1_colorSelector div').css('backgroundColor', '#' + hex);

        }
    });



    $('#logo_gradient_2_colorSelector').ColorPicker({
        color: "#" + gradientHexTwo,
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            gradientHexTwo = hex;
            $('#logo_gradient_2_colorSelector div').css('backgroundColor', '#' + hex);          

        }
    });

    $('#gradients').click(function(){   
        $('#logo').css(
            '-moz-linear-gradient(100% 100% 90deg,' + '#' + gradientHexOne + ', #' + gradientHexTwo + ')'
        );
    });

Upvotes: 2

Views: 2138

Answers (1)

Matthew Nessworthy
Matthew Nessworthy

Reputation: 1428

-moz-linear-gradient is a background-image value, e.g.

$('#logo').css({'background-image' : '-moz-linear-gradient(100% 100% 90deg,' + '#' + gradientHexOne + ', #' + gradientHexTwo + ')'});

Upvotes: 4

Related Questions