Divs don't know about screen resizing

Question

The first div is a category, and the second div contains several photos.

I wanted to do something that when the user clicks on the image, the first div moves 0.7 of the screen width to the right and all the images in the second div disappear, so I wrote:

$(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> 

When its full screen works correctly, but when I resize the window and try again, the first div will not be where it should (0.7 of the width of the screen). What's wrong?

Answer 1

for the width of the window, I would use the following:

 var my_width = document.documentElement.clientWidth * 0.7; 

this is the same (cross-browser) solution used by jQuery $.width()

For more information on the various methods for obtaining widths, see the link.

Answer 2

Try using the internal width of the window instead of the width of the screen so that it is relative to the size of the viewport. replace

 var my_width = screen.width * 0.7 ; 

with:

 var my_width = window.innerWidth * 0.7 ; 

See an example here:

http://codepen.io/anon/pen/jWWEKO