nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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>

Vind meer berichten getagd met

Accepted answers

DavidKimball1

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.

All comments

DavidKimball1

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.

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

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.

deleted-user-yA_w_FC9FKe5

Thanks Tim

TimWitt

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

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

deleted-user-yA_w_FC9FKe5

arggg that does not work for me for some reason.

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

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,

This thread might help you.

Tim

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.