android - Phonegap breaks jQuery Mobile pages when reloaded - visiting the same page again -
i have been working on project using phonegap , jquery mobile. setup uses multiple pages inside single html file.
i facing problem , haven't found similar anywhere:
when revisit page, means visited it, navigated page, , returned first page, there padding between header , content, , between footer , content of page.
as screenshots show below:
http://i.imgur.com/nebwzyx.png
below can see padding added, red background, when returned page above afterwards (this happens every page)
http://i.imgur.com/u1whw9b.png
the code large post here if has suggestion please tell me how fix or problem.
it should noted problem exists if app runs on android tablets, , not when viewed through browser on laptop.
thank you
you can force correct content height function:
function getrealcontentheight() { var header = $.mobile.activepage.find("div[data-role='header']:visible"); var footer = $.mobile.activepage.find("div[data-role='footer']:visible"); var content = $.mobile.activepage.find("div[data-role='content']:visible:visible"); var viewport_height = $(window).height(); var content_height = viewport_height - header.outerheight() - footer.outerheight(); if((content.outerheight() - header.outerheight() - footer.outerheight()) <= viewport_height) { content_height -= (content.outerheight() - content.height()); } return content_height; }
it must activated during pageshow event because @ point page height correct:
$(document).on('pageshow', '#index', function(){ $.mobile.activepage.find('.ui-content').height(getrealcontentheight()); });
working example: http://jsfiddle.net/gajotres/nvs9j/
if want find out more function read other article: https://stackoverflow.com/a/14550417/1848600
Comments
Post a Comment