0

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: n/a

3
Contributors
4
Replies
5
Views
6 Years
Discussion Span
Last Post by xylude
0

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: n/a

0

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?

0

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

0

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');
});
});
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.