javascript - resizing divs with jquery crashes window -
i've split page 3 divs , i'm trying set dimensions jquery each div same size window.
my code working after few consecutive window resizes div resize begins lag. lag gets bigger , bigger more resize window until browser window appears crash.
is there can make resize smoother , prevent crash?
here's code:
$(document).ready(function() { sectionsize() function sectionsize() { var w = [] var h = [] var docwidth = $(window).width() var docheight = $(window).height() w.push(docwidth); h.push(docheight); $(".section").css({ "height": h, "width": w }); $(window).on('resize', function() { w.push(docwidth); h.push(docheight); sectionsize() }); } })
body { margin: 0; } .section { position: relative; } .section p { position: absolute; bottom: 5px; left: 45%; } #top { background-color: blue; } #middle { background-color: red; } #bottom { background-color: green; }
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <div class="section" id="top"> <p>next</p> </div> <div class="section" id="middle"> <p>next</p> </div> <div class="section" id="bottom"> <p>next</p> </div> </body> </html>
can not use css height:100vh;
? apply .section
here's fiddle: http://jsfiddle.net/gsgoruja/1/
Comments
Post a Comment