Hello,
I am having an issue and I not quite sure why it is happening or how to get it to work.
What I am trying to do is resize the dialog to fit the screen when the mobile device is in portrait or landscape view.
So I wrote the code to create the dialog, that works fine. It appears, disappears and is sized correctly upon creation
var myDialog = $("div.myDia1").dialog({
autoOpen: false,
resizable: false,
modal: true,
show: 'drop',
hide: 'drop',
width: $(window).width()-25,
height: $(window).height()-25,
open: function(){
$("div.myDia1").css("z-index", 105);
}
});
This is where the problem is happening. I have my function below that gets called once the device gets rotated. When I test the application with the following code, nothing seems to happen. The dialog stays the same size.
$(window).on("orientationchange",function(){
$('div.myDia1').dialog( "option", "width", $(window).width()-25 );
$('div.myDia1').dialog( "option", "height", $(window).height()-25 );
});
I assumed that the function wasn't being called at all, so I put an alert into the function and once I did that, the function seemed to be working properly. The page loads, I open the dialog and rotate my phone from Portrait to Landscape, the alert appears, then the dialog gets resized to fit the screen.
I them rotated the phone back from Landscape to Portrait, the alert appears, and the dialog get resize to fit the screen
$(window).on("orientationchange",function(){
alert('Here I am');
$('div.myDia1').dialog( "option", "width", $(window).width()-25);
$('div.myDia1').dialog( "option", "height", $(window).height()-25 );
});
So..... I am wondering why the function only works with the alert and what I can do to get it to work without the alert being there.
Thanks in advance