2010-08-16 78 views
6

我在設置我動態加載的元素的高度時有點麻煩。jquery set height after load

我使用jquery load函數將外部(動態)頁面加載到當前頁面上的div(#cbox)中。因爲這個子頁面是動態的,所以我無法事先知道內容的高度。我想在加載內容時獲取高度,並將容器div的高度設置爲匹配,以便我的顏色背景css一路向下。我已經在CSS中嘗試了很多高度爲100%的div,但只要我滾動頁面,顏色就會滾動(100%似乎只設置瀏覽器窗口高度的100%,而b/c內容是動態的我的解決方案是將div的高度設置爲加載內容的高度,但這僅適用於第二次點擊(因爲此時頁面已加載並可訪問,我需要弄清楚如何改變div的高度後,外部頁面已經加載,但我似乎無法弄清楚)

我希望這是一個人可以理解的,我意識到它有點複雜。

這裏是我的onclick代碼:

jQuery('#cbox').load('externalpage.php'); 
jQuery('#cbox').height(jQuery('#content').height()); 

UPDATE: 下面工作的解決方案,如果我想將高度設置爲該分區。但是現在我發現,如果內容高度比窗口高,那麼我只想將它設置爲該div高度。否則,我希望它設置爲100%。我試着修改他們的代碼稍微這個(onlick事件):

jQuery('#cbox').load('<?php the_permalink(); ?>', function() 
    { 
     if (jQuery('#cbox').height() < jQuery('#content').height()) 
     { 
     jQuery('#cbox').height(jQuery('#content').height()); 
     } 
     else 
     { 
     jQuery('#cbox').height('100%'); 
     } 
    }); 

但它不工作...任何想法?

+0

爲什麼不使用jQuery的'''快捷鍵? '$('#cbox')'只是比'jQuery('#cbox')'短得多;) – Znarkus 2010-08-16 14:03:14

+1

@Znarkus可能會導致與其他庫的衝突。我知道一個令人討厭的CMS使用jQuery的一個可怕的定製版本。 – 2010-08-16 14:06:00

+0

可能會使用不同的庫以及jquery – corroded 2010-08-16 14:06:04

回答

16

加載內容後需要調用回調函數。

jQuery('#cbox').load('externalpage.php', function() { 
    jQuery('#cbox').height(jQuery('#content').height()); 
}); 
+0

擊敗我40秒! – 2010-08-16 14:01:00

+0

大聲笑我有一個側面,我會擊敗你們兩個:P投票反正你:P – corroded 2010-08-16 14:05:41

+0

感謝你們倆! :)這工作,如果我想將高度設置爲該div。但是現在我發現,如果內容高度比窗口高,那麼我只想將它設置爲該div高度。否則,我希望它設置爲100%。我試着修改你的代碼到這個(onlick事件): jQuery('#cbox')。load('<?php the_permalink();?>',function(){if(jQuery('#cbox' ).height() Stephen 2010-08-16 14:17:21

4

使用負載回調。

jQuery('#cbox').load('externalpage.php', function() { 
    jQuery('#cbox').height(jQuery('#content').height()); 
});