javascript - jquery code to check page height not seem working correctly -
i have lil piece of jqery code here:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> hasvbar=""; hashbar=""; $(document).ready(function() { // check if body height higher window height :) if ($(document).height() > $(window).height()) { // alert("vertical scrollbar! d:"); hasvbar="y"; } // check if body width higher window width :) if ($(document).width() > $(window).width()) { //alert("horizontal scrollbar! d:<"); hashbar="n"; } }); </script>
now in html page first div 200px in height, below div contains 3 paras each in different div. show hide these 3 paras javascript onclick. problem if these 3 divs in hidden state (display:none , visibility:hidden) vertical scroll bar shows up. expecting vertical scrollbar pop if combination of 3 divs sufficient enough make height of document higher window height. atleast when page opened (all 3 divs in hidden state then).
i hope have been able make query clear. suggestions ??? thanks.. in advance...
window.onload=function starterjobs(){ document.getelementbyid('abtpri').style.visibility='hidden'; document.getelementbyid('abtpri').style.display='none'; } <script type="text/javascript"> function hidepara(whichid) { showhide = document.getelementbyid(whichid).style.display; if (showhide=='block') { document.getelementbyid(whichid).style.display='none'; document.getelementbyid(whichid).style.visibility='hidden'; } else { document.getelementbyid(whichid).style.display='block'; document.getelementbyid(whichid).style.visibility='visible'; } } </script> <div style=" position:relative;background:none; width:auto; height:25px; padding:10px 0px 10px 0px;"> <div style="position:relative; top:0px; left:0px; background:transparent url(lftarw.gif) no-repeat; width:25px; height:25px; cursor:pointer" onclick="hidepara('abtpri'); "></div> <div id="printing1" class="h1type4" style="position:relative; top:-25px; left:25px; background-color:none; width:auto; height:20px; padding-top:5px; margin-right:25px;">printing</div> </div> <div id="abtpri" style="padding-left:25px;"> ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div>
that because define height each of divs. though not visible, still should take space.
with no height, div should expand fit content when visible , disappear when hidden.
Comments
Post a Comment