
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.
Leave a Reply