Showing a splash screen at startup

KenBuja · ‎07-01-2013

When a user starts my application, I would like to show a splash screen that would include some background about the project, contact information, required links, etc. I have a Fiddle that shows a splash screen when I click a button, but how do I code that so the splash screen comes up when opening the application?

KenBuja · ‎07-02-2013

Thanks, Brittney,

Since dojo.AddOnLoad has been depreciated, I'd like to write this using the newer version. However, I've tried using dojo/ready and the code
    ready(function () {
        dojo.byId("divDialogMessage").innerHTML = parameters.welcomeText;
        dijit.byId("dialogWelcome").show();
    });
but that returns the error "TypeError: dijit.byId(...) is undefined"

and trying "dom.byId("dialogWelcome").show();" give me the error "dom.byId(...) is null"

It turns out that I was overthinking the syntax. This works

    ready(function () {
        divDialogMessage.innerHTML = parameters.welcomeText;
        dialogWelcome.show();
    });

View solution in original post

BrittneyGibbons · ‎07-01-2013

If I understand your question, I think you want to use dojo.addOnLoad to call your function to show the splash screen. For my script, I created a function init that contained any javascript that I wanted to run as the application loaded. Then I called this init function using the command dojo.addOnLoad(init).

In your case, the javascript would look something like this:
function init() {
dialogWelcome.show();
}
dojo.addOnLoad(init);
http://jsfiddle.net/rXNzN/4/

You could add more to the init function if you want to as well.

Hope this is what you were looking for!

SteveCole · ‎07-01-2013

I'll echo Brittney's suggestion. This is basically what I do, although I fire off my code to display my splash screen in dojo.Ready(). I like using a JQuery modal dialog since they look nicer than Dojo's offerings. The result is something like the attached screenshot.

KenBuja · ‎07-01-2013

Thanks, Brittney,

Since dojo.AddOnLoad has been depreciated, I'd like to write this using the newer version. However, I've tried using dojo/ready and the code

    ready(function () {
        dojo.byId("divDialogMessage").innerHTML = parameters.welcomeText;
        dijit.byId("dialogWelcome").show();
    });

but that returns the error "TypeError: dijit.byId(...) is undefined"

and trying "dom.byId("dialogWelcome").show();" give me the error "dom.byId(...) is null"

ShreyasVakil · ‎07-01-2013

Hi,

You can use esri.show() and esri.hide() to add a splash screen.

Here is a simple code sample which demonstrates the same:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Splash Screen</title>
  <link rel="stylesheet" href="https://community.esri.com//serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="https://community.esri.com//serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
  <style type="text/css">
      html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0px;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
        }

        #mapDiv
        {
            margin: 0px;
            border: solid 1px #B5BCC7;
            height: 100%;
            width: 100%;

        }
  
  </style>

  <script>var dojoConfig = { parseOnLoad: true };</script>
  <script src="//serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
  <script>
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("esri.map");
    dojo.require("esri.layers.FeatureLayer");
    dojo.require("esri.IdentityManager");
 dojo.require("esri.IdentityManagerBase");

    var map;

    function init() {
     
 
      map = new esri.Map("mapCanvas",{
        center: [-107.394, 37.563],
        zoom: 9
      });
   esri.show(splashScreen);
   var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer");
        map.addLayer(basemap);
   dojo.connect(map, "onLoad", function() {
  //esri.hide(splashScreen);
});
     
    }

 function hideSplash(){
  esri.hide(splashScreen);
   map.resize();
      map.reposition();
 }
   
    dojo.ready(init);
  </script>
</head>

<body class="tundra">
  <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="position:relative;width:100%;height:100%;">
   <div id="mapCanvas" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="height:900px;">
  <div data-dojo-type="dijit/Dialog" id="splashScreen" title="Welcome" style="position: absolute; top: 300px; left: 400px; z-index: 100;width:600px">
   <table class="dijitDialogPaneContentArea">
    <tr>
     <td>
      <div id="divDialogMessage">This is the splash text</div>
     </td>
    </tr>
   </table>
        <div class="dijitDialogPaneActionBar">
            <button id="buttonClose" data-dojo-type="dijit/form/Button" type="button" style="align-content: center" onclick="hideSplash();">Close</button>
        </div>
  </div>
 </div>
  </div>

</body>
</html>

Please let me know if it helps!

Thanks,
Shreyas

KenBuja · ‎07-02-2013

Thanks, Brittney,

Since dojo.AddOnLoad has been depreciated, I'd like to write this using the newer version. However, I've tried using dojo/ready and the code
    ready(function () {
        dojo.byId("divDialogMessage").innerHTML = parameters.welcomeText;
        dijit.byId("dialogWelcome").show();
    });
but that returns the error "TypeError: dijit.byId(...) is undefined"

and trying "dom.byId("dialogWelcome").show();" give me the error "dom.byId(...) is null"

It turns out that I was overthinking the syntax. This works

    ready(function () {
        divDialogMessage.innerHTML = parameters.welcomeText;
        dialogWelcome.show();
    });