jQuery isn't modifying CSS

Question

On my website I have an Adblock detector which displays a narrow red notification under the navigation bar if Adblock is enabled. The website looks perfect if Adblock is disabled, but I cannot get jQuery to modify the logo's padding-top when Adblock is enabled. I did however manage to switch the script from Javascript to jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){ 
$( ".navbar" ).prependTo($('body'));
$( ".navbar" ).show();
$( "#enjin-bar .right" ).show();
}); 
</script>
<style>
#tXBNJIUTwOYE {
display: none;
margin-bottom: 30px;
padding: 5px 10px;
background: #D30000;
text-align: center;
font-weight: bold;
color: #fff;
border-radius: 5px;
}
</style>
<div class="navbar-fixed-top" id="tXBNJIUTwOYE"><br><br><br>
  Our website is made possible by displaying ads to you, and is one of the few ways we fund this website.<br>
  Please consider supporting us by disabling your ad blocker. We promise never to display intrusive adverts.
</div>

<script src="http://files.enjin.com/384018/showads.js" type="text/javascript"></script>
<script>
if($('#tXBNJIUTwOYE').length){
     $('#pariterlogo').css({"padding-top":"50px"});
}
</script>
<script>
if($('#lZuoJjSUDXhE').length === 0){
    $('#tXBNJIUTwOYE').css({"display":"block"});
    $('#pariterlogo').css({"margin-top":"50px"});
}
</script>
<!-- <script type="text/javascript">

if(!document.getElementById('lZuoJjSUDXhE')){
  document.getElementById('tXBNJIUTwOYE').style.display='block';
  document.getElementById('pariterlogo').style.paddingTop = "0px";
}
</script>
-->
<div id="pariterlogo" style="padding-top: 50px;">
<img id="pariterlogo" src="http://i.imgur.com/jbRQ6Wd.png" width="720" style="display: block;margin-left: auto;margin-right: auto;"/>
</div>

Maciej Wiercioch · Accepted Answer · 2016-09-08 16:41:10Z

1

padding-top of #pariterlogo is set to 50px in this inline css:

<div id="pariterlogo" style="padding-top: 50px;">

And in the script, if the adblock is detected, you want to change padding-top to the same value (50px):

if($('#tXBNJIUTwOYE').length){
    $('#pariterlogo').css({"padding-top":"50px"});
}

There is no visible difference, because 50px === 50px. Change padding-top to different value, your code is correct.

$(document).ready(function() {
  if ($('#tXBNJIUTwOYE').length) {
    $('#pariterlogo').css({
      "padding-top": "150px" // <-- different value
    });
  }
  if ($('#lZuoJjSUDXhE').length === 0) {
    $('#tXBNJIUTwOYE').css({
      "display": "block"
    });
    $('#pariterlogo').css({
      "margin-top": "50px"
    });
  }
});

#tXBNJIUTwOYE {
  display: none;
  margin-bottom: 30px;
  padding: 5px 10px;
  background: #D30000;
  text-align: center;
  font-weight: bold;
  color: #fff;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar-fixed-top" id="tXBNJIUTwOYE">
  <br>
  <br>
  <br>Our website is made possible by displaying ads to you, and is one of the few ways we fund this website.
  <br>Please consider supporting us by disabling your ad blocker. We promise never to display intrusive adverts.
</div>
<div id="pariterlogo" style="padding-top: 50px;">
  <img id="pariterlogo" src="http://i.imgur.com/jbRQ6Wd.png" width="720" style="display: block;margin-left: auto;margin-right: auto;" />
</div>

edited Sep 8, 2016 at 16:41

answered Sep 8, 2016 at 15:58

Maciej Wiercioch

4113 silver badges7 bronze badges

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

2 Comments

GlitchedNode Over a year ago

This didn't work. I've double-checked and made everything exactly the same as your code snippets, but my website is the same as before.

Maciej Wiercioch Over a year ago

@GlitchedNode You have to execute this code when all the DOM elements are rendered. Use $(document).ready. I have updated the code. Or you can place this code at the bottom of the file, just before the </body> tag.

Collectives™ on Stack Overflow

jQuery isn't modifying CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related