JQuery Mobile event on Page Load

Question

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?!?

score 3 · Accepted Answer · answered Apr 18 '13 at 11:33

3

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.

answered Apr 18 '13 at 11:33

Gajotres

57,309
16
102
130

the code with pageshow works fine...but how i can avoid that when i reload the page the collapsible is still open?!...it's opened for a second and then the slideDown restart.. – Loralon Apr 19 '13 at 07:54
Add data-collapsed="true" attribute into collapsible div. For more info look at official documentation : http://api.jquerymobile.com/collapsible/#option-collapsed , everything you need is there. – Gajotres Apr 19 '13 at 07:59
i tried to use the data-collapsed=true...the problem persist...in others collapsible elements (without animation) the element was collapsed when i load the page for the first time...if i change page with the element opened when i recharge that page it is open and i can't close it...?! – Loralon Apr 22 '13 at 10:32

score 0 · Answer 2 · answered Apr 18 '13 at 11:27

0

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>

answered Apr 18 '13 at 11:27

Prat

495
7
19

Does not work in jQuery mobile: http://view.jquerymobile.com/1.3.1/dist/demos/faq/dom-ready-not-working.html – jgillich Apr 18 '13 at 13:27

score 0 · Answer 3 · answered Apr 18 '13 at 11:34

0

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() {
   ...
});

answered Apr 18 '13 at 11:34

Scott Puleo

3,684
24
23

JQuery Mobile event on Page Load

3 Answers3