Ajax load & animate height auto

[nordi]

Hi, ich hab ein Problem mit einer Ajax-Load Funktion und animate. Inhalt wird via Klick aus einer externen html-Datei geladen. Dabei soll sich der Div-Container, in dem der Inhalt geladen wird sich automatisch in der Höhe des Inhalts anpassen. Ich habe da ein Skript auf css-tricks (http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/) gefunden und probiert es in meine Funktion einzubauen, leider ohne Erfolg. Könnt ihr mir vllt einen Tipp geben, wo der Fehler liegt?

$(document).ready(function() {

	jQuery.fn.animateAuto = function(prop, speed, callback){
    var elem, height, width;
    return this.each(function(i, el){
        el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
        height = elem.css("height"),
        width = elem.css("width"),
        elem.remove();
        
        if(prop === "height")
            el.animate({"height":height}, speed, callback);
        else if(prop === "width")
            el.animate({"width":width}, speed, callback);  
        else if(prop === "both")
            el.animate({"width":width,"height":height}, speed, callback);
    });  
}

	
	$('.more').on('click', function(e) {
		e.preventDefault();
		var href = $(this).attr('href');
		if ($('#ajax').is(':visible')) {
			$('#ajax').css({ display:'block' }).animateAuto({ 'height', 1000 }).empty();
		}
		$('#ajax').css({ display:'block' }).animateAuto({ 'height', 1000 },function() {
			$('#ajax').html('<img id="loader" src="images/ajax-loader.gif">');
			$('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' });
			$('#ajax').load('slide-fade-content.html ' + href, function() {
				$('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': 'rgb(253,253,175)' });
			});
		});
	});
});

 

[tombe]

Ist zwar ziemlich mühsam, aber hast du dir mal die verschiedenen Werte wie z.B. height oder width per alert ausgegeben oder die Werte sonst irgendwie überprüft.

Wenn du auf die Höhe per CSS zugreifst, bekommst du immer "px" mitgeliefert. Eventuell ist das schon das Problem wenn du wirklich nur den numerischen Wert brauchst.

Ich hatte kürzlich das Problem das bei einem Element welches "height = auto" hatte gar kein Wert ausgelesen werden konnte. Hier half jQuery innerHeight.

 

[nordi]

Es geht mit "max-height" anstatt von "height". Hat sich also erledigt.

 

[nordi]

Habe da noch ein anderes Problem. Ich würde gerne, wenn bereits ein Inhalt geladen wurde via load(), dass dieses erst ausfadet und dann das nächste eingeblendet wird. Hat einer eine Idee?

 

[tombe]

So vielleicht:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$(".klick").click(function () {
		id = $(this).attr("id");
//		$("#inhalt").fadeOut(1000, function() {
		$("#inhalt").animate({opacity: 0}, 1000, function() {
			$("#inhalt").load(id, function () {
//			$("#inhalt").fadeIn(1000);
				$("#inhalt").animate({opacity: 1}, 1000);
			});
		});
	});
});
</script>

<div class="klick" id="datei1.html">Datei 1</div>
<div class="klick" id="datei2.html">Datei 2</div>

<div id="inhalt"></div>

Zuerst wird mit animate der vorhandene Inhalt ausgeblendet. Wenn dieser Vorgang fertig ist, wird die neue Datei geladen und wenn das abgeschlossen ist, wird alles wieder sichtbar.

Geht natürlich mit fadeOut und anschließendem fadeIn genauso!

 

[nordi]

Hi, danke für die Antwort. Habe das mal ausprobiert. Er fadet immer nur die erste ID ein (also in deinem Beispiel datei1.html). Weißt du woran das liegt?

 

[tombe]

Also ich habe es eben nochmal mit 2 und dann 3 verschiedenen Dateien/Links getestet und es klappt.

Zeig mal wie es bei dir jetzt genau aussieht, vielleicht finden wir dann was falsch ist.

 

[nordi]

Hi tombe, es klappt nun doch! Hatte einen kleinen Fehler drinnen, danke! Noch ne kurze Frage: Wenn ein Element eingefadet wird und ich auf das nächste Item klicke, springt der Browser immer automatisch nach oben. Kann man das unterbinden?

 

[tombe]

Gibt es die Seite bereits im Netz? Ich kann mir gerade nicht so genau vorstellen wie das aussieht (oder zeig uns mal ein Bild).

...und ich auf das nächste Item klicke...

Für was steht in diesem Fall "Item", ist das ein Link mit dem du dann weiteren Inhalt einblendest?

 

[jeipack]

Wenn es ein Link ist mit href="#" dann ist es logisch dass der Browser immer ganz rauf springt.
Unterbinden kannst du es indem du den Event mit Javascript abfängst und dann preventDefault aufrufst:

$("a").click(function(e) {
e.preventDefault();
doYourStuff();

});