javascript - Floating divs glitch on resize in Chrome and Edge -

-

does know how fix problem. browser works correctly firefox; in chrome , edge doesn't work. when resize screen box changes position. there solution?

screenshot

enter image description here

html

<div class="box" style="background:#f00; height:200px;"></div> <div class="box" style="background:#f0f; width:25%"></div> <div class="box" style="background:#ff0; width:25%"></div> <div class="box" style="background:#00f; width:25%"></div> <div class="box" style="background:#55f; width:25%"></div>

css

.box {   width: 50%;   height: 100px;   float: left }

javascript

$(window).resize(resize)  function resize() {   $(".box").each(function() {     $(this).height( $(this).width() * 0.5)   }); }

here's codepen link: http://codepen.io/tufik/pen/rxyqmv

update---------

i modified codepen show more complex structure. problem when resize screen browser, divs don't respect correct position, divs jump next line.

this old problem. think it's because html not pixel perfect. want know if there easy solution different use masonry.js or plugins. firefox work great, chrome or edge not.

problem: unpredictable browser rounding of integers

each browser calculates numbers differently. widths , heights, browser rounds nearest integer layout. so, computed pixel-width of each floated box may have different initial value after converting percentage , filling out container. calculating on these numbers can lead unpredictable results.

here example of how values being calculated in setup (resize browser , watch values change):

function resize() {    $(".box").each(function() {      var height = $(this).width() * 0.5;      $(this)        .height(height)        .html("<code>height: " + $(this).height() + "px (rounded " + height + ")</code>");    });  }    $(window).resize(resize);  resize();
.box { float: left; }  .box-large {    width: 50%;    height: 200px;  }  .box-small {    width: 25%;    height: 100px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="box box-large" style="background:#f00;"></div>  <div class="box box-small" style="background:#f0f;"></div>  <div class="box box-small" style="background:#ff0;"></div>  <div class="box box-small" style="background:#00f;"></div>  <div class="box box-small" style="background:#55f;"></div>

solution: uniformly apply own rounded integer

one way solve create own new height value, round whole integer , apply uniformly each box instead of applying decimal value , relying on browser rounding. best way calculate new height value 1 box , apply others, instead of doing calculation on each.

because have 2 different sized boxes, calculation twice: once large box , once small box. calculated large height value gets applied large boxes (only 1 in case) , calculated small height value gets applied small boxes.

example:

function resize() {    var $larges  = $('.box-large'),   // large boxes        $lgfirst = $($larges.get(0)), // first large box        lgheight = math.floor(        // round down before browser screws          $lgfirst.width() / 2        // calculate new height        ),        $smalls  = $('.box-small'),   // small boxes        $smfirst = $($smalls.get(0)), // first small box        smheight = math.floor(        // round down before browser screws          $smfirst.width() / 2        // calculate new height        ),                // function returns function keep things dry        setheight = function(height) {                    // function returned .each() call later          return function () {            $(this)              .height(height)              .html("<code>height: " + height + "px</code>");           }        };        // set height of large boxes new large height    $larges.each(setheight(lgheight));        // set height of small boxes new small height    $smalls.each(setheight(smheight));  }    $(window).resize(resize);  resize();
.box { float: left; }  .box-large {    width: 50%;    height: 200px;  }  .box-small {    width: 25%;    height: 100px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="box box-large" style="background:#f00;"></div>  <div class="box box-small" style="background:#f0f;"></div>  <div class="box box-small" style="background:#ff0;"></div>  <div class="box box-small" style="background:#00f;"></div>  <div class="box box-small" style="background:#55f;"></div>


Comments

Post a Comment

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di
Read more

c - Unrecognised emulation mode: elf_i386 on MinGW32 -

-
i'm trying make kernel, , cannot link c output assembly. ld . i'm getting error: unrecognized emulation mode: elf_i386 i'm using windows 10 professional mingw32 , msys. code using: link.ld /* * link.ld */ output_format(elf32-i386) entry(start) sections { . = 0x100000; .text : { *(.text) } .data : { *(.data) } .bss : { *(.bss) } } kernel.c /* * kernel.c */ void kmain(void) { const char *str = "my first kernel"; char *vidptr = (char*)0xb8000; //video mem begins here. unsigned int = 0; unsigned int j = 0; /* loops clears screen * there 25 lines each of 80 columns; each element takes 2 bytes */ while(j < 80 * 25 * 2) { /* blank character */ vidptr[j] = ' '; /* attribute-byte - light grey on black screen */ vidptr[j+1] = 0x07; j = j + 2; } j = 0; /* loop writes string video memory */ while(str[j] != '\0') { /
Read more