CODEWITHSUNDEEP
jquerycss
Ronny vdb
Ronny vdb

Reputation: 2464

Changing background opacity of div using RGBa

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

Upvotes: 16

Views: 45765

Answers (6)

feeeper
feeeper

Reputation: 3017

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

Upvotes: 1

GoAntonio
GoAntonio

Reputation: 301

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

 $(myelement).toggleclass();

se the jquery api

Upvotes: 0

Vincens von Bibra
Vincens von Bibra

Reputation: 113

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>

Upvotes: 2

Ronny vdb
Ronny vdb

Reputation: 2464

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

Upvotes: 2

palaѕн
palaѕн

Reputation: 73896

Try this:

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

Updated Example Here

Upvotes: 16

Tom Smilack
Tom Smilack

Reputation: 2075

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

Upvotes: 3

Related Questions