dgileadi / zepto-page-transitions

HTML5 Page Transitions similar to JQuery Mobile page transitions, but standalone (13k) and using Zepto.js
167 stars 46 forks source link

All divs other than page divs are removed after transition #16

Closed Ruffio closed 11 years ago

Ruffio commented 11 years ago

I have pulled the multipage sample and add two (header) divs, one for each page. There is no special styling of the header div other than setting background color. The transition is working but after it is finished all divs other than the page divs are removed. Below you will find a link to live sample (my code) and and also a movie, where you can see a fraps movie I have recorded showing this behaviour in Firebug.

Link to live sample: http://mbrevis.com/test.htm

Movie: http://mbrevis.com/page-transition.mp4

Ruffio commented 11 years ago

Hi.

I have found out, where the divs are getting removed and I know how to make a work around, but I don't know if my fix has any negative consequences, so please help me :-)

In transition.js in function 'perform' at line 371 we have:

// recycle all recyclable pages and empty divs ... $('div').not('[id]').not(function () { return $(this).children().length }).remove();

The above line removes all my divs, I have been thinking of doing this instead: $('div[data-role="page"]').not('[id]').not(function () { return $(this).children().length }).remove();

and it seems to work, but I'm not sure if my solution has any negative consequenses that I can't figure out.

I can see that if I set setting.domCache = true the above lines will not be executed either, but it would be nice that the code works perfectly no matter what settings are used :-)

Please review my suggestion.

Kindly regards Ruffio

dgileadi commented 11 years ago

Thanks for investigating this. I pushed what should be a fix.

P.S. sorry for not responding earlier; real life has intruded a lot recently.

On Mar 29, 2013, at 3:36 AM, Ruffio notifications@github.com wrote:

Hi.

I have found out, where the divs are getting removed and I know how to make a work around, but I don't know if my fix has any negative consequences, so please help me :-)

In transition.js in function 'perform' at line 371 we have:

// recycle all recyclable pages and empty divs ... $('div').not('[id]').not(function () { return $(this).children().length }).remove();

The above line removes all my divs, I have been thinking of doing this instead: $('div[data-role="page"]').not('[id]').not(function () { return $(this).children().length }).remove();

and it seems to work, but I'm not sure if my solution has any negative consequenses that I can't figure out.

I can see that if I set setting.domCache = true the above lines will not be executed either, but it would be nice that the code works perfectly no matter what settings are used :-)

Please review my suggestion.

Kindly regards Ruffio

— Reply to this email directly or view it on GitHub.