jquery dialog – web and mobile

Recently I coded a simple dialog using jquery. I wanted the dialog to be opened automatically on page load. This Q&A helped me to complete the first version of my coding. So far the dialog opened automatically. Next step for me was to close the dialog automatically (after a some seconds) as well:

	var mydialog;
	var cartDialogTimeoutActive;
	$(document).ready(function() {
		mydialog = $('<div></div>')
		.html('dialog message')
		.dialog({
			autoOpen: true,
			title: 'dialog title',
			draggable: true,
			resizable: true,
			show: 'slide', /* 'fade', */
			hide: 'explode',
			height:260,
			width:400,
			modal: true,
			buttons: {
				"OK": function() {
					clearTimeout(cartDialogTimeoutActive);
					$( this ).dialog( "close" );
				}
			}
		});

	});

	cartDialogTimeoutActive = setTimeout(function(){mydialog.dialog("close")},6000);

Having this done for web – what about a mobile version? A jquery mobile dialog that opens and closes automatically can be coded like this:

<div data-role="page" id="mypage">
<div data-role="header">
<h1>my title</h1>
</div><!-- /header -->
<div data-role="content">
<p>my text</p>
<p><a href="#thedialog" data-rel="dialog" id="lnkDialog">dialog open</a></p>
</div><!-- /content -->
</div><!-- /page -->

<div data-role="dialog" id="thedialog">
<div data-role="header">
<h1>dialog header</h1>
</div><!-- /header -->
<div data-role="content">
<p>dialog message</p>
<a href="#mypage" data-role="button" data-rel="back" id="closeBtn">close</a>
</div><!-- /content -->
</div><!-- /dialog -->

<script type="text/javascript"><!--
$(document).bind("pageinit", function(){
$("#lnkDialog").click();
});
$('#closeBtn').click(function() {
clearTimeout(cartDialogTimeoutActive);
});
--></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script><script type="text/javascript"><!--
cartDialogTimeoutActive = setTimeout(function(){$("#closeBtn").click();},6000);
--></script>

Since source code for jquery (4 web) and  jquery mobile dialogs differ significantly, I decided not to combine jquery (4 web) and jquery mobile dialog code. I decided to adapt a php script (original is available from selfhtml)  to identify mobile browsers

function check_mobile() {
  $agents = array(
	'iPhone', 'iPod',
    'Windows CE', 'Pocket', 'Mobile',
    'Portable', 'Smartphone', 'SDA',
    'PDA', 'Handheld', 'Symbian',
    'WAP', 'Palm', 'Avantgo',
    'cHTML', 'BlackBerry', 'Opera Mini',
    'Nokia', 'android', 'iemobile'
  );

  for ($i=0; $i    if(isset($_SERVER["HTTP_USER_AGENT"])
       && stripos($_SERVER["HTTP_USER_AGENT"], $agents[$i])
       !== false)
     return true;
  }
  return false;
}

Your are welcome to check out the source code in action, you can also download the sources from lotharschulz.info or on github.