[ferr007]

Hi,

I am going nuts with the background image, i want to use an image but no matter what i do when it rotates to landscape it gets stretched.

Is there a way to have an image stable on both. I tried taking off image repeat and it makes the image too large. Is there a specific size i need to make my images to fit correctly and not distort in landscape and portrait mode?

Thank you.

[support-octavio]

Hi ferr007,

Would be acceptable for you use a background image for portrait view and other one for landscape? I can help you with code for this if you think is would be a good approach for you.

[KonyanHau]

Hi Octavio,

I have the same stretched background image for portrait and landscape, can you help me to code using different background image for portrait and other one for landscape.

Thanks,
Richard Hau

[support-octavio]

Hi Richard,

I will provide you an snippet code tomorrow that will help you to change the background image (landscape and portrait) for a specific resolution. But you should be aware that if your app is viewed/installed in other device with different resolution, the background image will be stretched.

[support-octavio]

Hi Richard,

Here’s the snippet I promised yesterday. Mobione generates automatically the phoneui.postOrientationChange function, so you only have to include the code that is within it in next snippet.

phoneui.postOrientationChange = function(newOrientation) {
    
    var isLandscape = Math.abs(newOrientation);

        if(isLandscape){

            $('#m1-<designName>').css('background-image', 'url("images/LandScape460x320.png")');

        } else {

            $('#m1-<designName>').css('background-image', 'url("images/Portrait320x460.png")');

        }
}

Note that I used images for Iphone 4. You should be careful with the size of your images as I said in my previous post.

[KonyanHau]

Hi Octavio,

Sorry for the late testing, but this snippet of code did not work on my app. Eventually I have found that the following section of code in phoneui.js has been bypassed, because ‘orientation’ does not existed in my environment. Can you help me to solve this problem please

if (‘orientation’ in window) {
window.onorientationchange = function() {
phoneui._platform.handleOrientation(function() {
handleResizing();
if (m1Design.shouldHideAddressBar) {
phoneui._platform.initAddressBarHiding();
}
if (‘postOrientationChange’ in phoneui) {
phoneui.postOrientationChange(window.orientation);
}
});
};
}

Regards,
Richard Hau

[support-octavio]

Hi Richard,

What is your mobione version? If 2.5M-x, which cordova version you used?
Are you testing in Test Center, Web Simulator, Chrome, other?
Can you share a sample project (just the code you are using to know that the device was rotated) to investigate?

[KonyanHau]

Hi Octavio,

I am using mobione 2.5M-3 and have tried cordova 2.2 & 2.9 using mobione Web Simulator, I have placed a break in phoneui.js at “if (‘orientation’ in window) {” and it return false and skip this condition.

Listed below is my snippet in xxx_custom_js:
/**
* Notification that device orientation has changed.
*
* @param {String} newOrientation
*/
phoneui.postOrientationChange = function (newOrientation) {

var isLandscape = Math.abs(newOrientation);

if(isLandscape){

$(‘#m1-ReportApp’).css(‘background-image’, ‘url(“images/DGCT-LBG.png”)’);

} else {

$(‘#m1-ReportApp’).css(‘background-image’, ‘url(“images/DGCT-PBG.png”)’);

}
}

Regards,
Richard Hau

[KonyanHau]

Hi Octavio,

I have noticed you guys are very busy, but it has been a week now, can to spend some time to look into why my version of Mobione don’t have ‘orientation’ in window?

Regards,
Richard Hau

[matrixmed]

DId you guys get this issue fixed. If so can you share the solution as I am looking to use the exact same idea.

Thanks

Chris

[Author]

Posts