CODEWITHSUNDEEP
jqueryhtmljquery-mobilejquery-mobile-collapsible
Loralon
Loralon

Reputation: 191

JQuery Mobile event on Page Load

i'm using this code to animate a collapsible content in a html5+jquryMobile app...i add it to my head:

$(document).on('expand', '.ui-collapsible', function() {
   $(this).children().next().hide();
   $(this).children().next().slideDown(500);
})

$(document).on('collapse', '.ui-collapsible', function() {
   $(this).children().next().slideUp(500);
});

it works fine when i click on the collapsible head...i'd like to use it for all my collapsible elements but in some pages i'd like to have the animation automatically after the page is loaded... some one can help me?!?

Upvotes: 3

Views: 364

Answers (3)

Scott Puleo
Scott Puleo

Reputation: 3684

JQM has its own eventing that you need to hook into. Docs here: http://api.jquerymobile.com/category/events/

If you want to trigger an event on certain pages use this syntax:

$( document ).on( "pageinit", "#some-page", function() {
   ...
});

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/Gajotres/vmZyn/

$(document).on('pageshow', '#index', function(){       
    $('.ui-collapsible').children().next().hide();
    $('.ui-collapsible').children().next().slideDown(1500);
});

You want to use a pageshow event. At that point page you can animate sliding.

In case you want to do it only one (like document ready) use this syntax instead:

$(document).on('pageinit', '#index', function(){       
    $('.ui-collapsible').children().next().hide();
    $('.ui-collapsible').children().next().slideDown(1500);
});

Unlike pageshow, pageinit will trigger only once.

Upvotes: 3

Prat
Prat

Reputation: 505

Try this

<body onLoad='expand();'>

and then put the necessary in a function

<script>
 function expand()
{
$(this).children().next().hide();
   $(this).children().next().slideDown(500);
}
</script>

Upvotes: 0

Related Questions