esriSimpleSlider opacity

1041
5
03-23-2012 07:25 AM
GregoryDillon
New Contributor III
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.
0 Kudos
5 Replies
derekswingley1
Frequent Contributor
Try this:

dojo.style(dojo.byId("map_zoom_slider"), "opacity", "0.5")
0 Kudos
GregoryDillon
New Contributor III
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.
0 Kudos
by Anonymous User
Not applicable
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).
0 Kudos
GregoryDillon
New Contributor III
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.
0 Kudos
by Anonymous User
Not applicable
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).
0 Kudos