Change slider orientationE-mail This Topic Printable Version Give Us Feedback

View live sample

Description

By default, the zoom level slider is oriented vertically. You can orient the slider horizontally by setting the height property of the slider to be null.

esriConfig.defaults.map.slider = { right:"10px", bottom:"10px", width:"200px", height:null };

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Map Slider Position and Height</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
    <script type="text/javascript">
      dojo.require("esri.map");

      function init() {
        //configure map slider to be horizontally place at bottom right
        esriConfig.defaults.map.slider = { right:"10px", bottom:"10px", width:"200px", height:null };

        var map = new esri.Map("map", {
          nav:false
        });
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer"));
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    Configure map slider's orientation
    <div id="map" style="width:500px; height:500px; border:1px solid #000;"></div>
  </body>
</html>