Test if Container is open

jaykapalczynski · ‎06-03-2014

I want to be able to test if a specific container is open or closed...then open or close it based on the outcome...know a simply If Then statement will work but confused on the syntax to determine if its open or closed, show or hidden?

On load this specific one is shown....say I want a button that when clicked determines if it is open and if so closes it...

 app.map.on("load", configNavigation);      function configNavigation(evt) {  dojo.byId("divSplashScreenContainer").style.display = "block";     }

JonathanUihlein · ‎06-03-2014

ESRI developed a module to make showing/hiding DOM components easier than doing it the traditional way.

You'll want to use "esri/domUtils" (https://developers.arcgis.com/javascript/jsapi/esri.domutils-amd.html).

I use toggle(), but you could always use show() or hide().

  var myButton = new Button({         label: "Click me!",         onClick: function(){             // Do something:             domUtils.toggle(dom.byId("divToShowOrHide"));         }       }, "buttonNode");

View solution in original post

JonathanUihlein · ‎06-03-2014

ESRI developed a module to make showing/hiding DOM components easier than doing it the traditional way.

You'll want to use "esri/domUtils" (https://developers.arcgis.com/javascript/jsapi/esri.domutils-amd.html).

I use toggle(), but you could always use show() or hide().

  var myButton = new Button({         label: "Click me!",         onClick: function(){             // Do something:             domUtils.toggle(dom.byId("divToShowOrHide"));         }       }, "buttonNode");

JakeSkinner · ‎06-03-2014

Hi Jay,

You could use the following to check if a container is open:

registry.byId("button").on("click", function(){
  var display = dom.byId("accordion").style.display;
  if(display == 'block'){
    dom.byId("accordion").style.display = 'none';
  }
  else{
    dom.byId("accordion").style.display = 'block';
  }
})

Ex:

<!DOCTYPE html>
<html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Identify with Popup</title>
  
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
    
    #rightPane {
      width: 20%;
    }

    #legendPane {
      border: solid #97DCF2 1px;
    }
    </style>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",

        "dojo/_base/array",
        "esri/Color",
        "dojo/dom-construct",
        "dojo/parser",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "dojo/dom",
        "dijit/form/CheckBox",
        "dijit/registry",
        "dijit/layout/AccordionContainer",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function (
        Map, ArcGISDynamicMapServiceLayer,
        arrayUtils, Color, domConstruct, parser, utils, Legend, dom, CheckBox, 
        registry
      ) {

        parser.parse();
        
        var legendLayers = [];
        
        registry.byId("button").on("click", function(){
          var display = dom.byId("accordion").style.display;
          if(display == 'block'){
            dom.byId("accordion").style.display = 'none';
          }
          else{
            dom.byId("accordion").style.display = 'block';
          }
        })

        map = new Map("map", {
          basemap: "satellite",
          center: [-83.275, 42.573],
          zoom: 18
        });
    
        var legendLayers = [];
        
        var parcelsURL = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";
    
        var parcelLayer = new ArcGISDynamicMapServiceLayer(parcelsURL, {
          id: 'parcels'
        });

        legendLayers.push({ layer: parcelLayer, title: 'Parcels' });
          
        map.on('layers-add-result', function () {
          var legend = new Legend({
            map: map,
            layerInfos: legendLayers
          }, "legendDiv");
          legend.startup();
        });

        map.addLayers([parcelLayer ]);

        map.on('layers-add-result', function () {
          //add check boxes
          arrayUtils.forEach(legendLayers, function (layer) {
            var layerName = layer.title;
            var checkBox = new CheckBox({
              name: "checkBox" + layer.layer.id,
              value: layer.layer.id,
              checked: layer.layer.visible
            });
            checkBox.on("change", function () {
              var targetLayer = map.getLayer(this.value);
              targetLayer.setVisibility(!targetLayer.visible);
              this.checked = targetLayer.visible;
            });

            //add the check box and label to the toc
            domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");
            var checkLabel = domConstruct.create('label', {
                'for': checkBox.name,
                innerHTML: layerName
              }, checkBox.domNode, "after");
            domConstruct.place("<br />", checkLabel, "after");
          });
        });               
    
      });
    </script>
  </head>
  
<body class="claro">
    <div id="content" data-dojo-type="dijit/layout/BorderContainer"
    data-dojo-props="design:'headline', gutters:true"
    style="width: 100%; height: 100%; margin: 0;">

      <div id="rightPane"
      data-dojo-type="dijit/layout/ContentPane"
      data-dojo-props="region:'right'">

        <div data-dojo-type="dijit/layout/AccordionContainer" id="accordion" style="display: block">
          <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
          data-dojo-props="title:'Legend', selected:true">

            <div id="legendDiv"></div>

          </div>

          <div data-dojo-type="dijit/layout/ContentPane"
          data-dojo-props="title:'Table of Contents'">

            <span style="padding:10px 0;">Click to toggle the visibility </span>

            <div id="toggle" style="padding: 2px 2px;"></div>

          </div>
        </div>
      </div>
      <div id="map"
        data-dojo-type="dijit/layout/ContentPane"
        data-dojo-props="region:'center'"
        style="overflow:hidden;">
        <div id="buttonDiv" style="z-index: 99; position: absolute; left: 100px; top: 20px;">
          <button data-dojo-type="dijit/form/Button" type="button" id="button">Show/Hide</button>
          <!--<input type="button" name="showHide" value="Show/Hide" id="showHide"/>-->
        </div>
      </div>
    </div>

  </body>

</html>

jaykapalczynski · ‎06-03-2014

exactly what I was looking for....thanks....reading up on it....

JeffPace · ‎06-03-2014

they have a property "_showing"

var summPane = registry.byId('rightPane');
 if (summPane._showing) {
     setTimeout(function(){summPane.toggle();},500);
}