I have created a toolbar and added buttons to it. After that I would like to get its width and height. I thought that would be an easy task but I have spent a long time searching and have yet to find anything that works. Can someone help me out?
Thanks
Mike
get toolbar width and height
Submitted by dmikester1 on Thu, 09/04/2008 - 14:13.
- Login or register to post comments
- Subscribe post
something like: var node =
something like:
var node = dijit.byId("thatToolbar").domNode;
var size = dojo.coords(node);
console.dir(size);
?
That might work. Firebug is
That might work. Firebug is telling me: "dijit.byId("navToolbar") is undefined"
Thanks
Mike
Hmm, maybe share a little
Hmm, maybe share a little code. If you toolbar has id="navToolbar" you should be fine, unless of course you are calling djit.byId() before addOnLoad fires.
Sure. js: dojo.addOnLoad(init
Sure. [edited for markup:]
js:
function init() {
//esriConfig.defaults.io.proxyUrl = "proxy.ashx";
//esriConfig.defaults.io.alwaysUseProxy = false;
map = new esri.Map("map");
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://server/rest/services/Monroe2/MapServer");
map.addLayer(dynamicMapServiceLayer);
esriConfig.defaults.map.zoomDuration = 1200; //time in milliseconds; default is 250
esriConfig.defaults.map.zoomRate = 100; //refresh rate of zoom animation; default is 25
esriConfig.defaults.map.slider = { right:"0px", top:"10px", width:null, height:"100px" };
gsvc = new esri.tasks.GeometryService("http://server/rest/services/Geometry/GeometryServer");
navToolbar = new esri.toolbars.Navigation(map);
dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
dojo.connect(map, "onExtentChange", showExtent);
function extentHistoryChangeHandler() {
dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
}
//navToolbar.zoomToFullExtent();
showLayerList();
}
in my body:
<div class="raphael" id="toolbar"></div>
<div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="zoomIn();">Zoom In</div>
<div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="zoomOut();">Zoom Out</div>
<div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="zoomFull();">Full Extent</div>
<div dojoType="dijit.form.Button" id="zoomprev" iconClass="zoomprevIcon" onClick="navToolbar.zoomToPrevExtent();">Prev Extent</div>
<div dojoType="dijit.form.Button" id="zoomnext" iconClass="zoomnextIcon" onClick="navToolbar.zoomToNextExtent();">Next Extent</div>
<div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="pan();">Pan</div>
<div dojoType="dijit.form.Button" id="deactivate" iconClass="deactivateIcon" onClick="navToolbar.deactivate();">Deactivate</div>
<div dojoType="dijit.form.Button" id="parcelinfo" iconClass="parcelinfoIcon" onClick="parcelInfo();">Parcel Info</div>
<div dojoType="dijit.form.Button" id="parcelsearch" iconClass="parcelsearchIcon" onClick="parcelSearch();">Parcel Search</div>
<div dojoType="dijit.form.Button" id="cleargraphics" iconClass="clearIcon" onClick="map.graphics.clear();">Clear</div>
<div dojoType="dijit.form.Button" id="printbutton" iconClass="printIcon" onClick="window.print();">Print Map</div>
</div>
<script type="text/javascript">
var width = dojo.byId('navToolbar').offsetWidth;
var height = dojo.byId('navToolbar').offsetHeight;
var node = dijit.byId('navToolbar').domNode;
var size = dojo.coords(node);
console.dir(size);
</script>
yep - so your dijit.byId("")
yep - so your dijit.byId("") and dojo.byid("") calls in that last script tag _should_ be failinging. If they aren't, its because the nodes exist in the dom above the script tag, and is a fluke. IE6 will likely blow up with those calls, violently. wrap them in an addOnLoad function:
var width = dojo.byId('navToolbar').offsetWidth;
var height = dojo.byId('navToolbar').offsetHeight;
var node = dijit.byId('navToolbar').domNode;
var size = dojo.coords(node);
console.dir(size);
});