search

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

Partial page transition #11

Closed Ruffio closed 11 years ago

Ruffio commented 11 years ago

Hi.

I have tried this plugin and it works very well :-) Thanks for a nice job.

As I'm going to be using multipage templates I would like to be able to only transition a part of the page leaving header and footer intact.

I have packed all my pages inside a div and it would be wounderful if the 'pages' only where living inside this div and not the complete page. The reason is to save alot of header and footers. I don't know if it makes any sense. I have tried changing some of the css but unfortunately not the right way :-(

I have made a sample here: http://mbrevis.com/admin/

Kindly regards Ruffio

dgileadi commented 11 years ago

Thanks for the suggestion, and for the kind words!. I'll take a look at it and see if it's something I want to add.

On Mar 10, 2013, at 1:31 PM, Ruffio notifications@github.com wrote:

Hi.

I have tried this plugin and it works very well :-) Thanks for a nice job.

As I'm going to be using multipage templates I would like to be able to only transition a part of the page leaving header and footer intact.

I have packed all my pages inside a div and it would be wounderful if the 'pages' only where living inside this div and not the complete page. The reason is to save alot of header and footers. I don't know if it makes any sense. I have tried changing some of the css but unfortunately not the right way :-(

I have made a sample here: http://mbrevis.com/admin/

Kindly regards Ruffio

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

dgileadi commented 11 years ago

I changed the script to add the "ui-page" class to page divs instead of setting style attributes on the divs directly. I also added the new div.ui-page rule to transition.css. I don't know if this will help you, but maybe it'll allow you to accomplish what you want.

On Mar 10, 2013, at 1:31 PM, Ruffio notifications@github.com wrote:

Hi.

I have tried this plugin and it works very well :-) Thanks for a nice job.

As I'm going to be using multipage templates I would like to be able to only transition a part of the page leaving header and footer intact.

I have packed all my pages inside a div and it would be wounderful if the 'pages' only where living inside this div and not the complete page. The reason is to save alot of header and footers. I don't know if it makes any sense. I have tried changing some of the css but unfortunately not the right way :-(

I have made a sample here: http://mbrevis.com/admin/

Kindly regards Ruffio

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

Ruffio commented 11 years ago

Hi I have pulled the latest code and tried without any luck :-( I can see, that you set pages.attr('style', 'position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;');

Doesn't that 'overwrite' my existing css? I mean, the above tells the browser, that the page div fills the whole viewport, right?

dgileadi commented 11 years ago

The latest code uses pages.addClass('ui-page'); instead of pages.attr('style' ...). That was the change I made. My thinking was that you might be able to modify the div.ui-page rule inside transition.css to match what you want.

Ruffio commented 11 years ago

I have tried to change the css but still with no luck. I have actually reorganised my pages so it's full page transition thereby using the 'native' usage but without luck. It is like that after the (fade)transition has completed the original css (my other css) is cleared :-(

I have updated my test website so you can see for yourself.

Ruffio commented 11 years ago

No problems. Error was related to error # 16: https://github.com/dgileadi/zepto-page-transitions/issues/16