there is an element to add a wrapper if the width is less than 700 pixels. I tried to put a flag, but something does not work, tell me how to fix it.

function load() { h = document.documentElement.clientHeight; w = document.documentElement.clientWidth; m = 0; if (m = 0 && w < 700) { $('.art-vmenublockcontent').wrap("<div class='resp'></div>"); m++; } else { m = 0; $('.art-vmenublockcontent').unwrap("<div class='resp'></div>"); } } $(window).resize(load); $(document).ready(load); 
 .art-vmenublockcontent { display: inline-block; position: relative; width: 80px; height: 80px; background: #f48024; } .resp { background: #45a163; display: inline-block; padding: 50px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class='art-vmenublockcontent'></div>

    1 answer 1

    You have an error, in the first case you use the assignment operator "=" instead of the comparison operator "==" (I prefer the strict comparison operator "===").

     function load() { h = document.documentElement.clientHeight; w = document.documentElement.clientWidth; m = 0; // m === 0 - операция сравнения переменной m со значением "0" if (m === 0 && w < 700) { $('.art-vmenublockcontent').wrap("<div class='resp'></div>"); m++; } else { m = 0; $('.art-vmenublockcontent').unwrap("<div class='resp'></div>"); } } $(window).resize(load); $(document).ready(load);

    But, your code can be simplified, since the use of the flag in this case is redundant. Can be done as follows:

     function load() { var browserWidth = document.documentElement.clientWidth, respDiv = "<div class='resp'></div>"; if (browserWidth < 700) { $('.art-vmenublockcontent').wrap(respDiv); } else { $('.art-vmenublockcontent').unwrap(respDiv); } } $(window).resize(load); $(document).ready(load);
    • if you remove the flag, then everything works for me, but each time when the window is resized, one more wrapper is added. The question is to add it once. Check your code, in your case wrap is added constantly - Yevgeny Shevtsov