javascript - Dynamically resize a div using jQuery -
i have div (id="maindiv") need dynamically resize if user changes size of browser window. have written following code try , work doesn't seem setting height of div:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> var height = $(window).height(); $("#maindiv").height(height); </script> <body> <div id="maindiv"></div> </body> i don't know jquery, making obvious mistake?
there few things going wrong here:
- your code execute straight away before document has finished loading.
- your code execute on load of the script, not on resize
- you're not setting height of maindiv - you're setting height of element id: accordianmain (but i'm guessing know that).
you need handle browser resize event wait browser resize dimensions of window , apply accordingly. you'd handling window.resize event liks this:
var $win = $(window); $win.on('resize',function(){ $("#maindiv").height($win.height()); }); what want wait for resize finish adding timeout doesn't fire well:
var timer, $win = $(window); $win.on('resize',function(){ cleartimeout(timer); timer = settimeout(function(){ $("#maindiv").height($win.height()); }, 500); });
Comments
Post a Comment