Jquery - orientationchange event issue

[adam84]

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

 

[kicken]

Usually if adding an alert fixes a problem it is due to a race condition.

 

Most likely in this case, the browser is firing the event and your code is running before it updated it's state with the new width and height information. You can work around it by wrapping the function in a timeout to delay it while the browser updates it's state.

 

Alternatively, have you tried using the resize event rather than the orientation event? I think that would be more appropriate as it would also handle cases on a desktop of the user just resizing their browser window.

 

//cache $(window) to save some function calls.
var $window = $(window);
$window.on("resize",function(){
	$('div.myDia1').dialog( "option", "width", $window.width()-25);
	$('div.myDia1').dialog( "option", "height", $window.height()-25 );
});

[adam84]

Awesome, Thank you very much.

It seems to be working as expected