javascript-在调整大小时检测div高度

前端之家收集整理的这篇文章主要介绍了javascript-在调整大小时检测div高度 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在尝试检测将内容加载到的div的高度.此div没有指定的高度,因为我正在向其中加载页面,它们本身以不同的数量填充div.我认为我使用的代码无法正常工作.

#content div在加载文档时获得正确的高度,但是单击加载事件时我无法获得该高度.

HTML

  1. <div id="select">
  2. <div id="menu">
  3. <ul>
  4. <li><a class="load" href="javascript:void(0)" id="p1">P1</a></li>
  5. <li><a class="load" href="javascript:void(0)" id="p2">P2</a></li>
  6. </ul>
  7. </div>
  8. <div id="spacer"></div>
  9. <div id="content"></div>

CSS:

  1. #content {
  2. left: 227px;
  3. top: 20px;
  4. width: 703px;
  5. padding: 0 0 100px 0;
  6. position: absolute;
  7. }
  8. #spacer {
  9. border-right: 2px solid #000000;
  10. left: 10px;
  11. position: absolute;
  12. top: 710px;
  13. width: 215px;
  14. }

我的jQuery:

  1. $(document).ready(function() {
  2. //Load Initial Content
  3. $("#content").html('<ul><li>Loading Content...</li></ul>')
  4. .load("/content/" + "projects.PHP",null,function() {
  5. contentHeight = $("#content").height();
  6. selectHeight = $("#select").height();
  7. $("#content").height(contentHeight);
  8. $("#select").height(selectHeight);
  9. $("#spacer").height((contentHeight - selectHeight - 40) + "px")
  10. .css({"top": selectHeight + 40 + "px" });
  11. });
  12. //Load content on click function
  13. $(".load").click(function(){
  14. loadName = $(this).attr("id");
  15. $("#content").html('<ul><li>Loading Content...</li></ul>')
  16. .load("/content/" + loadName + ".PHP",function(){
  17. contentHeight = $("#content").height();
  18. selectHeight = $("#select").height();
  19. $("#spacer").height(0);
  20. if(selectHeight > contentHeight) {
  21. $("#spacer").css({"display": "none"});
  22. }else{
  23. $("#spacer").css({"top": selectHeight + 40 + "px","display": "block" })
  24. .height((contentHeight - selectHeight - 40) + "px");
  25. return false;
  26. }
  27. });
  28. });
  29. });

正在加载中的萤火虫中得到这个:

  1. <div id="select" style="height: 689px;"/>
  2. <div id="spacer" style="height: 5461px; top: 729px;"/>
  3. <div id="content" style="height: 6190px;"/>

现在,如果我点击说P2,即使div内的实际内容只有625px高,其内容高度的div仍保持不变.因此它不会被切换.

最佳答案
除非JQuery非常聪明(而且它很聪明,但我认为它不那么聪明),否则您不会收到resize事件,因为Firefox(可能还有Safari)仅支持window对象上的resize事件. IE确实支持DIV等元素的resize事件.

因此,您需要一种不同的方法

  1. $(document).ready(function()
  2. {
  3. $("#content").html('<ul><li>Loading Content...</li></ul>')
  4. .load("/content/" + "projects.PHP",function()
  5. {
  6. window.setTimeout(content_loaded,0);
  7. });
  8. function content_loaded()
  9. {
  10. $("#content").css({"height": $("#content").height() + "px"});
  11. }
  12. $("#spacer").css({"height": $("#content").height() + "px"});
  13. $(".load").click(function()
  14. {
  15. loadName = $(this).attr("id");
  16. $("#content").html('<ul><li>Loading Content...</li></ul>')
  17. .load("/content/" + loadName + ".PHP",function()
  18. {
  19. window.setTimeout(content_loaded,0); });
  20. });
  21. $("#spacer").css({"height": $("#content").height + "px"});
  22. });
  23. });

注意我在这里使用setTimeout方法,因为当内容更改时,IE在整理宽度和高度参数时经常滞后.通过使用setTimeout,它可以使IE在访问height和width属性之前对它们进行排序.您可以选择删除它,并将content_loaded作为回调参数直接传递给load方法.

猜你在找的HTML相关文章