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.
