Having trouble with jQuery height auto-adjust

Question

I have a page in SharePoint that contains both a local and global content. For the local content, we use a customized editor web part (Telerik). For the global content, I had jQuery write the contents from an external file in a global repository.

Now, the local and global contents are presented via an unordered list.To make the local and global content look seamless, I have the jQuery auto-adjust the position of the local and global containers:

In this page, Content Owners should be able to edit local content as they please, and that's doable via the Telerik web part:

However, once the changes are saved, the elements become muddled:

I'll need to hit refresh in order to put the elements into place. Sometimes, it's not even necessary to edit the page to get that bug. Sometimes, going to the page for the first time also muddles the positions of the elements. And like before, you'll need to refresh the page. and it's inconsistent. sometimes, you only have to refresh once. Other times, it takes a few refreshes.

Here's the code I have for the page:

<script lang="en" type="text/jscript">

  function changePos(src,tgt) {
      var pos = $(src).height() + 20 + "px";
      $(tgt).css({top: pos});
  }

  function changeIndex (src){
      switch(src)
        {
          case "buy":
            $("#buy").css("z-index","3");
            $("#comp").css("z-index","2");
            $("#travel").css("z-index","1");
            //alert("Buy");
            break;
          case "comp":
            $("#comp").css("z-index","3");
            $("#buy").css("z-index","2");
            $("#travel").css("z-index","1");
            //alert("Comp");
            break;
          case "travel":
            $("#travel").css("z-index","3");
            $("#comp").css("z-index","2");
            $("#buy").css("z-index","1");
            //alert("Travel");
            break;
          case "comm":
            $("#comm").css("z-index","3");
            $("#fclts").css("z-index","2");
            $("#dept").css("z-index","1");
            //alert("Comm");
            break;
          case "fclts":
            $("#fclts").css("z-index","3");
            $("#comm").css("z-index","2");
            $("#dept").css("z-index","1");
            //alert("Facilities");
            break;
          case "dept":
            $("#dept").css("z-index","3");
            $("#fclts").css("z-index","2");
            $("#comm").css("z-index","1");
            //alert("Dept");
            break;
          case "career":
            $("#career").css("z-index","3");
            $("#pay").css("z-index","2");
            $("#time").css("z-index","1");
            //alert("Career");
            break;
          case "pay":
            $("#pay").css("z-index","3");
            $("#career").css("z-index","2");
            $("#time").css("z-index","1");
            //alert("Pay");
            break;
          case "time":
            $("#time").css("z-index","3");
            $("#pay").css("z-index","2");
            $("#career").css("z-index","1");
            //alert("Time");
            break;
        }
      }     

  $(document).ready(function(){
      var path = window.location.pathname;
      var filename = path.match(/.*\/([^/]+)\.([^?]+)/i)[1];    

      switch(filename){
          case "EmployeeResourcesAUS":
            $("#locDir").text("Austin Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;
          case "EmployeeResourcesCLG":
            $("#locDir").text("Calgary Phone Directory");
            $("#locDir").attr("href","https://webkc.kenonic.com/directory/Phonelist/PhoneList.pdf");
            break;
          case "EmployeeResourcesMDW":
            $("#locDir").text("Midwest Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesLLLP":
            $("#locDir").text("Austin LLLP Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesWSC":
            $("#locDir").text("West Coast Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesGCEC":
            $("#locDir").text("Gulf Coast EC Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesKNX":
            $("#locDir").text("Knoxville Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;      
          case "EmployeeResourcesBDN":
            $("#locDir").text("Bradenton Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;      
          case "EmployeeResourcesSG":
            $("#locDir").text("Singapore Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesCR":
            $("#locDir").text("Costa Rica Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesPH":
            $("#locDir").text("Philippines Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;                                                                  
        }

      changePos("#buy","#comm");
      changePos("#comp","#fclts");
      changePos("#travel","#dept");

      var intA = $("#buy").height() + $("#comm").height();
      var intB = $("#comp").height() + $("#fclts").height();
      var intC = $("#travel").height() + $("#dept").height();

      if (intA > intB && intA > intC){
          var intH = intA + 40;
          var pxlH = intH + "px";

          $("#colBuy").css({height: pxlH});
      }
      else if (intB > intA && intB > intC){
          var intH = intB + 40;
          var pxlH = intH + "px";

          $("#colBuy").css({height: pxlH});        
      }
      else{
          var intH = intC + 40;
          var pxlH = intH + "px";

          $("#colBuy").css({height: pxlH});
      }      

      var intD =  $("#career_content").height(); 
      var intE =  $("#pay_content").height();
      var intF =  $("#time_content").height();
      var pxlD

      if (intD > intE && intD > intF) {
          pxlD = intH + intD + 300 + "px";
      }
      else if (intE > intD && intE > intF) {
          pxlD = intH + intE + 300 + "px";
      }
      else {
          pxlD = intH + intF + 300 + "px";
      }

      $("#emp_rsrcs").css({height: pxlD});

      //contentDisp("/systems_hr/onboarding/Custom%20Pages/Employee%20Resources%20EN/gblEMPv2-1.html","#gblContent1");
      //$("#gblContent1").load("/systems_hr/onboarding/Custom%20Pages/Employee%20Resources%20EN/gblEMPv2-1.html");
    }

    );

</script>

What part of the code is making that malady? Also, if you happen to know a much, much better alternative to what I'm doing, I'm all ears. I'm new to jQuery, BTW, so please bear with me :(

Update:

I seem to have found the bug. What happens is that the height of my global content div is sometimes left out, possibly because the changePos function is triggered before the global content successfully loads. So for example, in the Buying & Shipping section, the local content (#locContent1) is 109px in height and the global content (#gblContent1) is 189px. That means that the whole div (#buy) should have a total height of 298px. More often than not, the changePos function only gets to recognize the local content height, so changePos only amounts to 129px, causing my target div (#comm) to overlap its position (like in image 3). So it means that the function is triggered before the global content loads.

How do I tell jQuery to use the changePos function only after my global content successfully loads?

Update 2

jQuery reads my global content DIV to having a height of 0 even after the content loads. How do I determine the new height? Or should I just specify a fixed height?

Answer 1

is there any css associated with this? i think you are missing position attribute and also for the local content web part are you setting a height attribute? if not you may try setting the height attribute too