Question

I need to hide a form on my page once a user submits it. Usually I’d just use display: none but because of the jQuery file upload plugin I’m using, it will terminate the transfer when the form is invisible. Right now I’m doing this when the form is submitted:

// Switch out the form for upload progress
$('#upload-form').animate({opacity: 0}, function() {
    $('#progress-container').fadeIn('fast');
});

However, the #progress-container div doesn’t appear in the place the upload form used to be since the elements are still there and just invisible. In other words, it’s shunted underneath them.

Is there a way to properly hide the form and the elements inside it without using display: none and have the #upload-container div appear in the right place?

Thanks.

Answer 1

Got a brainwave shortly after posting this. Turns out it’s not actually that hard. Here’s the final code:

// Switch out the form for upload progress
$('#upload-form').animate({opacity: 0}, function() {
    $('#upload-form').css('position', 'absolute');
    $('#progress-container').fadeIn('fast');
});

Now the #progress-container div floats over the top of the form.