2011-12-01 96 views
1

我在SharePoint中有一個包含本地和全局內容的頁面。對於本地內容,我們使用定製的編輯器Web部件(Telerik)。對於全局內容,我讓jQuery從全局存儲庫中的外部文件中寫入內容。在jQuery高度自動調整時遇到問題

現在,本地和全球的內容是通過一個無序呈現list.To使當地和全球的內容看起來渾然一體,我有jQuery的自動調節本地和全球集裝箱的位置:

This is what the page looks like, or what it should look like

在這個頁面,內容所有者應該能夠編輯本地內容變就變,而且通過網絡Telerik的部分是可行的:

Edit version of the page. The position of the other elements become muddled

如何以往,一旦改變被保存,這些元素成爲糊塗:

elements in disarray

我需要點擊刷新才能把要素到位。有時,甚至沒有必要編輯頁面來獲得該錯誤。有時候,第一次去頁面也會混淆元素的位置。和以前一樣,您需要刷新頁面。這是不一致的。有時候,你只需刷新一次。其他時候,需要刷新幾次。

下面是我對頁面代碼:

<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> 

哪一部分的代碼是要做出的弊病?另外,如果你碰巧知道一個更好的選擇,我正在做什麼,我全部都是耳朵。我是新來的jQuery,BTW,所以請多多包涵:(

更新:

我似乎找到了錯誤發生什麼事是我的全球內容div的高度有時左可能是因爲changePos函數是在全局內容成功加載之前觸發的,所以例如在Shipping & Shipping部分,本地內容(#locContent1)的高度爲109px,全局內容(#gblContent1)爲189px。意味着整個div(#buy)的總高度應該是298px,通常changePos函數只能識別本地內容高度,所以changePos只有129px,導致我的目標div(#comm)爲重疊位置(如圖3所示)。所以這意味着該函數在全局內容加載之前被觸發。

如何告訴jQuery只有在我的全局內容成功加載後才能使用changePos函數?

更新2

jQuery的讀取我的全球內容DIV到連內容加載後爲0的高度。我如何確定新的身高?或者我應該只指定一個固定的高度?

回答

0

是否有任何與此相關的CSS?我認爲你缺少位置屬性,並且對於本地內容Web部分,你是否設置了高度屬性?如果沒有,你可以嘗試設置高度屬性

+0

感謝這:)是的,有一個CSS代碼來處理設計,但位置是由上面的jQuery代碼動態生成的。而且,是的,我想我忘了添加一個職位屬性。我會添加它,看看會發生什麼,這可能會回答我的問題:)我沒有添加高度屬性到本地內容,因爲我不希望它被修復,因爲我不知道有多少項目內容所有者可以添加。我全力以赴替代品,儘管:) – Poch