2

I'm having a problem adjusting the size of one of my pages in my 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 up the "normal" size of my pages I want to adjust the width of a specific page because it shows an wider image. But when I'm trying to do adjust it like

<div date-role="page" id="organigram" style="min-width:1000px;">

or through CSS:

#organigram > .ui-page {
min-width: 1000px;
}

it sets the width for ALL of my pages until I visited this specific one with the image. When I'm moving back through the "Back" or "Home"-Button in my page-header all sizes are back to normal (device-width) and the page with the image stays with the new min-width. However it's useless for me this way. I tried to just change the width of the image inside the page but this results in no width change at all. Any ideas? If additional code is needed I'll provide it. Thanks in advance!

/edit: I found a work around by using JavaScript. When the page will open up, my Script starts overwriting the whole page per 

document.getElementById('organigram').innerHTML = myPageContent;

Anyway this is not a solution.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
blaluma
  • 185
  • 1
  • 2
  • 15

1 Answers1

2

Problem with jQUery Mobile pages is when you change one page dimension all of them will change and this is understandable, they all need to fit a viewport.

What you can do is change page width only when that page is active. For that you will need to use jQuery Mobile page events:

#pageId is an id of a page you want to modify. 

$(document).on('pagebeforeshow', '#pageID', function(){       
    $(this).width(1000);
});

$(document).on('pagebeforehide', '#pageID', function(){       
    //Return page width to the correct size
});

If you have never worked with jQuery Mobile page events take a look at my other answer, you will find a lot of useful info: jQuery Mobile: document ready vs page events

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • But theoretically I'm still overwriting the page-width with my .innerHTML shown above, not from start but when activated, so still all pages would have to adjust to the new width, which they don't. Why is it working that way then? In addition the other pages shouldn't change back to the device-width once I move back from my page with the image, which they do. – blaluma May 21 '13 at 12:32
  • (Missed comment editing time :<) Beside that, your answer is correct and a cleaner way than inserting new HTML-Code. :) – blaluma May 21 '13 at 12:42