0

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>
David Z
  • 93
  • 1
  • 3
  • 19

3 Answers3

3

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)

  1. If .shareaholic-share-button-container is created from html file directly, then place your javascript at the bottom of the page.

  2. 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

Lukabot
  • 189
  • 3
  • 11
  • I tried using the window ready function but it did not work, code is live on site now. – David Z Dec 24 '15 at 06:35
  • @DavidZ Can you figure out when that element is created? – Lukabot Dec 24 '15 at 06:56
  • 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 Dec 24 '15 at 07:07
  • YES!!! Finally something that works. Is there a clean way to include two elements into the code? The other element is .share-button-counter – David Z Dec 24 '15 at 08:25
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?

Community
  • 1
  • 1
Nik Drosakis
  • 2,258
  • 21
  • 30
  • The whole point was to make the background color transparent by overriding the !important inline CSS background element. – David Z Dec 24 '15 at 06:18
  • Opacity to zero is the intended result, I want a transparent background. – David Z Dec 24 '15 at 06:21
  • Again, changing the background-color instead of background will not override the !important 'background' inline CSS – David Z Dec 24 '15 at 06:25
  • I think I got you, now – Nik Drosakis Dec 24 '15 at 06:28
  • Yes, I think the problem is what Jitendra mentioned above, that the elements are not initially visible and exists inside DOM - any ideas? – David Z Dec 24 '15 at 06:30
  • I checked your webpage. Try changing script type="text/javascript" instead of text/rocketscript inside your script above. – Nik Drosakis Dec 24 '15 at 06:44
  • I disabled Rocket Loader on Cloudflare for that particular script, still does not work, you can check the page again. – David Z Dec 24 '15 at 06:46
  • a) it doesn't seem to be inactive now. Try changing this script type to "text/javascript" b) Also cannot find div shareaholic-share-button-container. Is this class name correct? c) If it is dynamically created (DOM changes), after an event, then insert your code inside the event e.g. $(".img-post button").on('click', function() { //your code }) d) no other ideas – Nik Drosakis Dec 24 '15 at 06:55
  • a) If you do a hard refresh you should see " – David Z Dec 24 '15 at 07:01
  • ..or possibly sth is overriding your code. Debug cleaning everything and put things one to one to find the issue. In case that this matches with your scroll event try inserting your code after the "display","block" event on the scroll event handler script . – Nik Drosakis Dec 24 '15 at 07:19
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>
prajakta
  • 162
  • 4