Legend Widget wont let slide out close

StevenGraf1

I put the legend widget in the jquery tab slide out and it won't let the slide out close.  Anyone have any insight as to why this is happening?

[HTML]$('.slide-out-div1').tabSlideOut({
            tabHandle: '.handle2',                           //class of the element that will become your tab
            pathToTabImage: 'images/Floor2a.png', //path to the image for the tab //Optionally can be set using css
            imageHeight: '90px',                           //height of tab image           //Optionally can be set using css
            imageWidth: '50px',                            //width of tab image            //Optionally can be set using css
            tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '90px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top  
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });[/HTML]

[HTML]var quakeLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.aoscloud.net/aosmaps/rest/services/Test/Test/MapServer", {id:'Building Interior Space - Floor 1'});

      legendLayers.push({layer:quakeLayer, title:'Building Interior Space'});

     
      dojo.connect(map, 'onLayersAddResult', function (results) {
        var legend = new esri.dijit.Legend({
          map:map,
          layerInfos:legendLayers
        }, "legendDiv");
        legend.startup();
      });[/HTML]

[HTML]<div class="slide-out-div1"; style="width:auto; height:50%">
  <div id="innerTOC" style="overflow-y:auto; width:100%; height:100%; overflow-x:hidden; width: 100%">
     <a class="handle2" href="http://link-for-non-js-users">Content</a>
        <div id="legendDiv"></div>
       </div>
    </div>[/HTML]
[ATTACH=CONFIG]30261[/ATTACH]

slideout.PNG

anno_1-4-13[1].jpg

DanielWickens_5-1770838337832.png

JonathanUihlein

Thanks for creating a sample! Just what I needed 😃
No worries about the handles....they aren't showing up because jsfiddle cannot access your images.
Got it to completely hide but you will need to fix the container.

To Fix:
Remove the inline styling on 'slide-out-div' and 'slide-out-div1' (also remove the extra semi-colons).
Change the styling with CSS as you see fit.

<div class="slide-out-div">     <div id="innerTOC">         <!-- code here -->     </div> </div>      <div class="slide-out-div1">     <div id="innerTOC">         <!-- code here -->     </div> </div> 

*edit

Here's a jsfiddle:

http://jsfiddle.net/7g4ta/6/

Notes:
- Changed background color on the handles so they can be seen in jsfiddle (see CSS classes)
- Changed 'topPos' to 120px from 90px for 'slide-out-div1'
- Removed inline styling from slide-out-div, slide-out-div1 and innerTOC divs (NOTE: please do not use the same ID for multiple divs)
- Changed 'height: auto !important' on 'slide-out-div1'

You will need to make a few more CSS changes to achieved your desired outcome.

If you feel you have recieved a sufficient response, please mark a post as the answer and mark this thread as answered.

Thanks!!!