I am in need of creating a function that will remove padding from my image-holder element if an image fails to load.
$("img").error(function(){
$(this).css({padding-right:"0px"});
});
.image-holder {
height: 100px;
width: auto;
display: block;
float: left;
top: -4px;
position: relative;
clear: both;
padding-right: 25px;
}
img {
height: 100px;
width: auto;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-title">
<div class="image-holder"><img src="https://vignette.wikia.nocookie.net/arianagrande/images/7/70/Example.png/revision/latest?cb=20160301231046" alt="">
</div>
<div class="cfp-heading">
<p class="cfp-title">Journal Of Network Theory In Finance</p>
<p class="cfp-subtitle">Call for papers</p>
</div>
</div>
Here is the code I have created to address this issue, but it seems to be causing errors. My goal is simply to...
If the image does not load, remove the right-padding (or add padding-right: 0px;). Any assistance would be greatly appreciated