css - Javascript change size of div if blank or not -
i want div have height 59% when has content , disappear when blank.
more explain in photo: 
i use javascript do, , try many ways nothing happen. here code:
<%--html--%> <div id="main"> <div id="content1"> </div> <div id="down"> </div> </div> <%--css: in css file--%> #main {width:84%;height:78%;position:absolute;left:8%; top:14%; } #content1 {width: 100%;height: 59%;overflow: auto;} #down {margin-top:0.5%;width: 100%;height: 40%;} <script type="text/javascript"> if ($("#content1").length < 1) { $("#content1").height = 0%; $("#down").height = 100%; } else { $("#content1").height = 59%; $("#down").height =40%; } </script>
there few issues notice... first javascript should called after document has completed loading - want place within a
$(document).ready(function(){ ... }); second use jquery make assignments .css({...}) function.
also definately worth mentioning conditional statement
if ($("#content1").length < 1) is checking number of elements '#content1' contains, if wanted check length of string of html within element use .html().
putting together, end result should like
$(document).ready(function(){ if ($("#content1").length < 1) { $("#content1").css('height', '0%'); $("#down").css('height', '100%'); } else { $("#content1").css('height', '59%'); $("#down").css('height', '40%'); } }); using css function of jquery way override existing styles ones set. script called once after dom loaded first time - long content on page isn't changing should function properly
enjoy
Comments
Post a Comment