TOC To Float

RohitTiwari

Hi...I am new to GIS, I want my TOC panel to be floating. The floating Toc needs to be evoked from a button click. I tried to to it through javascript, but no success.

TracySchloss

You should be able to put pretty much anything you want in a floating pane.  I'm managing mine with a combination of HTML, CSS and JS.

When you using floating panes, you also need to create something called a dock. I too wanted my pane to be opened with a button click.  You don't want the floating pane to be open until you click the button, so its default style will have a hidden visibility.  There is some other styling you'll need to consider too.

#1 - add a button

 <button id="btnFloat" dojotype="dijit.form.Button" onClick="openFloater();">Open Floating Pane
     <div dojoType="dojox.layout.Dock" id="dock"  >     
         </div> </button>

#2 - define the floating pane
You will also need to define your floating pane.  I put mine within my mapDiv.

   <div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
  
   <div id="floater" dojoType="dojox.layout.FloatingPane" title='My Floating Pane' dockTo="dock" style="visibility:hidden;" closable="false" resizable="true" dockable="true">  
<div id="tocDiv"></div> 
 </div>
 </div>

#3 - write some code to open the floating pane.
Next you'll need some code to open the floating pane.  All you're doing is to change the visibility of the floating pane for its initial visibility:hidden.

function openFloater() {

  var fp = dijit.byId('floater');
   if ((fp.style = "visibility: hidden;") || (fp.style = "VISIBILITY:hidden;")) {
      fp.style.visibility="visible";
      fp.show();
   }      
}

#4 - add the required dojo and CSS
You will need to remember to add the dojo.require statement for the floatingPane.  I'm still using the legacy style, so in my code this looks like this.  You'll need to remember to add the resize handlers or your floating pane won't be resizable.

    dojo.require("dojox.layout.FloatingPane");
    dojo.require("dojox.layout.ResizeHandle");

You'll need to add the css defintion for this as well:

    <link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/layout/resources/FloatingPane.css">
    <link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/layout/resources/ResizeHandle.css">

#5 - add the necessary styling for your floater and docks
Last, you'll need to have some styles set up.  If you don't , the dock will appear as an icon, but since you want to use the button as the image, you don't need the dock to be visible too.  You'll need to adjust for the size of your TOC and where you want it to appear in your map. 

 #floater {
    position: absolute;
   top: 100px;
    left: 175px;
    width: 260px;
    height: 140px;
    z-index: 99;
  }
#dock {
    position:absolute;
    border-style:hidden;
    z-index: 99;
    top: 28px;
    right: 330px;
    height: 0px;
    width: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    visibility:hidden;
    display:none;
}