2010-08-16 18 views
6

Ich habe ein wenig Probleme beim Einstellen der Höhe eines Elements, das ich dynamisch laden.jquery set höhe NACH dem laden

Ich benutze die Funktion jquery load, um eine externe (dynamische) Seite in ein Div (#cbox) auf meiner aktuellen Seite zu laden. Da diese Unterseite dynamisch ist, kann ich vorher nicht wissen, wie hoch der Inhalt ist. Ich möchte die Höhe erhalten, sobald der Inhalt geladen ist, und die Höhe des Container-DIV so einstellen, dass mein Farbhintergrund CSS den ganzen Weg nach unten geht. Ich habe viele Varianten von 100% height divs nur in css ausprobiert, aber sobald ich die Seite scrolle, scrollt die Farbe nach oben (100% scheint nur 100% der Höhe des Browserfensters zu setzen, und b/c ist der Inhalt dynamisch geladen, es funktioniert nicht Meine Lösung ist, die Höhe des div auf die Höhe des geladenen Inhalts zu setzen, aber das funktioniert nur auf den zweiten Klick (weil zu diesem Zeitpunkt die Seite geladen und zugänglich ist. Was ich herausfinden muss Wie zu tun ist, die Höhe der div ändern, nachdem die externe Seite bereits geladen, aber ich kann nicht scheinen es herauszufinden).

Ich hoffe, dass dies für jemanden verständlich ist, ich weiß, es ist ein wenig verschachtelt.

hier ist mein onclick code:

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

UPDATE: Die Lösungen unter Arbeit, wenn ich will, dass div die Höhe einzustellen. Aber jetzt finde ich, dass ich es nur auf diese div Höhe setzen möchte, wenn die Inhaltshöhe TALLER als das Fenster ist. Ansonsten möchte ich es auf 100% setzen. Ich habe versucht, ihren Code leicht zu diesem (onlick Ereignisse) ändern:

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%'); 
     } 
    }); 

aber es funktioniert nicht ... irgendwelche Ideen?

+0

Warum verwenden Sie nicht die '$' Verknüpfung für jQuery? '$ ('# cbox')' ist nur so viel kürzer als 'jQuery ('# cbox')';) – Znarkus

+1

@Znarkus Könnte Konflikte mit anderen Bibliotheken verursachen. Ich weiß, dass ein bestimmtes nerviges CMS eine schreckliche angepasste Version von jQuery verwendet. –

+0

könnte eine andere Bibliothek zusammen mit jquery verwenden – corroded

Antwort

16

Sie müssen die Rückruffunktion aufrufen, nachdem der Inhalt geladen wurde.

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

Beat mich um 40sec! –

+0

lol ich habe abgelenkt ich hätte dich beide geschlagen: P up abstimmen für dich sowieso: P – corroded

+0

danke euch beiden! :) Das funktioniert, wenn ich die Höhe auf dieses div setzen möchte. Aber jetzt finde ich, dass ich es nur auf diese div Höhe setzen möchte, wenn die Inhaltshöhe TALLER als das Fenster ist. Ansonsten möchte ich es auf 100% setzen. Ich habe versucht, Ihren Code leicht zu diesem (onlick Ereignis): jQuery ('# cbox'). Load ('> Funktion() { if (jQuery (' # cbox ')) .height() Stephen

4

Verwenden Sie den Lade-Callback.

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