topic Re: hide and close DIV in ArcGIS JavaScript Maps SDK Questions

hide and close DIV

jaykapalczynski — Thu, 04 Jan 2018 16:35:59 GMT

I am looking at this example: ArcGIS API for JavaScript Sandbox

How could you modify this so the chart div is hidden on load...sure you can just set that property in HTML style.
1. or on map load dijit.byId("profilecontainer").domNode.style.visibility = 'hidden';
BUT when the user hits the polyline button it then opens the chart to say 40%
BUT i also need to close the chart window...maybe a button below the miles selector.
1. It would need to close the chart window and then expand the map to the full area.

So I guess I am asking how to control two containers.

When one opens it sizes to 40% height and 100% width

When it closes the map window resizes to 100%

Re: hide and close DIV

jaykapalczynski — Thu, 04 Jan 2018 16:53:39 GMT

I think I have it working....just testing....so dont waste your time on this...after I post my results I might have a question or two....

Re: hide and close DIV

jaykapalczynski — Sun, 12 Dec 2021 02:48:33 GMT

I was able to do it this way....any other suggestions to improve welcome

I open the div when the user completes the drawing of the polyline with:

dijit.byId("profilecontainer").domNode.style.visibility = 'visible';

<div id="elevationdiv" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Elevation', closable:false, open:false">
   <div id="info2" >
     <label>Digitize a route:</label>
     <button id="Polyline" type="button">Polyline</button>
     <button id="FreehandPolyline" type="button">Freehand Polyline</button> 
     <label>Select unit measure:</label>               
     <select id="unitsSelect">
          <option value="esriMiles">Miles</option>
          <option value="esriKilometers">Kilometers</option>
          <option value="esriMeters">Meters</option>
          <option value="esriNauticalMiles">Nautical Miles</option>
          <option value="esriYards">Yards</option>
          <option value="esriFeet">Feet</option>
     </select>
   </div> 
</div>     

<div id="map" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'" style="height:100%">     
   <div id="profilecontainer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" >
     <div id="profileChartNode"></div>
   </div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

on(dom.byId("elevationdiv"), "click", function() {
   if (dijit.byId("elevationdiv").open) {  
     //alert("open");
   }
   if (!dijit.byId("elevationdiv").open) {   
     //alert("closed");
     dijit.byId("profilecontainer").domNode.style.visibility = 'hidden';
     map.graphics.clear();
     epWidget.clearProfile(); //Clear profile
   }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