One div acts as a category, while the other contains a series of photos.
I had an idea to create a feature where clicking on an image would cause the first div to move 0.7 of the screen width to the right and all images in the second div would disappear. So, I implemented the following code:
$(document).ready(function() {
$("img").click(function() {
var my_width = screen.width * 0.7;
$(".second_div").find("img").hide();
$(".first_div").css({
"transform": "translate(" + my_width + "px,0px)",
"-webkit-transform": "translate(" + my_width + "px,0px)",
"-ms-transform": "translate(" + my_width + ",0px)"
});
});
});.first_div {
transition-duration: 2s;
}<div class="first_div col-md-1">
//some code
</div>
<div class="second_div col-md-11>
//some codes
</div>Initially, the functionality worked as expected with full-screen display. However, upon resizing the window and trying again, the first div did not align at the correct position (0.7 of the screen width). What could be causing this issue?