Hide Content Pane (leftpane)

[deleted-user-yA_w_FC9FKe5]

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>

[TimWitt]

Michael,

This thread might help you.

Tim

[deleted-user-yA_w_FC9FKe5]

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);

[TimWitt]

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

[deleted-user-yA_w_FC9FKe5]

arggg that does not work for me for some reason.

[deleted-user-yA_w_FC9FKe5]

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

[TimWitt]

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

[deleted-user-yA_w_FC9FKe5]

Thanks Tim

[DavidKimball1]

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.

[DavidKimball1]

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]
 }