AnsweredAssumed Answered

How do I get my dojo sliding panel for a table of contents to work?

Question asked by csergent08 Champion on Dec 5, 2014
Latest reply on Dec 8, 2014 by csergent08

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>

Outcomes