GlitchedNode GlitchedNode - 2 months ago 17
CSS Question

jQuery isn't modifying CSS

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>




Answer

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>

Comments