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

Read this plz http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/ — Ron van der Heijden, Dec 05 '12 at 14:20
I understand the differenct between opacity and rgba. I want to use rgba so I do not affect the opacity of the div's content — Ronny vdb, Dec 05 '12 at 14:30

palaѕн · Answer 1 · 2012-12-05T15:00:16.157

16

Try this:

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

Updated Example Here

edited Dec 05 '12 at 15:00

answered Dec 05 '12 at 14:25

palaѕн

72,112
17
116
136

Hey, sorry that I did not explain myself correctly. The code I have works, but it sets the background color or white because that is what is set in the code (255,255,255) I want to replace this with the color the user set for the div. Hope this is more clear – Ronny vdb Dec 05 '12 at 14:29
yeah, that is the element that I need to find out what the current background-color is, then using the slider change it's opacity using RGBa – Ronny vdb Dec 05 '12 at 14:40

score 3 · Answer 2 · answered Dec 05 '12 at 14:40

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);

score 2 · Accepted Answer · answered Dec 05 '12 at 15:33

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

score 2 · Answer 4 · edited Jul 01 '15 at 13:32

Even though this is solved already, maybe my little function will help someone. As an argument it takes a jQuery element like $('a') (that has either an RGB or RGBA background-color) and an alpha value from 0 - 1.

function RGBA(e, alpha) { //e = jQuery element, alpha = background-opacity
    b = e.css('backgroundColor');
    e.css('backgroundColor', 'rgba' + b.slice(b.indexOf('('), ( (b.match(/,/g).length == 2) ? -1 : b.lastIndexOf(',') - b.length) ) + ', '+alpha+')');
}

You would use it like this:

RGBA(jQuery('a'), 0.2);

The important part is that the <a>element has a rgb or rgba background-color set already.

<a href="#" style="background-color: rgb(100,10,50);">Sample</a>

score 1 · Answer 5 · answered Sep 21 '17 at 12:48

Just for me more understandable solution is splitting rgba color by comma and changing last element with new opacity value (of course it works only if initial color was rgba):

var newAlpha = $(this).slider('value');
// initial background-color looks like 'rgba(255, 123, 0, 0.5)'
var initialBackgroundColor = $('.element-active').css('background-color');
var bgColorSeparated = initialBackgroundColor.split(',');
// last element contains opacity and closing bracket
// so I have to replace it with new opacity value:
bgColorSeparated[3] = newAlpha + ')';
var newColor = bgColorSeparated.join(',');
$('.element-active').css('background-color', newColor);

score 0 · Answer 6 · answered Sep 24 '15 at 00:28

0

why you just don't toggle a class with that color and opacitty

 $(myelement).toggleclass();

se the jquery api

answered Sep 24 '15 at 00:28

GoAntonio

183
2
13

Changing background opacity of div using RGBa

6 Answers6

Linked