I am trying to use dojo animation so that I can store my table of contents in a slide in slide out panel. I want to know how to keep it from sliding across the screen on button click left and how to get keep the scroll bar from showing up when it slides right.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Create a Map</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/soria/soria.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body, #mapDiv
{
padding:0;
margin:0;
height:100%;
width:100%;
}
#tocPanel
{
position:absolute;
right:0%;
top:20%;
height:600px;
width:300px;
background-color:Red;
z-index:50;
}
#slideLeftButton
{
position:absolute;
left:0px;
bottom:0px;
}
#slideRightButton
{
position:absolute;
right:0%;
bottom:0px;
}
</style>
<script src="http://js.arcgis.com/3.11/"></script>
<script>
var map;
require(["esri/map", "esri/config",
"esri/geometry/Extent",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/tasks/GeometryService",
"dojo/dom",
"dojo/dom-geometry",
"dojo/fx",
"dojo/on",
"dojo/parser",
"dojo/domReady!"], function (Map, esriConfig, Extent, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer, GeometryService, dom, domGeom, coreFx, on, parser
) {
/* The proxy comes before all references to web services */
/* Files required for security are proxy.config, web.config and proxy.ashx
- set security in Manager to Private, available to selected users and select Allow access to all users who are logged in
(Roles are not required)
/*
The proxy section is defined on the ESRI sample. I have included it as
part of the documentation reads that the measuring will not work.
I thought that might be important.
*/
// Proxy Definition Begin
//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.
//If this null or not available the project and lengths operation will not work.
// Otherwise it will do a http post to the proxy.
esriConfig.defaults.io.proxyUrl = "proxy.ashx";
esriConfig.defaults.io.alwaysUseProxy = true;
// Proxy Definition End
// set custom extent
var initialExtent = new Extent({
"xmin": 777229.03,
"ymin": 1133467.92,
"xmax": 848340.14,
"ymax": 1185634.58,
"spatialReference": {
"wkid": 3435
}
});
// create map and set slider style to small
map = new Map("mapDiv", {
showAttribution: false,
sliderStyle: "small",
extent: initialExtent,
logo: false
});
// add imagery
var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");
map.addLayer(tiled);
// set operational layers
var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });
// add operational layers
map.addLayer(operationalLayer);
// add point feature layer
var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0");
map.addLayer(pointFeatureLayer);
// declare geometry service
esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");
function slideIt(amt) {
coreFx.slideTo({
node: "tocPanel",
top: domGeom.getMarginBox("tocPanel").t.toString(),
left: (domGeom.getMarginBox("tocPanel").l + amt).toString(),
unit: "px"
}).play();
}
on(dom.byId("slideRightButton"), "click", function () {
slideIt(200);
});
on(dom.byId("slideLeftButton"), "click", function () {
slideIt(-200);
});
}
);
</script>
</head>
<body class="soria">
<div id="mapDiv">
<div id="tocPanel">
<button type="button" id="slideLeftButton">Slide it Left</button>
<button type="button" id="slideRightButton">Slide it right</button>
</div>
</div>
</body>
</html>
