用于检查页面高度的jquery代码似乎无法正常工作

时间:2010-09-22 05:52:14

标签: javascript jquery html css dom

我这里有一小段jqery代码:

<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 is higher than window height :)
    if ($(document).height() > $(window).height()) {
       // alert("Vertical Scrollbar! D:");
    hasVBar="y";
    }

    // Check if body width is higher than window width :)
    if ($(document).width() > $(window).width()) {
        //alert("Horizontal Scrollbar! D:<");
  hasHBar="n";
    }
});
</script>

现在在我的html页面中,第一个div高度为200px,低于另一个div,每个div包含3个不同的div。我通过javascript onclick显示隐藏这3个段落。问题是即使这3个div处于隐藏状态(显示:无和可见性:隐藏),垂直滚动条也会显示出来。我希望只有当这3个div的任何组合足以使文档的高度高于窗口高度时,我才会弹出垂直滚动条。 Atleast最初打开页面时(所有3个div处于隐藏状态)。

我希望我能够清楚地查询。 有什么建议 ??? 谢谢...提前...

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>

2 个答案:

答案 0 :(得分:0)

这是因为你为每个div定义了一个高度。 因此即使它们不可见,它们仍然应该占据那个空间。

如果没有高度,div应该在可见时展开以适合您的内容,并在隐藏时消失。

答案 1 :(得分:0)

使用以下声明:

$(document).ready( function () {
    if (window.innerHeight < document.body.scrollHeight)
        alert('Vertical Scroll Bar !!!')
    else alert ('No vertical scroll bar!');
});

示例:http://zequinha-bsb.int-domains.com/windowvsbrowserheight.html