Yulia V Yulia V - 1 month ago 5
CSS Question

How to update the attribute while overriding a style defined in css?

This question builds on my previous two questions.

I have a css that must be included (

first_style.css
in the snippet below). I have reduced it to
img { height:auto; }
- this is what must be included. I can add any styles before or after. After the images are loaded, I run a script to update the height of the images - see below.

If I do not include
first_style.css
, everything works fine. However, if I include it, as I have to, I cannot find a way to make my script to work. How can I fix it?



$(function() {
$('.images div a img').on('load', function() {
$(this).attr('height', $(this).closest('.images').attr('imgheight'));
});
});

img {
height:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<link rel='stylesheet' href='http://www.yu51a5.com/wp-content/themes/pinboard-child/first_style.css' type='text/css' media='all' />

<div imgheight="300px" class="images">
<div><a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " /></a> </div>
<div><a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg "/></a> </div>
</div>




Answer

Try this:

$(function() {
  $('.images div a img').on('load', function() {
    $(this).css('height', $(this).closest('.images').attr('imgheight'));
  });
});
img {
  height:none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<link rel='stylesheet' href='http://www.yu51a5.com/wp-content/themes/pinboard-child/first_style.css' type='text/css' media='all' />

<div imgheight="300" class="images">
  <div><a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " /></a> </div>
  <div><a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg "/></a> </div>
</div>

Onload event cause that the resizing will be produced when images finish to load, not before.

Comments