BasemapGallery is not displaying

[SHJang]

I am very new to JavaScript and ArcGIS.
I am trying to implementing the ArcGIS BasemapGallery widget into my application.
I am making it base on this sample example by ESRI (https://developers.arcgis.com/en/javascript/jssamples/widget_basemap.html).
The extendable dijit.TitlePane is appeared on the corner of my map window. However, when I extend the basemapgallary titlepane, it is appeared as an empty box.  I am aware of that I have to run this code via Http://, I put my html file and css files into our server. But there is no luck. Could anyone help me what I am doing wrong?
I am using ESRI JS 3.5 with FireFox 22.

Here is my code:
      // I added into <script>
      dojo.require("esri.virtualearth.VETiledLayer");
      dojo.require("dijit.TitlePane");
      dojo.require("esri.dijit.BasemapGallery");

     //this is a js part
     //add the basemap gallery
        var basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");

          basemapGallery.startup();
          dojo.connect(basemapGallery, "onError", function(msg){console.log(msg)});


     //This is a HTML part
       <!--base map-->
          <div style = "position:absolute; right:10px; top:50px; z-index:9999;">
          <div data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Switch Basemap', closable:false,  open:false" >
            <div data-dojo-type="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
              <div id="basemapGallery" ></div>
            </div>
          </div>
          </div>

Many thanks in advance.
Best,

[NicholasKnabe]

I'm not an expert at this at all but just from looking at your code and looking at the sample you might want to try an add the first layer to your application

      var map;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-11727455,"ymin":4861652,"xmax":-11706340,"ymax":4871512,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", {
          basemap: "topo",
          center: [-105.255, 40.022],
          zoom: 13
        });

[SHJang]

I'm not an expert at this at all but just from looking at your code and looking at the sample you might want to try an add the first layer to your application

      var map;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-11727455,"ymin":4861652,"xmax":-11706340,"ymax":4871512,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", {
          basemap: "topo",
          center: [-105.255, 40.022],
          zoom: 13
        });

@Knabe14, thank you for your answer and your time.  The main map display is working fine. I have an issue that relates to the base map gallery.  When I open the basemapgallery widget on my webpate the map gallery is shown as an empty box. 😞

[NicholasKnabe]

Your welcome. Was just a though! ha Mine would also give me that problem as well if I didnt have my HTML code correct. Whenever I would add a new widget or content pane in the wrong spot the basemap gallery would be blank. That would be another guess ( I spent a while playing with mine before I got it to work!))'

Good luck!

[SHJang]

@knabe14, Nicolas, can I ask one more question.
I am really new to developing web applications. I just want to make sure that I understood correctly.
According to the ESRI website (https://developers.arcgis.com/en/javascript/jshelp/intro_devenv.html) an application that uses ArcGIS API with JavaScript  should be run on a server.  Does it mean any webpage can access via 'http://mywebadderss' is fine?  Or should I do something more.

So far, everything (background map (I am using the ESRI gray canvas map) and menu bar) is working fine via 'http://mywebaddress' but only the basemapgallery doesn't work.  It is still appeared blank.

Many thanks in advance.

Best,