Changing background opacity of div using RGBa

Question

I am trying to change the background opacity of a div using a jquery ui slider.

The user can change the background color of the div, so I need to know how I can only change the alpha parameter of the background without changing the color.

This is my code so far:

$('#opacity-slider').slider({ min: 0, max: 1, step: 0.1, value: 1 })
                .bind("slidechange", function() {
                    //get the value of the slider with this call
                    var o = $(this).slider('value');

                    var e = $('.element-active');
            var currentColor = $('.element-active').css('background-color');        
                    $(e).css('background-color', 'rgba(255, 255, 255, '+o+')')
                });

I need to some how change only the alpha part of the currentColor variable. I hope someone can help me! TIA

Answer 1

Try this:

var alpha = $(this).slider('value');
var e = $('.element-active');
$(e).css('background-color', 'rgba(255,255,255,' + alpha + ')');​

Updated Example Here

Answer 2

String manipulation might be the best way to go:

var e = $('.element-active');
var currentColor = $('.element-active').css('background-color');
var lastComma = currentColor.lastIndexOf(',');
var newColor = currentColor.slice(0, lastComma + 1) + o + ")";
$(e).css('background-color', newColor);

Answer 3

I managed to solve this by learning from and adapting the answer suggested by @Tom Smilack, using string manipulation.

I made a small change so that his answer would also work for divs that do not have alpha set originally, here is the final code that I am using:

$('#opacity-slider').slider({ min: 0, max: 1, step: 0.1, value: 1 })
            .bind("slidechange", function() {
                //get the value of the slider with this call
                var o = $(this).slider('value');

                var e = $('.element-active');
                var currentColor = $('.element-active').css('background-color');
                var lastComma = currentColor.lastIndexOf(')');
                var newColor = currentColor.slice(0, lastComma - 1) + ", "+ o + ")";
                $(e).css('background-color', newColor);

            });

Thanks to everyone for the suggestions and I hope this helps people wanting the same funcitonality