javascript - how to hide a div when the width in pixels change -
is possible hide div when width changes? know can bootstrap need somehow without it. need display:none when increase , needs display:block when returned 612px
<div id="grid" style="width:612px"></div>
you'd want write checks width , shows/hides based on width:
function checkgridwidth() { var gridwidth = $('#grid').width(); if(gridwidth == 612){ $('#grid').show(); }else{ $('#grid').hide(); } }; you'll want check width on document ready when events happen, such window width resizes or maybe clicks?? not sure affect width:
$(document).ready(function() { checkgridwidth(); }); $( window ).resize(function() { checkgridwidth(); }); $('#someelement').click(function() { checkgridwidth(); }); edit based on comments op, need event handler allow #grid collapsed when element expanded...
see: http://demos.telerik.com/kendo-ui/splitter/api
and: http://demos.telerik.com/kendo-ui/splitter/events
$(document).ready(function() { function collapseothersplitter() { splitter.size(indexofpane, 0);// indexofpane index of pane want collapse } function onexpand(e) { collapseothersplitter(); } // 1 of top, horizontal splitters want collapse when vertical splitter expands: var splitter = $("#horiz-splitter").kendosplitter({ orientation: "horizontal", panes: [ { collapsible: true, size: "50%" }, ], }); // bottom, vertical splitter $("#vertical-splitter").kendosplitter({ orientation: "vertical", panes: [ { collapsible: true, size: "100px" }, ], expand: onexpand, }); });
Comments
Post a Comment