Member Avatar for Soben

Hello,
I'm going to make a portfolio and am trying to use jquery for effects.
Basically I have several menus and when I click on any of them the showed text in content div of page should change, using ajax. These are levels:
a) SlideUp the #Content div
b) Change the innerHTML of #Content div, using ajax
c) SlideDown, to show the new content

This is the function doing it for me:

function showContent(x){
    $("#content").slideUp("slow", function(){
	var cont = document.getElementById("content");
	if (window.XMLHttpRequest)
	  xmlhttp=new XMLHttpRequest();
	else
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	xmlhttp.open("GET",x+".txt",false);
	xmlhttp.send();
	cont.innerHTML = xmlhttp.responseText;
	});
	$("#content").slideDown("slow");
}

But the problem is, if for example "menu a"'s text is vertically 300px long, and "menu b"'s textis 200px long. If I first click on "menu a" then click on "menu b" after sliding down the div, it'll go down to 300px then suddenly its height changes to 200px, which is obviously not what I want.

Any help will be appreciated.
Thanks

Soben

Edited by Soben because: n/a
  • 3 Contributors
  • 4 Replies
  • 210 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by xylude

Dani AI

Generated

Short summary and what helped: the flicker/height jump happens because new DOM is inserted while the container is animating (or because animations are queued), so the layout briefly uses the old/new heights out of order — IE is just more visible about it. and were right to move the logic into a single jQuery flow and to avoid mixing raw sync XHR with animations; the robust fix is to avoid replacing content in a way that lets the browser reflow to the wrong height.

A reliable, cross-browser approach is to measure the final content height off-DOM, then animate the container height numerically from its current height to that measured height while swapping the markup. That prevents the container from snapping between two natural heights. Example (clone-and-animate technique):

function swapContentAnimated($cont, newHtml, duration){
  $cont.stop(true, true);                       // clear current animations
  var oldH = $cont.outerHeight();
  var $clone = $cont.clone()
    .css({visibility: 'hidden', position: 'absolute', left: -9999, top: 0, height: 'auto', width: $cont.width()})
    .appendTo('body')
    .html(newHtml);
  var newH = $clone.outerHeight();
  $clone.remove();

  $cont.css({height: oldH, overflow: 'hidden'}).html(newHtml);
  $cont.animate({height: newH}, duration || 400, function(){
    $cont.css({height: '', overflow: ''});      // restore normal flow
  });
}

Quick practical notes: call this from an async fetch callback (avoid sync XHR), use $cont.stop(true,true) to prevent queued animations, and debounce or disable menu clicks during the swap to avoid rapid re-triggering. If the new content contains images, measure after those images load (or preload them) — otherwise the measured height will be too small and the animation will jump when images arrive. For older IE quirks, keeping overflow:hidden and animating explicit heights is usually the most reliable workaround.

Recommended Answers

All 4 Replies

Member Avatar for Airshow

Try doing the whole thing in jquery rather than hybrid code:

function showContent(x){
	var $cont = $("#content");
	$cont.slideUp("slow", function(){
		$.ajax({
			url: x + ".txt",
			type: "GET",
			success: function(data){
				$cont.html(data).slideDown("slow");
			}
		});
	});
}

(untested)

Note that $cont---.slideDown("slow"); is inside the success function to give the desired effect (I hope).

Airshow

Edited by Airshow because: n/a
Member Avatar for Soben

Worked perfectly in firefox and chrome. But still has problems with IE -_-
After slideUp, when you change data suddenly the whole data is shown and disappears fast and slides down.. anyway to solve this?

Member Avatar for Airshow

Soben,

That's very naughty of IE.

I don't know of a workaround but you could try :

...
  $cont.html(data).hide().slideDown("slow");
  ...

Chances are that IE will still misbehave but you never know.

Airshow

Member Avatar for xylude

For that kind of stuff I usually use the $(id).load(htmlLocation) function like so:

$('#content').slideUp('slow',function(){
$(this).load('page.html',function(){
$('#content').slideDown('slow');
});
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.