topic Re: Hide Content Pane (leftpane) in ArcGIS JavaScript Maps SDK Questions

Hide Content Pane (leftpane)

deleted-user-yA_w_FC9FKe5 — Wed, 16 Apr 2014 10:53:34 GMT

I would like to have the ability to hide/show my content boxes that contain my legend and bookmarks. Currently I am trying to use a toggle button to do this but what I would really like to do is use a slider. I've tried lots of things but with very little progress. When I use the toggle button it hides things or moves them but the white box still stays on the screen. The goal is to see more of the map.

I've tried some stuff like this:

require(["dojo/ready", "dijit/form/ToggleButton"], function(ready, ToggleButton){
    ready(function(){
     new ToggleButton({
      showLabel: true,
      checked: false,
       onChange: function(val){
       if(val == true){
         //document.getElementById("leftPane").style.display = 'block';
        document.getElementById("leftPane").style.marginLeft="-190px";
        document.getElementById("leftPane").style.width = '200px';
        this.set('label', 'Hide Legend');
       }
       else{
        //document.getElementById("leftPane").style.display = 'none';
        document.getElementById("leftPane").style.marginLeft="0px";
        document.getElementById("leftPane").style.width = '200px';
        this.set('label', 'Show Legend');
       }
       },
      //onChange: function(val){this.set('label',val)},
      label: "Hide Legend"
     }, "btnContentPaneSwitch");
    });
        });

Code for content panes I am trying to hide
           <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">
                <div dojotype="dijit.layout.AccordionContainer">

                     <div dojotype="dijit.layout.ContentPane" title="Bookmarks: Stores">
                        <div id="StoreBookmarksWidget"> </div>
                    </div>

                      <div dojotype="dijit.layout.ContentPane" title="Bookmarks: Districts" >
                        <div id="DistrictBookmarksWidget"> </div>
                    </div>


                    <div dojotype="dijit.layout.ContentPane" title="Legend" selected="true">
                        <div id="sliderDiv"> </div>
                    </div>

               </div>
             </div>

Re: Hide Content Pane (leftpane)

TimWitt — Wed, 16 Apr 2014 11:17:27 GMT

Michael,

This thread might help you.

Tim

Re: Hide Content Pane (leftpane)

deleted-user-yA_w_FC9FKe5 — Wed, 16 Apr 2014 12:08:37 GMT

Thanks. I thought something in there might be helpful but in the end I couldn't find anything that would I guess hide the whole left region/left panel.

I'm sure it is simple code. I've tried some slider panels but I think the whole regions thing is messing everything up.

this.getParent().resize();
dijit.byId('leftPane').resize(100);

Re: Hide Content Pane (leftpane)

TimWitt — Sat, 11 Dec 2021 22:50:26 GMT

Michael,

I just tried it and this works for me.

I bound the following to a button on click:

            dijit.byId("rightPane").domNode.style.display = 'none';
            dijit.byId("map").resize();
            dojo.style("map",{width: "80%"});

The first line made the pane disappear and the next two lines resized my map to fill the gap.

Hope this helps!

Tim

Re: Hide Content Pane (leftpane)

deleted-user-yA_w_FC9FKe5 — Wed, 16 Apr 2014 13:43:37 GMT

arggg that does not work for me for some reason.

Re: Hide Content Pane (leftpane)

deleted-user-yA_w_FC9FKe5 — Wed, 16 Apr 2014 13:48:21 GMT

Actually I take that back. I can work with that. It is because I was trying to use it in the left panel. Once I moved it to the right it seemed happy. Not perfect but I can use it. thansks

Re: Hide Content Pane (leftpane)

TimWitt — Wed, 16 Apr 2014 13:58:08 GMT

One more thing Michael, you could also experiment with this Pane type.

Re: Hide Content Pane (leftpane)

deleted-user-yA_w_FC9FKe5 — Thu, 17 Apr 2014 11:08:08 GMT

Thanks Tim

Re: Hide Content Pane (leftpane)

DavidKimball1 — Sat, 11 Dec 2021 22:50:29 GMT

