CODEWITHSUNDEEP
jquery
user478636
user478636

Reputation: 3424

jQuery: Form slideDown() at load

How can I have my form load with a slideDown() effect rather than normal rendering?

Also, how do I know when a particular div or element has been loaded?

Upvotes: 0

Views: 340

Answers (4)

Muhammad Usman
Muhammad Usman

Reputation: 12503

Wrap your form within a div, <div id='mydiv'></div>

 $(document).ready(function() {
    $('#mydiv').hide();
    $('#mydiv').slideDown('slow',function(){
      //here write something, it will be executed when slidedown is complete
      alert('div loaded');
    })
});

You can also do it without wrapping in div, but semantic matters.

Upvotes: 1

Odys
Odys

Reputation: 9090

You can simply slide down the element you want, at the moment the page has been complete loading.

$(document).ready(function() {
    $('elementYouWant').slideDown();
});

Upvotes: 0

Shadow Wizard
Shadow Wizard

Reputation: 66389

The trick is to have the form initially hidden (adding style="display: none;" to it) then have it slide down when document is ready:

$(document).ready(function() {
    $("form").slideDown("slow");
});

Live test case.

Regarding your other question (when a particular div or element has been loaded) it's possible only for images, ordinary DOM elements like <div> do not trigger any event when they finish loading, you can only handle the global onload of the window/document itself.

Upvotes: 1

MyStream
MyStream

Reputation: 2553

A possible option is:

$.post('/url-having-your-form/',{data:someDataHere},function(response){
   $('#your-destination-element-that-needs-the-form').html(response).slideDown('slow',function(){
      // this code will be executed after the slideDown has finished
   });
},'html');

Assuming that your page hasn't already got the form, use the above (modifying where required) and if it has already got the form, then you can you try something like this:

$(document).ready(function(){
$('#your-destination-element').css({display:'none'}).slideDown();
});

What behaviour are you currently seeing?

Upvotes: 0

Related Questions