I am working with a grid that contains various elements, each with the class item. When I click on one of these elements, I toggle the class expand to resize the element.
<body>
<div class="grid">
<a href="#">
<div class="item" style="background-image: url('https://i.giphy.com/l0NwI1oBNxYfoRRny.gif'); height: 270px; background-size: cover; background-repeat: no-repeat; position: absolute;">
</div>
</a>
<a href="#">
<div class="item" style="background-image: url('https://i.giphy.com/pYI1hSqUdcBiw.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;">
</div>
</a>
<a href="#">
<div class="item" style="background-image: url('https://i.giphy.com/l3vR58nYgtIUKua1G.gif'); height: 149px; background-size: cover; background-repeat: no-repeat; position: absolute;">
</div>
</a>
<a href="#">
<div class="item" style="background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;">
</div>
</a>
...
</div>
</body>
CSS
.item {
color: white;
display: table;
font-size: 1.4em;
text-align: center;
margin: 5px;
width: 270px;
}
.expand {
transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
-webkit-transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
height: 100% ;
width: 100%;
left: 0 !important;
top: 0 ;
z-index: 99;
text-indent: -9999px;
}
JS
$('.item').click(function() {
$(this).toggleClass('expand');
});
Initially, the width is resized to 100% of the parent size (grid), but the height remains unchanged.
This is the grid view before clicking on any item element
https://i.sstatic.net/8zHQG.jpg
After clicking on the third element
https://i.sstatic.net/urRbF.jpg
The problem arises when trying to change both height and width using the following JS method:
$('.item').click(function() {
var height = $(this).height();
var width = $(this).width();
var act = $(this).hasClass("expand");
if(act) {
$('.expand').css('height', Math.floor($('.grid').width() * height / width) + 'px !important');
$('.expand').css('width', '50% !important');
}
});
However, despite this attempt, the height and width do not change. It seems that the $('.expand').css() method is not applying the new values for some unknown reason.