i want window shrinks fit current window. fiddle close want achieve. use resize output window vertically until blue line gets cutoff. reverse process. however, want continue work if there padding and/or other elements on page.
<div id="output"></div> <div id="sample" class="sampleclass"> <div>hello</div> <div>hello</div> <div>hello</div> <div>hello</div> <div>hello</div> <div>hello</div> </div> window.addeventlistener("resize", updatedimensions); var originalheight = document.getelementbyid('sample').offsetheight; var safebuffer = 15; function updatedimensions(){ var node = document.getelementbyid('sample'); var windowdimensions = {width: window.innerwidth, height: window.innerheight}; var dimensions = node.getboundingclientrect(); var nodebottom = dimensions.bottom; var nodeheight = node.offsetheight; var nodetop = dimensions.top; var windowheight = windowdimensions.height; var windowiscutoff = windowheight <= nodebottom; var windowisshowing = windowheight >= nodetop; console.log('windowheight: ' + windowheight + ' safebuffer: ' + safebuffer); console.log('nodeheight: ' + nodeheight + ' originalheight: ' + originalheight); var nodecangrowbigger = (windowheight - safebuffer - 10) > nodeheight && nodeheight < originalheight; console.log('nodecangrowbigger: ' + nodecangrowbigger); if(windowisshowing && windowiscutoff) { console.log('do work'); shrinkwindow(nodebottom, windowheight, nodeheight); } if(nodecangrowbigger){ growwindow(nodebottom, windowheight, nodeheight); } } function growwindow(nodebottom, windowheight, nodeheight){ var node = document.getelementbyid('sample'); var originalheight = nodeheight; var offset = nodeheight - windowheight; var newheight; if(offset >= -safebuffer && offset <= safebuffer){ newheight = originalheight; } else if(offset >= 0){ newheight = originalheight + offset; console.log('positive calculation originalheight: ' + originalheight + ' offset: ' + offset + ' newheight: ' + newheight); }else{ newheight = originalheight - offset; console.log('negative', newheight); } node.style.height = newheight + 'px'; console.log('height attmpted changed to', newheight); console.log('height offset', node.offsetheight); console.log('height style', node.style.height); } function shrinkwindow(nodebottom, windowheight, nodeheight) { var node = document.getelementbyid('sample'); var originalheight = nodeheight; //console.log('originalheight', originalheight); //console.log('nodebottom:' + nodebottom + ' windowheight: ' + windowheight); var offset = nodeheight - windowheight; //console.log('offset', offset); var newheight; if(offset >= -safebuffer && offset <= safebuffer){ newheight = originalheight - (safebuffer + 1); } else if(offset >= 0){ newheight = originalheight - offset; //console.log('positive calculation originalheight: ' + originalheight + ' offset: ' + offset + ' newheight: ' + newheight); }else{ newheight = originalheight + offset; //console.log('negative', newheight); } node.style.height = newheight + 'px'; /* console.log('height attmpted changed to', newheight); console.log('height offset', node.offsetheight); console.log('height style', node.style.height); */ } .sampleclass { padding: 0px; height: 300px; overflow-y: auto; border: solid blue; //margin: 10px 300px 10px 25px; margin: 0px position: 'relative' } this javascript solution came feels overly complex. doesn't solve things padding, or more content on page either. can solve problem plain old css or js extension?
i know kendo ui has effect in modal windows (at least in 5 year old version use). i'm not open using kendo.
difficult if work situation ... @ following touch-up. use more work, think point in direction heading:
function updatedimensions(){ var node = document.getelementbyid('sample'); var windowdimensions = {width: window.innerwidth, height: window.innerheight}; var dimensions = node.getboundingclientrect(); var nodebottom = dimensions.bottom; var nodeheight = node.offsetheight; var nodetop = dimensions.top; var windowheight = windowdimensions.height; var windowiscutoff = windowheight <= nodebottom; var windowisshowing = windowheight >= nodetop; console.log('windowheight: ' + windowheight + ' safebuffer: ' + safebuffer); console.log('nodeheight: ' + nodeheight + ' originalheight: ' + originalheight); var nodecangrowbigger = (windowheight - safebuffer - 10) > nodeheight && nodeheight < originalheight; console.log('nodecangrowbigger: ' + nodecangrowbigger); if ( (windowisshowing && windowiscutoff) || nodecangrowbigger ) { growwindow(nodetop, windowheight, nodeheight); } } function growwindow(nodetop, windowheight, nodeheight){ var node = document.getelementbyid('sample'); var offset = windowheight - ( nodetop + nodeheight + safebuffer ); var newheight = nodeheight + offset; node.style.height = newheight + 'px'; } as can see, use nodetop instead of nodebottom calculation , used combination of nodetop, nodeheight , safebuffer indicate bottom of node, used difference of window offset. should work regardless of whether you're shrinking or expanding window.
Comments
Post a Comment