manilac

Beginner trying to create two tabs

Discussion created by manilac on Aug 20, 2013
Latest reply on Aug 26, 2013 by zj_zou
Hi,

I have just started with ArcGIS amd learning dojo. I mixed the creation of map which was working with code to create two tabs but I am not getting the tabs. Can someone point out whats going wrong ? Thanks for the help.
!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
    <script>
        console.log('abc');
var map;
  require(["esri/map", "dojo/domReady!"], function(Map) {
    map = new Map("mapDiv", {
      center: [-56.049, 38.485],
      zoom: 3,
      basemap: "topo"
    });
  });
    </script>
    <script>var dojoConfig = { parseOnLoad: true };</script>

    <script>
require(["dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function(TabContainer, ContentPane){
    var tc = new TabContainer({
        style: "height: 100%; width: 100%;"
    }, "tc1-prog");

    var cp1 = new ContentPane({
         title: "Food",
         content: "We offer amazing food"
    });
    tc.addChild(cp1);

    var cp2 = new ContentPane({
         title: "Drinks",
         content: "We are known for our drinks."
    });
    tc.addChild(cp2);

    tc.startup();
});
</script>
   
<style>
  html, body, #mapDiv {
    padding: 0;
    margin: 0;
    height: 100%;
  }
</style>
  </head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>

Regards,
Manila

Outcomes