Select to view content in your preferred language

Hide Content Pane (leftpane)

6862
10
Jump to solution
04-16-2014 03:53 AM
deleted-user-yA_w_FC9FKe5
Deactivated User
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>
0 Kudos
10 Replies
DavidKimball1
Occasional Contributor
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.
0 Kudos