Search the Community

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