I looked at the layout.js file for ESRI's Basic Viewer (i.e. http://www.arcgis.com/apps/OnePane/basicviewer/index.html ) and this is how they did this:

dojo.style(dojo.byId("leftPane"), "width", "0px"); // SEE NOTE (1)
dijit.byId('mainWindow').resize(); // SEE NOTE (2)
map.resize(true); // SEE NOTE (3)
map.reposition(); // SEE NOTE (3)

(1) makes the leftPane have zero width by changing its CSS; to SHOW the leftPanel, just put the width you want (i.e. "200px") instead of "0px".

"dojo.style()" is now deprecated in favor of "domStyle.set()"; you'll need to require "dojo/dom-style"; see http://dojotoolkit.org/reference-guide/1.7/dojo/style.html and http://dojotoolkit.org/reference-guide/1.9/dojo/dom-style.html#dojo-dom-style-set

(2) mainWindow is a ContentPane that contains everything below the title header (toolbar, left pane, and map). I think .resize() with no parameters basically tells mainWindow to redraw/refresh itself and everything within it to account for the new sizes of its children; see http://dojotoolkit.org/api/#1_9dijit_layout__LayoutWidget_resize

"dijit.byId('mainWindow')" is now deprecated in favor of "registry.byId('mainWindow')"; you'll need to require "dijit/registry"; see http://dojotoolkit.org/reference-guide/1.7/dijit/byId.html and http://dojotoolkit.org/reference-guide/1.9/dijit/registry.html#dijit-registry-byid

(3) these basically tell the map to redraw/refresh itself at its new size and position - only do this if the map is actually showing on the screen. "map" is the name of a variable that points to your esri/map widget.

Re: Hide Content Pane (leftpane)

DavidKimball1 — Sat, 11 Dec 2021 22:50:32 GMT

I tried the approach I mentioned in my last post. It works except the Dojo splitter that separates the left pane from the map is still visible (the map doesn't quite stretch all the way left) when the left pane is minimized. Here's the function (I call it from a button on the header, and I have global variables (probably not a good idea) called leftPaneCurrentWidth and leftPaneIsOpen):

function toggleLeftPane() {[INDENT]if (leftPaneIsOpen) {
[/INDENT]
[INDENT=2]leftPaneCurrentWidth = domStyle.get("leftDiv", "width");
[/INDENT]
[INDENT=2]domStyle.set("leftDiv", "width", "0px");
[/INDENT]
[INDENT] } else {[/INDENT]
[INDENT=2]domStyle.set("leftDiv", "width", leftPaneCurrentWidth + "px"); // this assumes the CSS width value we saved in leftPaneCurrentWidth is in pixels
[/INDENT]
[INDENT]}
registry.byId("mainDiv").resize();
map.resize(true);
map.reposition();
leftPaneIsOpen = !leftPaneIsOpen;
[/INDENT]
 }

Re: Hide Content Pane (leftpane)

DavidKimball1 — Tue, 22 Apr 2014 16:31:53 GMT

Here's yet another way, based on this jFiddle: http://jsfiddle.net/6aNrp/274/

This way removes the splitter bar - in fact, it just removes the left pane from the page and then replaces it later (the pane object (held in the myLeftContentPane variable) still exists the whole time, it's just removed from and added to the page's overarching BorderContainer object (held in the myBorderContainer variable - this is the same thing as registry.byId("mainDiv")).

function toggleLeftPane() {[INDENT]if (leftPaneIsOpen) { [/INDENT] [INDENT=2]myBorderContainer.removeChild(myLeftContentPane); [/INDENT] [INDENT] } else { [/INDENT] [INDENT=2]myBorderContainer.addChild(myLeftContentPane); [/INDENT] [INDENT] }  registry.byId("mainDiv").resize();  map.resize(true);  map.reposition();  leftPaneIsOpen = !leftPaneIsOpen; [/INDENT] }

EDIT: Unfortunately, if you have a Legend widget in your left pane and you minimize (removeChild) the pane before the Legend has loaded, it breaks the Legend and it never loads.