Détection de hauteur div sur le redimensionnement

Question

J'essaie de détecter la hauteur d'un div dans lequel je charge le contenu. Ce div n'a pas de hauteur spécifiée, car je charge des pages et ils remplissent eux-mêmes le div en différentes quantités. Je pense que le code que j'utilise ne fonctionne pas.

Le #content div obtient la bonne taille sur document load, mais je ne peux pas obtenir la hauteur lorsque l'événement load est cliqué.

html:

<div id="select"> 
<div id="menu"> 
    <ul> 
    <li><a class="load" href="javascript:void(0)" id="p1">P1</a></li> 
    <li><a class="load" href="javascript:void(0)" id="p2">P2</a></li> 
    </ul> 
</div> 
<div id="spacer"></div> 
<div id="content"></div> 

css:

#content { 
    left: 227px; 
    top: 20px; 
    width: 703px; 
    padding: 0 0 100px 0; 
    position: absolute; 
} 

#spacer { 
    border-right: 2px solid #000000; 
    left: 10px; 
    position: absolute; 
    top: 710px; 
    width: 215px; 
} 

mon jquery:

$(document).ready(function() { 
    //Load Initial Content 
    $("#content").html('<ul><li>Loading Content...</li></ul>') 
     .load("/content/" + "projects.php", null, function() { 
      contentHeight = $("#content").height(); 
      selectHeight = $("#select").height(); 

      $("#content").height(contentHeight); 
      $("#select").height(selectHeight); 
      $("#spacer").height((contentHeight - selectHeight - 40) + "px") 
         .css({"top": selectHeight + 40 + "px" }); 
      }); 

    //Load content on click function 
    $(".load").click(function(){ 
     loadName = $(this).attr("id"); 
     $("#content").html('<ul><li>Loading Content...</li></ul>') 
        .load("/content/" + loadName + ".php", null, function(){ 
         contentHeight = $("#content").height(); 
         selectHeight = $("#select").height(); 

         $("#spacer").height(0); 

         if(selectHeight > contentHeight) { 
         $("#spacer").css({"display": "none"}); 
         }else{ 

         $("#spacer").css({"top": selectHeight + 40 + "px", "display": "block" }) 
            .height((contentHeight - selectHeight - 40) + "px"); 
         return false; 
         } 
         }); 
    }); 
}); 

Je reçois cela en Firebug la charge:

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

Maintenant, si je clique sur dire P2, la div avec la hauteur du contenu reste la même, même si le contenu réel à l'intérieur de la div est seulement 625px grand; donc ça ne change pas.

Answer 1

//Get Content size after load 
$("#content").bind("resize", function(){ 
        $("#content").css({"height": $("#content").height()}); 
        }); 

vous n'êtes pas d'ajouter le « px » à la fin de la valeur de la hauteur

//Get Content size after load 
$("#content").bind("resize", function(){ 
        $("#content").css({"height": $("#content").height() + "px"}); 
        }); 

EDIT suit

obtenu fonctionnant localement, vous manque entre parenthèses à la fin de la fonction de hauteur dans l'événement click:

$("#spacer").css({"height": $("#content").height() + "px"}); //added parenthesis enables the #spacer div to change height accordingly 

J'espère que cela aide

Answer 2

Sauf si JQuery est super intelligent (et c'est intelligent mais je ne pense pas que ce soit intelligent), vous n'obtenez pas un événement de redimensionnement car firefox (et probablement Safari) ne supporte que l'événement de redimensionnement l'objet fenêtre. IE prend en charge l'événement resize sur des éléments tels qu'un DIV.

D'où vous avez besoin d'une approche différente: -

$(document).ready(function() 
{ 
    $("#content").html('<ul><li>Loading Content...</li></ul>') 
       .load("/content/" + "projects.php", null, function() 
       { 
       window.setTimeout(content_loaded, 0); 
       }); 

    function content_loaded() 
    { 
    $("#content").css({"height": $("#content").height() + "px"}); 
    } 

    $("#spacer").css({"height": $("#content").height() + "px"}); 

    $(".load").click(function() 
    { 
    loadName = $(this).attr("id"); 

    $("#content").html('<ul><li>Loading Content...</li></ul>') 
       .load("/content/" + loadName + ".php", null, function() 
       { 
        window.setTimeout(content_loaded, 0); }); 
       }); 

    $("#spacer").css({"height": $("#content").height + "px"}); 
    }); 
}); 

Remarque J'utilise la méthode setTimeout ici parce que IE accuse souvent lorsque le tri des paramètres de largeur et de hauteur lorsque le contenu a changé. En utilisant setTimeout, IE permet de trier les choses avant d'accéder aux propriétés height et width. Vous pouvez choisir de l'enlever et de passer directement le content_loaded comme paramètre de rappel à la méthode de chargement.

Answer 3

J'aime utiliser offsetheight pour détecter la hauteur quand elle n'est pas définie.