topic Re: esriSimpleSlider opacity in ArcGIS JavaScript Maps SDK Questions

esriSimpleSlider opacity

GregoryDillon — Fri, 23 Mar 2012 14:25:58 GMT

How do I set the opacity on the esriSimpleSlider

I've tried:

.esriSimpleSlider div
{
    height: 40px !important;
    width: 60px !important;
    color: Black;
     filter: alpha(opacity=50, style=0);
    -moz-opacity: 50%;
    opacity: 0.5;
    padding-top: 10px;
}

This does lighten my black to gray (so its doing something), but does not allow me to see throught the background of the slider to map underneath.    I seems I need another div or something to target to a adjust it further, but don't know the ID of that tag.

Re: esriSimpleSlider opacity

derekswingley1 — Sat, 11 Dec 2021 23:29:27 GMT

Try this:

dojo.style(dojo.byId("map_zoom_slider"), "opacity", "0.5")

Re: esriSimpleSlider opacity

GregoryDillon — Sat, 11 Dec 2021 23:29:29 GMT

Try this:

dojo.style(dojo.byId("map_zoom_slider"), "opacity", "0.5")

I duplicated the sample http://help.arcgis.com/en/webapi/javascript/arcgis/demos/mobile/mobile_simplemap.html
and tried inserting this code just after the " dojo.require("esri.map");" statement and it can't find the element. I also tried it just after the " function init() {" line and it failed too.

Is the letter casing correct for "map_zoom_slider"? If its correct, can you please tell me where to insert this line and/or test it in the sample.

Re: esriSimpleSlider opacity

Anonymous User — Sat, 11 Dec 2021 23:29:31 GMT

You could try either adding a style for the element with the map_zoom_slider id:

   #map_zoom_slider
   {
    opacity:0.5;
    filter:Alpha(Opacity=50);
   }

Or...add the dojo.style(dojo.byId("map_zoom_slider"), "opacity", "0.5"); code inside of the "onLoad" callback for the map object (say around line 59 in the original sample).

Re: esriSimpleSlider opacity

GregoryDillon — Sat, 11 Dec 2021 23:29:34 GMT

You could try either adding a style for the element with the map_zoom_slider id:
   #map_zoom_slider
   {
    opacity:0.5;
    filter:Alpha(Opacity=50);
   }
Or...add the dojo.style(dojo.byId("map_zoom_slider"), "opacity", "0.5"); code inside of the "onLoad" callback for the map object (say around line 59 in the original sample).

Okay I finally figured this out. You really want to take note of this!

The map DIV tag MUST have an id="map", I had mine set to "mapDiv" which worked fine in conjunction with "map = new esri.Map("mapDiv", { logo: false });" statement, but will not allow you to style "map_zoom_slider". Once I changed the id to "map" and change to javascript statement to "map = new esri.Map("map", { logo: false });" I was good.

This should probably be documented somewhere in the API.

Re: esriSimpleSlider opacity

Anonymous User — Sat, 11 Dec 2021 23:29:36 GMT

If the id for your map div is "mapDiv", then the following alternatives should have worked:

   #mapDiv_zoom_slider
   {
    opacity:0.5;
    filter:Alpha(Opacity=50);
   }

or in the onLoad callback:

dojo.style(dojo.byId("mapDiv_zoom_slider"), "opacity", "0.5");

Basically, the map div's ID is being used as the initial prefix for the slider's ID.

In Firefox with the Firebug extension, or in Google Chrome, you can usually right-click on an object in the page and "Inspect" an element - this helps identify properties of HTML elements (such as an ID).