html - Adjusting screen size for just one page in jQuery mobile -
i'm having problem adjusting size of 1 of pages in application.
while i'm using
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi"/>
for setting "normal" size of pages want adjust width of specific page because shows wider image. when i'm trying adjust like
<div date-role="page" id="organigram" style="min-width:1000px;">
or through css:
#organigram > .ui-page { min-width: 1000px; }
it sets width of pages until visited specific 1 image. when i'm moving through "back" or "home"-button in page-header sizes normal (device-width) , page image stays new min-width. it's useless me way. tried change width of image inside page results in no width change @ all. ideas? if additional code needed i'll provide it. in advance!
/edit: found work around using javascript. when page open up, script starts overwriting whole page per
document.getelementbyid('organigram').innerhtml = mypagecontent;
anyway not solution.
problem jquery mobile pages when change 1 page dimension of them change , understandable, need fit viewport.
what can change page width when page active. need use jquery mobile page events:
#pageid id of page want modify.
$(document).on('pagebeforeshow', '#pageid', function(){ $(this).width(1000); }); $(document).on('pagebeforehide', '#pageid', function(){ //return page width correct size });
if have never worked jquery mobile page events take @ other answer, find lot of useful info: jquery mobile: document ready vs page events
Comments
Post a Comment