On Mar 9, 2007, at 15:27 , JQuery - SimDigital wrote:
> I'm trying to contract a div, load a content and then expand the
> div to
> the content proper height.
>
> I was trying as follow:
>
> $("#divContent").click(function(){
> $("#content").load('info.php');
> $("#content").animate({height:'toggle'}, "slow");
> });
Close, but for a couple problems. First, the "load" method is
asynchronous, so it will not necessarily have loaded the file by the
time the next line of code runs. You need to use callbacks for this:
$('#divContent').click(function(){
$('#content').load('info.php', function() {
// Things to do after the load is complete
});
});
Next, I don't think you understand "toggle" completely. This switches
the current state of the element from hidden to shown or vice versa;
it does not do both. A simple "slideDown" or "slideUp" is probably
more appropriate in this case:
$('#divContent').click(function(){
$('#content').slideUp('slow').load('info.php', function() {
$(this).slideDown('slow');
});
});
That is, slide the element up, start the load, and after the load
completes slide it back down.
> Ahhh....I like when the content is loading, display a loading icon.
> (it
> is not required, but nice)
You can .show() an element containing the icon before the load is
performed, then .hide() it in the callback:
$('#divContent').click(function(){
$('#loading').show();
$('#content').slideUp('slow').load('info.php', function() {
$('#loading').hide();
$(this).slideDown('slow');
});
});
--
Jonathan Chaffer
Technology Officer, Structure Interactive
(616) 364-7423 http://www.structureinteractive.com/
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
