--- a/common-template.inc.php +++ b/common-template.inc.php @@ -3,8 +3,9 @@ { echo ' <!DOCTYPE html> -<html> - <head> +<html lang="en"> + <head> + <meta charset="UTF-8"> <title>' . $pageTitle . '</title>'; if ($datepicker) echo '<link rel="stylesheet" href="css/jquery.ui.datepicker.mobile.css" />'; if (isDebugServer()) echo '<link rel="stylesheet" href="css/jquery-mobile-1.0a3.css" /> @@ -20,7 +21,7 @@ }); </script> <script src="js/jQuery.ui.datepicker.js"></script>'; -echo '<style type="text/css"> + echo '<style type="text/css"> .ui-navbar { width: 100%; } @@ -44,11 +45,34 @@ body { background-color: #F0F0F0; } -</style> -<meta name="apple-mobile-web-app-capable" content="yes" /> + #jqm-homeheader { + text-align: center; + } + + // source http://webaim.org/techniques/skipnav/ + #skip a, #skip a:hover, #skip a:visited +{ +position:absolute; +left:0px; +top:-500px; +width:1px; +height:1px; +overflow:hidden; +} + +#skip a:active, #skip a:focus +{ +position:static; +width:auto; +height:auto; +} +</style>'; + if (strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'], 'iPod')) { + echo '<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-startup-image" href="startup.png" /> <link rel="apple-touch-icon" href="apple-touch-icon.png" />'; + } if ($geolocate) { echo "<script> @@ -63,13 +87,21 @@ } if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition(success, error); +var options = { + enableHighAccuracy: false, + timeout: 60000, + maximumAge: 10000 +} + navigator.geolocation.getCurrentPosition(success, error, options); } </script> "; } echo '</head> <body> + <div id="skip"> + <a href="#maincontent">Skip to content</a> + </div> '; if ($opendiv) { echo '<div data-role="page"> @@ -82,6 +114,7 @@ <div data-role="header"> <h1>' . $pageTitle . '</h1> </div><!-- /header --> + <a name="maincontent" id="maincontent"></a> <div data-role="content"> '; } } @@ -109,22 +142,22 @@ or enter an address/co-ordinates in the box below.</div>'; } echo '<div data-role="collapsible" data-collapsed="' . !$geoerror . '"> - <h3>Change Time/Place (' . (isset($_SESSION['time']) ? $_SESSION['time'] : "Current Time,") . ' '.ucwords(service_period()).')...</h3> - <form action="" method="post"> + <h3>Change Time/Place (' . (isset($_SESSION['time']) ? $_SESSION['time'] : "Current Time,") . ' ' . ucwords(service_period()) . ')...</h3> + <form action="'.basename($_SERVER['PHP_SELF']).'" method="post"> <div class="ui-body"> <div data-role="fieldcontain"> <label for="geolocate"> Current Location: </label> - <input type="text" id="geolocate" name="geolocate" value="' . (isset($_SESSION['lat']) && isset($_SESSION['lon']) ? $_SESSION['lat'] . "," . $_SESSION['lon'] : "Enter co-ordinates or address here") . '"/> <a href="#" style="display:none" name="here" id="here"/>Here?</a> + <input type="text" id="geolocate" name="geolocate" value="' . (isset($_SESSION['lat']) && isset($_SESSION['lon']) ? $_SESSION['lat'] . "," . $_SESSION['lon'] : "Enter co-ordinates or address here") . '"/> <a href="#" style="display:none" name="here" id="here">Here?</a> </div> <div data-role="fieldcontain"> <label for="time"> Time: </label> - <input type="time" name="time" id="time" value="' . (isset($_SESSION['time']) ? $_SESSION['time'] : date("H:i")) . '"/> <a href="#" name="currentTime" id="currentTime"/>Current Time?</a> + <input type="time" name="time" id="time" value="' . (isset($_SESSION['time']) ? $_SESSION['time'] : date("H:i")) . '"/> <a href="#" name="currentTime" id="currentTime">Current Time?</a> </div> <div data-role="fieldcontain"> <label for="service_period"> Service Period: </label> - <select name="service_period">'; + <select name="service_period" id="service_period">'; foreach ($service_periods as $service_period) { - echo "<option value=\"$service_period\"" . (service_period() === $service_period ? "SELECTED" : "") . '>' . ucwords($service_period) . '</option>'; + echo "<option value=\"$service_period\"" . (service_period() === $service_period ? " SELECTED" : "") . '>' . ucwords($service_period) . '</option>'; } echo '</select> <a href="#" style="display:none" name="currentPeriod" id="currentPeriod"/>Current Period?</a>