Jesper Simonsen
Posts: 0
Joined: Sat Sep 28, 2013 8:37 am

Javascript function to animate collapsible set only works on first page?

No actually now the collapsibles is corrupted from the start, but where did you giet the first kode from you want me to delete:
$('#List_Customers_mobilecontainer [name="collapsibleblock"]').die().live({.........

I don't think it is from our app.

Igor
Posts: 0
Joined: Tue Apr 02, 2013 12:05 pm

Javascript function to animate collapsible set only works on first page?

Below code from your application. This is the steps how to find it:

1 open application on .../List_Customers.html page.

2 open debug tool and search through the js by "slideDown(300);".

3 you will find two places.

One of them is:
pre
code

Code: Select all

     $('#List_Customers').bind({ 
         pageshow: function() { 
             $('#List_Customers_mobilecontainer [name="collapsibleblock"]').die().live({ 

                 expand: function() { 

                     var contentDiv = $('.ui-collapsible-content', this); 

                     contentDiv.hide(); 

                     contentDiv.slideDown(300); 

                 }, 

                 collapse: function() { 

                     var contentDiv = $('.ui-collapsible-content', this); 

                     contentDiv.slideUp(300); 

                 }, 

             }) 
         }, 
     }); 

/code
/pre
It means that you have bind this JS code to "pageshow" event on "List_Customers" page.

Please delete this code and try suggested solution from upper reply. If it will not help please attach screenshot with errors.

Jesper Simonsen
Posts: 0
Joined: Sat Sep 28, 2013 8:37 am

Javascript function to animate collapsible set only works on first page?

I have ben experimenting so tis code is properly from the published HTML app on appery.io domain.

Jesper Simonsen
Posts: 0
Joined: Sat Sep 28, 2013 8:37 am

Javascript function to animate collapsible set only works on first page?

I have now done what you asked me to and you can see the result here: http://screencast.com/t/KdqO5bIQPXGR

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

Javascript function to animate collapsible set only works on first page?

Hi Jesper,

Ok. You have added requested code.

But this one:
pre
$('#List_Customers').bind({
pageshow: function() {
$('#List_Customers_mobilecontainer [name="collapsibleblock"]').die().live({

Code: Select all

                 expand: function() { 

                     var contentDiv = $('.ui-collapsible-content', this); 

                     contentDiv.hide(); 

                     contentDiv.slideDown(300); 

                 }, 

                 collapse: function() { 

                     var contentDiv = $('.ui-collapsible-content', this); 

                     contentDiv.slideUp(300); 

                 }, 

             }) 
         }, 
     }); 

/pre
Is still on your "List_Customers.html" page.

You have to delete this code.

Please share your app with us.

Jesper Simonsen
Posts: 0
Joined: Sat Sep 28, 2013 8:37 am

Javascript function to animate collapsible set only works on first page?

I have now deleted the code on pageshow, but the result is still the same ad showed in the video:http://screencast.com/t/KdqO5bIQPXGR

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

Javascript function to animate collapsible set only works on first page?

You have js file: CollapsibleAnimate.js

This file in you video has code:
pre
$(document).on({

Code: Select all

         expand: function() { 

             var contentDiv = $('.ui-collapsible-content', this); 

             contentDiv.hide(); 

             contentDiv.slideDown(300); 

         }, 

         collapse: function() { 

             var contentDiv = $('.ui-collapsible-content', this); 

             contentDiv.slideUp(300); 

         }, 

     }); 

/pre
But currently you have commented this section of code with //

Please uncomment this code by removing // and it should work.

Jesper Simonsen
Posts: 0
Joined: Sat Sep 28, 2013 8:37 am

Javascript function to animate collapsible set only works on first page?

No this code was not commented when the video was taken, but to work with the app I had to disable this script. I Think we should close this thread since it is not bringing me closer to a solution.

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Javascript function to animate collapsible set only works on first page?

Hello!

1) This code works for us pre$(document).on({
'expand': function(event) {
$(this).children('.ui-collapsible-content').hide().slideDown(300);
},

Code: Select all

  'collapse': function(event) {  
     $(this).children('.ui-collapsible-content').slideUp(300);  
     } 
 }, '[data-role="collapsible"]' 

);/pre
2) To completely expand collapsible items (not like on video), make collapsibleblock in builder collapsed by default.
3) In SelectMenu JS asset you have mistake. There should be prearr = [];/pre instead prearr = ();/pre

Jesper Simonsen
Posts: 0
Joined: Sat Sep 28, 2013 8:37 am

Javascript function to animate collapsible set only works on first page?

Thank you very much - that solved the issue.

Return to “Issues”