CODEWITHSUNDEEP
jqueryhtmlcsscordovajquery-mobile
blaluma
blaluma

Reputation: 185

Adjusting screen size for just one page in jQuery mobile

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.

Upvotes: 2

Views: 1955

Answers (1)

Gajotres
Gajotres

Reputation: 57309

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

Upvotes: 2

Related Questions