How to wrap then unwrap div when resizing?

Question

I've tried if else statements and it should be fairly simple but I cant seem to reverse the wrap after resizing above 650px.

Basically, I'm trying to get the boxes wrapped in a div when window is below 650 width and then unwrapped after resizing above 650px.

How can I do that?

 $(window).resize(function() { if ($(window).width() < 650) $('.box').wrap("<div class='boxwrap'><div/>") }); $(window).resize(function() { if ($(window).width() > 650) $('.box').unwrap("<div class='boxwrap'><div/>") }); 

  #cat-area { width: 100%; display: inline-block; text-align: center; background-color: red; } #cat-container { background-color: yellow; width: 92.5%; margin: 0 auto; display: flex; justify-content: space-between; } .box { display: inline-block; width: 20%; height: 20%; max-height: 300px; max-width: 300px; min-height: 100px; min-width: 100px; padding: 1%; background-color: #d7d7d7; } @media only screen and (max-width: 650px) { #cat-area { width: 100%; display: block; text-align: center; background-color: red; } #cat-container { background-color: blue; width: 92.5%; display: block; } .box { position: relative; display: block; margin: 4px 0px; } .boxwrap { background-color: #d7d7d7; width: 100%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="cat-area"> <div id="cat-container"> <img class="box" src="http://via.placeholder.com/200x200"> <img class="box" src="http://via.placeholder.com/200x200"> <img class="box" src="http://via.placeholder.com/200x200"> <img class="box" src="http://via.placeholder.com/200x200"> </div> </div> 

Answer 1

I have faced a similar problem to this myself. Here is a simple demonstration of how you can do this:

1. Note the page width initially
2. On resize, after a brief timeout (after resizing has stopped), note the new width
3. Compare the two values to determine whether we should take action or not
4. Reset our width for comparison to the new width, for the next time we resize

Run the following snippet, expand it to full screen, and adjust the browser size to see it working.

 $(function() { var resizeTimer; var initialSize = $(window).width(); $(window).resize(function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { var delayedSize = $(window).width(); // if we resize the page but we don't cross the 650 threshold, do nothing if ((initialSize > 650 && delayedSize > 650) || (initialSize < 650 && delayedSize < 650)) { return } // else if we resize the page and cross the 650 threshold, do something else { if (delayedSize > 650) { $('#cat-container').unwrap('#cat-area'); } else if (delayedSize <= 650) { $('#cat-container').wrap('<div id="cat-area"></div>'); } } initialSize = delayedSize; }, 250); }); }); 

 #cat-area { background-color: gold; padding: 10px; } #cat-container { background-color: slategray; padding: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="cat-area"> <div id="cat-container"> <img class="box" src="http://via.placeholder.com/200x200"> <img class="box" src="http://via.placeholder.com/200x200"> <img class="box" src="http://via.placeholder.com/200x200"> <img class="box" src="http://via.placeholder.com/200x200"> </div> </div>