All geek questions in one place

How can I calculate each of the three elements in a row, can have a width of 300 pixels?

I am trying to make my own framework using flexbox. The biggest headache of flexbox when there is an odd number of elements in a line: 3, 5, 7. Therefore, I want to solve it with js / jq. For example, if the width of an element is 300 pixels or less, the element becomes 100% of the width. I am using jq code:

function check() { var window = $(document).outerWidth(); var width = $('.one-third').outerWidth(); if ( width < 300 ) { $('.one-third').addClass('one-third-full') } else { $('.one-third').removeClass('one-third-full') } $('.one-third').text(width) }

But the problem is that the function sets the width of the element to 100% according to the CSS rule, the script recounts according to its IF statement, and the elements start to blink. Can someone help me solve this problem? The code is in the snippet.

 function check() { var window = $(document).outerWidth(); var width = $('.one-third').outerWidth(); if ( width < 300 ) { $('.one-third').addClass('one-third-full') } else { $('.one-third').removeClass('one-third-full') } $('.one-third').text(width) } $(document).ready(function() { check() }); $(window).resize(function() { check() }); 
 body { background: #C38D94; font-family: 'Arvo', serif; } .fbox { display: flex; flex-flow: row wrap; } .one-half:after, .one-third:after, .one-four:after, .one-five:after, .one-six:after { position: absolute; top: 0; right: 0; } .one-half:after { content: '2'; } .one-third:after { content: '3'; } .one-four:after { content: '4'; } .one-five:after { content: '5'; } .one-six:after { content: '6'; } .one-half, .one-third, .one-four, .one-five, .one-six{ position: relative; padding: 30px; background: #565676; margin: 1px; text-align: center; color: #fff; box-sizing: border-box; } .one-half { flex: 1 calc(50% - 4px); min-width: 300px; } .one-third { flex: 1 calc(30% - 4px); } .one-four { flex: 1 calc(25% - 4px); } .one-five { flex: 1 calc(20% - 4px); } .one-six { flex: 1 calc(15% - 4px); } .one-third-full { flex: 1 100%; } .to-column { flex-flow: column } @media only screen and (max-width : 640px) { } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fbox dns"> <div class="one-third"></div> <div class="one-third"></div> <div class="one-third"></div> </div> <div class="fbox"> <div class="one-half"></div> <div class="one-half"></div> </div> <div class="fbox"> <div class="one-third"></div> <div class="one-third"></div> <div class="one-third"></div> </div> <div class="fbox"> <div class="one-four"></div> <div class="one-four"></div> <div class="one-four"></div> <div class="one-four"></div> </div> <div class="fbox"> <div class="one-five"></div> <div class="one-five"></div> <div class="one-five"></div> <div class="one-five"></div> <div class="one-five"></div> </div> <div class="fbox"> <div class="one-half"></div> <div class="one-five"></div> <div class="one-third"></div> </div> <div class="fbox"> <div class="one-four"></div> <div class="one-third"></div> <div class="one-half"></div> </div> <div class="fbox"> <div class="one-four"></div> <div class="one-four"></div> <div class="one-four"></div> <div class="one-four"></div> </div> <div class="fbox"> <div class="one-six"></div> <div class="one-six"></div> <div class="one-six"></div> <div class="one-six"></div> <div class="one-six"></div> <div class="one-six"></div> </div> </div> <div class="truth"></div>
+5
source share
2 answers

You do not need JavaScript / jQuery code for this. In this case, just use CSS multimedia queries to handle resizing.

The knowledge of the elements should be 100% wide, if the screen is smaller than 900px wide ( 900px / 3 = 300px ), you can use a media query that determines the width.

Fiddle (containing full example): http://jsfiddle.net/gfsb82p9/

CSS

 @media only screen and (max-width: 900px) { .one-third { flex: 1 100%; } }
+4
source

If you want to continue to use the jQuery method, you need to check the width of the window, not the element, since the width of the element exceeds 300 pixels when adding a class.

See the modified code below.

 function check() { var windowWidth = $('body').outerWidth(); var width = $('.one-third').outerWidth(); if (windowWidth < 900) { console.log(windowWidth); if ($('.one-third').hasClass('one-third-full') != true) { $('.one-third').addClass('one-third-full'); } } else { console.log(width); if ($('.one-third').hasClass('one-third-full')) { $('.one-third').removeClass('one-third-full'); } } $('.one-third').text(width) } $(document).ready(function() { check() }); $(window).resize(function() { check() }); 
 body { background: #C38D94; font-family: 'Arvo', serif; } .fbox { display: flex; flex-flow: row wrap; } .one-half:after, .one-third:after, .one-four:after, .one-five:after, .one-six:after { position: absolute; top: 0; right: 0; } .one-half:after { content: '2'; } .one-third:after { content: '3'; } .one-four:after { content: '4'; } .one-five:after { content: '5'; } .one-six:after { content: '6'; } .one-half, .one-third, .one-four, .one-five, .one-six { position: relative; padding: 30px; background: #565676; margin: 1px; text-align: center; color: #fff; box-sizing: border-box; } .one-half { flex: 1 calc(50% - 4px); min-width: 300px; } .one-third { flex: 1 calc(30% - 4px); } .one-four { flex: 1 calc(25% - 4px); } .one-five { flex: 1 calc(20% - 4px); } .one-six { flex: 1 calc(15% - 4px); } .one-third-full { flex: 1 100%; } .to-column { flex-flow: column } @media only screen and (max-width: 640px) {} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fbox dns"> <div class="one-third"></div> <div class="one-third"></div> <div class="one-third"></div> </div> <div class="fbox"> <div class="one-half"></div> <div class="one-half"></div> </div> <div class="fbox"> <div class="one-third"></div> <div class="one-third"></div> <div class="one-third"></div> </div> <div class="fbox"> <div class="one-four"></div> <div class="one-four"></div> <div class="one-four"></div> <div class="one-four"></div> </div> <div class="fbox"> <div class="one-five"></div> <div class="one-five"></div> <div class="one-five"></div> <div class="one-five"></div> <div class="one-five"></div> </div> <div class="fbox"> <div class="one-half"></div> <div class="one-five"></div> <div class="one-third"></div> </div> <div class="fbox"> <div class="one-four"></div> <div class="one-third"></div> <div class="one-half"></div> </div> <div class="fbox"> <div class="one-four"></div> <div class="one-four"></div> <div class="one-four"></div> <div class="one-four"></div> </div> <div class="fbox"> <div class="one-six"></div> <div class="one-six"></div> <div class="one-six"></div> <div class="one-six"></div> <div class="one-six"></div> <div class="one-six"></div> </div> </div> <div class="truth"></div>
+2
source

Source: https://habr.com/ru/post/1238242/

More articles:


All Articles