content not rendering on ipad but is on iphone
Hi,
I have an application, that renders fine on the iPhone but will not render properly on the iPad. Could some please provide assistance on this.
Many thanks for your help.
Please see code below:
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='initial-scale=1.0,width=device-width, minimum-scale=1,maximum-scale=1'/>
<meta name="viewport" content='initial-scale=1.0,"height=device-height, minimum-scale=1,maximum-scale=1'/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.3/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/93776313/css/main.css">
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
var dojoConfig = {parseOnLoad: true};
</script>
<script type="text/javascript" src="https://js.arcgis.com/3.8compact/"></script>
<style type="text/css">
html, body
{
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
.esriSimpleSlider
div
{
height: 30px !important;
width: 30px !important;
}
#mapDiv{
height: 100%;
width: 100%;
}
#BasemapToggle1 {
position: absolute;
top: 60px;
left: 35%;
z-index: 50;
}
#BasemapToggle2 {
position: absolute;
top: 60px;
left: 65%;
z-index: 50;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
#LocateButton {
position: absolute;
top: 135px;
left: 20px;
z-index: 50;
}
</style>
<script type="text/javascript">
var layer, visible = [];
require([
"esri/map",
"esri/dijit/BasemapToggle",
"esri/dijit/HomeButton",
"esri/dijit/LocateButton",
"dojo/domReady!"
], function(Map, BasemapToggle,HomeButton,LocateButton) {
map = new Map("mapDiv", {
basemap: "topo",
center:[-7.5, 52.8], //long, lat
zoom: 6
});
var toggle1 = new BasemapToggle({
map: map,
basemap: "satellite"
}, "BasemapToggle1");
toggle1.startup();
var toggle2 = new BasemapToggle({
map: map,
basemap: "streets"
}, "BasemapToggle2");
toggle2.startup();
var homeButton = new HomeButton({
map: map,
extent: null,
visible: true
}, "HomeButton");
homeButton.startup();
var
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
function orientationChanged() {
if(map) {
map.reposition();
map.resize();
}
}
//Use the ImageParameters to set the visible layers in the map service during ArcGISDynamicMapServiceLayer construction.
var imageParameters = new esri.layers.ImageParameters();
imageParameters.layerIds = [2];
imageParameters.opacity = 0.5;
imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
//can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE
layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://spatial.dcenr.gov.ie/arcgispg/rest/services/GSI_GENERAL_PUB/BedrockGeology500k/MapServer",
{opacity:0.5,
"imageParameters":imageParameters});
map.addLayer(layer);
});
</script>
</head>
<body onorientationchange="orientationChanged();">
<!-- Start of Map page -->
<div data-role="page" id="mapPage">
<div id="mapHeader" data-role="header" data-position="fixed">
<h1 aria-level="1" role="heading" class="ui-title">GSI - Mobile</h1>
</div><!-- /header -->
<div data-role="content" style="padding:0px !important">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="border-style:solid, border-width:1px;border-color:black;padding:0px !important">
<div id="mapDiv">
<div id="HomeButton"></div>
<div id="LocateButton"></div>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" id="mapFooter" data-position="fixed" data-tap-toggle="false" style="margin:0 auto;text-align:center">
<div role="navigation" class="ui-navbar ui-mini" data-role="navbar">
<ul class="ui-grid-b">
<li class="ui-block-a"><a class="ui-btn ui-btn-inline ui-btn-up-a" data-inline="true" data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="false" href="#mapPage"><span class="ui-btn-text">Map</span></a></li>
<li class="ui-block-b"><a class="ui-btn ui-btn-inline ui-btn-up-a" data-inline="true" data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="false" href="#listPage"><span class="ui-btn-text">Layers</span></a></li>
<li class="ui-block-d"><a class="ui-btn ui-btn-inline ui-btn-up-a" data-inline="true" data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="false" href="#legendPage"><span class="ui-btn-text">Contact Info</span></a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /Map page -->
<!-- Start of Layers page -->
<div data-role="page" id="listPage">
<div id="mapHeader" data-role="header" data-position="fixed">
<h1 aria-level="1" role="heading" class="ui-title">Layers</h1>
</div><!-- /header -->
<div data-role="content" style="padding:0px !important">
<div id="layers" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="border-style:solid, border-width:1px;border-color:black;padding:0px !important">
<div id="BasemapToggle1"></div>
<div id="BasemapToggle2"></div>
<div>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" id="mapFooter" data-position="fixed" data-tap-toggle="false" style="margin:0 auto;text-align:center">
<div role="navigation" class="ui-navbar ui-mini" data-role="navbar">
<ul class="ui-grid-b">
<li class="ui-block-a"><a class="ui-btn ui-btn-inline ui-btn-up-a" data-inline="true" data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="false" href="#mapPage"><span class="ui-btn-text">Map</span></a></li>
<li class="ui-block-b"><a class="ui-btn ui-btn-inline ui-btn-up-a" data-inline="true" data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="false" href="#listPage"><span class="ui-btn-text">Layers</span></a></li>
<li class="ui-block-d"><a class="ui-btn ui-btn-inline ui-btn-up-a" data-inline="true" data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="false" href="#legendPage"><span class="ui-btn-text">Contact Info</span></a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /List page -->
<!-- Start of Legend page -->
<div data-role="page" id="legendPage">
<div data-role="header" data-id="persistent" data-position="fixed" data-tap-toggle="false">
<h1 aria-level="1" role="heading" class="ui-title">Contact</h1>
</div><!-- /header -->
<div data-role="footer" id="mapFooter" data-position="fixed" data-tap-toggle="false" style="margin:0 auto;text-align:center">
<div role="navigation" class="ui-navbar ui-mini" data-role="navbar">
<ul class="ui-grid-b">
<li class="ui-block-a"><a class="ui-btn ui-btn-inline ui-btn-up-a" data-inline="true" data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="false" href="#mapPage"><span class="ui-btn-text">Map</span></a></li>
<li class="ui-block-b"><a class="ui-btn ui-btn-inline ui-btn-up-a" data-inline="true" data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="false" href="#listPage"><span class="ui-btn-text">Layers</span></a></li>
<li class="ui-block-d"><a class="ui-btn ui-btn-inline ui-btn-up-a" data-inline="true" data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="false" href="#legendPage"><span class="ui-btn-text">Contact Info</span></a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<!-- /content -->
</div><!-- /Legend page -->
</body>
</html>
Topic Participants
careyshan
jtara-jquery
jakecigar