jQuery .css() doesn't work

Question

I'm trying to change inline CSS using jQuery on my website. So far I have tried the following code:

<script type="text/javascript">
jQuery(".shareaholic-share-button-container").css("background", "rgba(0,0,0,0)");
jQuery(".share-button-counter").css("background", "rgba(0,0,0,0)");
</script>

I have also tried:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(init);
function init() {
jQuery(".shareaholic-share-button-container").css("background", "rgba(0,0,0,0)");
jQuery(".share-button-counter").css("background", "rgba(0,0,0,0)");
}
});
</script>

And

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".shareaholic-share-button-container").css("background", "rgba(0,0,0,0)");
jQuery(".share-button-counter").css("background", "rgba(0,0,0,0)");
});
</script>

However, nothing is working. Interestingly the code works when Cloudflare's development mode is turned on, but when it is turned off the code doesn't work (even after purging the Cloudflare cache and disabling minification / rocket loader).

Appreciate all help!

Edit: the whole point of this code is to replace the !important inline CSS and change the background to be completely transparent, i.e. zero opacity. So rgba(0,0,0,0) is correct and intended.

The purpose of the code is to remove !important 'background' inline style, see:

<div class="shareaholic-share-button-container" ng-click="sb.click()" style="color:#000000 !important;
                      background:#fafafa !important; // the purpose is to remove this line
                      opacity: 1.00 !important;">
            <span class="share-button-counter ng-binding" style="color:#000000 !important;
                  background:#fafafa !important; // and this line
                  opacity: 1.00 !important;">0</span>
            <div class="share-button-sizing" ng-style="config.customColorsEnabled &amp;&amp; config.appName === 'floated_share_buttons' ? config.customColors : {}" style="color: rgb(0, 0, 0); opacity: 1; background: rgb(250, 250, 250);">
              <i class="shareaholic-service-icon service-facebook" ng-style="config.customColorsEnabled ? config.customColors : {}" style="color: rgb(0, 0, 0); opacity: 1; background: rgb(250, 250, 250);"></i>
              <span class="share-button-verb ng-binding" style="color:#000000 !important">
                <b class="ng-binding">Share</b>

              </span>
            </div>
          </div>

I think its working in your site currently, try to change color code and try again. — Harsh Sanghani
– Harsh Sanghani, Commented Dec 24, 2015 at 6:04
This is not working because initially your elements are not visible but elements exists in DOM and this will not affect anything as you are expecting. I have just copy-paste and run your code in console when elements are visible and it working. — Jitendra Khatri
– Jitendra Khatri, Commented Dec 24, 2015 at 6:09
@JitendraKhatri is there a way for me to change the inline CSS elements thats inside DOM then? — David Z
– David Z, Commented Dec 24, 2015 at 6:11

Lukabot · Accepted Answer · 2015-12-24 07:42:43Z

2

You are calling that function before DOM is fully loaded.

So jQuery(".shareaholic-share-button-container") returns empty array. (because that element is not even made when you call this code)

If .shareaholic-share-button-container is created from html file directly, then place your javascript at the bottom of the page.
If .shareaholic-share-button-container is created dynamically, call javascript after fully rendered.
For example in your case, you can use window ready event callback.
```
jQuery(window).ready(function(){
   jQuery(".shareaholic-share-button-container").css("background-color", "red");});
```

Edit: Ok, your problem is 2, but it is created asynchronously, so you don't know exact time when it created and even you cannot inject source code right after that.
One solution is observing every DOM element creation event.

jQuery('body').bind("DOMSubtreeModified", function(e) {
    var $tmp = jQuery(e.target).find(".shareaholic-share-button-container");
    if($tmp.length){
        $tmp.css("background-color", "rgba(0,0,0,0)");
    }
});

CAUTION This solution does not guarantee of working on cross browser environment. and may cause performance issue

edited Dec 24, 2015 at 7:42

answered Dec 24, 2015 at 6:33

Lukabot

1893 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Z Over a year ago

I tried using the window ready function but it did not work, code is live on site now.

Lukabot Over a year ago

@DavidZ Can you figure out when that element is created?

David Z Over a year ago

element is probably created by this line

<"script type='text/javascript' src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js' data-shr-siteid='82ff342d6c171e823bc5c49c19bf1b59' data-cfasync='false' async='async'>

you can't see the elements on 'view source' but if you inspect the floating share button (scroll down a bit) beside the floating/sticky top menu you will see it

David Z Over a year ago

YES!!! Finally something that works. Is there a clean way to include two elements into the code? The other element is .share-button-counter

Community · Accepted Answer · 2017-05-23 11:52:04Z

1

you set a background color but it is absent, because you set opacity 0 (zero). Try e.g. 50% opacity

jQuery(".shareaholic-share-button-container").css("background", "rgba(0,0,0,50)"); // 50% opacity

and then customize your opacity. 0 is zero opacity. Transparency is a value >0 and <100. Choose the value of your transparency.

if your need is 100% transparency, jquery provides

$(".shareaholic-share-button-container").css('background-color','transparent');

To override !important css check this link: How to override css containing '!important' using jquery?

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Dec 24, 2015 at 6:15

Nikola Drosakis

2,3581 gold badge22 silver badges31 bronze badges

10 Comments

David Z Over a year ago

The whole point was to make the background color transparent by overriding the !important inline CSS background element.

David Z Over a year ago

Opacity to zero is the intended result, I want a transparent background.

David Z Over a year ago

Again, changing the background-color instead of background will not override the !important 'background' inline CSS

Nikola Drosakis Over a year ago

I think I got you, now

David Z Over a year ago

Yes, I think the problem is what Jitendra mentioned above, that the elements are not initially visible and exists inside DOM - any ideas?

|

prajakta · Accepted Answer · 2015-12-24 09:33:22Z

0

Try this: If rgba not working in jQuery then background-color property and opacity can be given by writing the code in two different way. Also, !important does not work in jQuery, only use in css

<script type="text/javascript">
$(document).ready(function(){


$(".shareaholic-share-button-container").css("background-color", "#000");
$(".shareaholic-share-button-container").css("opacity", "0.5");

});
</script>

answered Dec 24, 2015 at 9:33

prajakta

1624 bronze badges

Collectives™ on Stack Overflow

jQuery .css() doesn't work

3 Answers 3

4 Comments

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related