Good idea Robert, I was a bit vague. Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>TOC</title>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/dropit.js"></script>
<link rel="stylesheet" href="css/dropit.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="agsjs/dijit/css/claro.css">
<link rel="stylesheet" type="text/css" href="agsjs/dijit/css/esri.css" />
<link rel="stylesheet" type="text/css" href="agsjs/dijit/css/TOC.css" />
<style>
html, body { height: 98%; width: 98%; margin: 0; padding: 5px; font-family: helvetica, arial, sans-serif; font-size: 90%; }
#header { position: fixed; top: 0; width:100%; height:50px; left:0; background:silver; }
#content { position:fixed; top:32px; width:100%; height:100%; left:0; margin:0; border:0;}
#footer { position: fixed; bottom: 0; width: 100%; height:35px; left:0; background:silver; }
#map { position:fixed; width:100%; height:100%; border:0; margin-left:-15px; margin-top:-15px; margin-right:-15px; }
</style>
<script type="text/javascript">
//==============================================
$(document).ready(function () {
$('.menu').dropit();
});
//==============================================
var djConfig = {
parseOnLoad: true,
packages: [{
"name": "agsjs",
"location": location.pathname.replace(/\/[^/]+$/, '') + '/../src/agsjs'
}]
};
//==============================================
</script>
<script src="agsjs/dijit/init.js" ></script>
<script src="agsjs/dijit/TOC.js"></script>
<script type="text/javascript">
dojo.require("agsjs.dijit.TOC");
dojo.require("dijit.Dialog");
dojo.require("dijit.DropDownMenu");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.MenuBar");
dojo.require("dijit.MenuBarItem");
dojo.require("dijit.MenuItem");
dojo.require("dijit.PopupMenuBarItem");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.map");
dojo.require("esri.dijit.Popup");
dojo.require("esri.dijit.PopupTemplate");
</script>
<link rel="stylesheet" href="css/claro.css">
<script>dojoConfig = { async: true, parseOnLoad: true }</script>
<script src='http://dojotoolkit.org/reference-guide/_static/js/dojo/dojo.js'></script>
<script type="text/javascript">
var map, toc, basemap, dynaLayer1, dynaLayer2, dynaLayer3, dynaLayer4, dynaLayer5, dynaLayer6, popup, SimpleMarkerSymbol, popup;
var toolbar, Popup, domClass, domConstruct, Dialog;
function init() {
var initialExtent = new esri.geometry.Extent({
xmin: -8119646.38042271,
ymin: 4986891.42830988,
xmax: -8102329.13378822,
ymax: 4999699.14992532,
"spatialReference": {
"wkid": 102100
}
});
map = new esri.Map("map", {
extent: initialExtent
, smartNavigation: false
, slider: false
});
basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(basemap);
dynaLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("https://xxxx/ArcGIS/rest/services/xxxx/Contaminated_Areas_or_Facilites/MapServer", { opacity: 0.8 });
dynaLayer2 = new esri.layers.ArcGISDynamicMapServiceLayer("https://xxxx/ArcGIS/rest/services/xxxx/Other_Constraints/MapServer", { opacity: 0.8 });
var h = dojo.connect(map, 'onLayersAddResult', function (results) {
dynaLayer1.setVisibleLayers([0]);
dynaLayer2.setVisibleLayers([0, 1]);
try {
toc = new agsjs.dijit.TOC({
map: map,
layerInfos:
[
{ layer: dynaLayer1, title: "Contaminated Areas", collapsed: true, slider: false }
, { layer: dynaLayer2, title: "Other Constraints", collapsed: true, slider: false }
]
}, 'tocDiv');
toc.startup();
dojo.connect(toc, 'onLoad', function () { });
dojo.connect(toc, 'onTOCNodeChecked', function (rootLayer, serviceLayer, checked) {
});
dojo.disconnect(h);
}
catch (e) {
alert(e);
}
});
map.addLayers([dynaLayer1, dynaLayer2]);
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/MenuBar" id="header" >
<div data-dojo-type="dijit/PopupMenuBarItem" style="width:23%;background:silver;border:none;font-family:Calibri;font-size:16px;">
<span><img src="/images/i_layers_ESRI.png" height="23" width="23" />Map Feature List</span>
<div data-dojo-type="dijit/DropDownMenu" id="editMenu" style="width:100px;margin-top:-5px;width:100px;background:silver;border:none;">
<div data-dojo-type="dijit/MenuItem" style="width:100px;" >
<div id="tocDiv" style="height:100%;width:100px;font-family:Calibri;font-size:10px;word-wrap:break-word;"></div>
</div>
</div>
</div>
</div>
<div id="content" data-dojo-type="dijit.layout.BorderContainer" design="headline" gutters="true">
<div id="map" data-dojo-type="dijit.layout.ContentPane" region="center"></div>
</div>
<div id="footer"></div>
</body>
</html>