hide - 2 Dojo Dijit Content Panes Side by Side - When Showing/Hiding one, the other will not resize dynamically -
i have 2 dojo dijit contentpane's side side. want show/hide 1 of them, , have other 1 stretch dynamically needed. using esri mapping example uses 'dijit.layout.bordercontainer'. "divrightmenu" show/hide correctly, but, when opened, rather pushing "mapdiv" div, appears on top of it. want "mapdiv" div dynamically resize depending on visible state of "divrightmenu" div.
i'm including full page code below - have experimented style.display = block / none, style.visibility = visible/hidden, trying dynamically set width of divrightmenu 1 pixel 150 pixels. in cases, divrightmenu appears "on top of" mapdiv, rather "pushing" want. if change code divrightmenu visible default on page load, happens when hide disappears, blank spot once occupied still remains. surely simple i'm missing?
in past (standard css), combine "float:left/right" "overflow:hidden", , display:block/none, , achieve effect i'm after, dojo/dijit i'm not sure i'm missing. experimented various combinations of float/overflow on inline styling of 2 div tags in question, unable work. noted 1 poster mentioned programmatically created dijit contentpanes on fly overcome issue, hoping solution other (i need settings div's content retained between showing/hiding div, , i'm not sure if re-creating on fly allow this).
here 2 threads found touch on topic:
dojo toggle hide , show divs
toggling display of dojo dijit
these deal being able hide div or not. in case i'm able hide/show it, not able desired auto-resize behavior remaining div.
in case, full code sample included below - appreciated:
main index.htm code:
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta name="generator" content="html tidy windows (vers 14 february 2006), see www.w3.org"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="layout.css"> <link rel="stylesheet" type="text/css"href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djconfig = { parseonload: true } function togglevisibility(id) { //if (dijit.byid(id).domnode.style.width == '150px') { if (dijit.byid(id).domnode.style.display == 'block') { dijit.byid(id).domnode.style.display = 'none'; //dijit.byid(id).domnode.style.width = "1px"; //dojo.style(id, "visibility", "hidden"); } else { //dijit.byid(id).domnode.style.width = "150px"; dijit.byid(id).domnode.style.display = 'block'; //dojo.style(id, "visibility", "visible"); } dijit.byid(id).resize(); //dijit.byid("mapdiv").resize(); } </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script> <script src="layout.js" type="text/javascript"></script> <script type="text/javascript"> dojo.require("dijit.layout.bordercontainer"); dojo.require("dijit.layout.contentpane"); </script> </head> <body class="tundra"> <!--topmost layout container--> <div style="border:4px solid purple;width:100%;height:100%;" id="mainwindow" dojotype="dijit.layout.bordercontainer" design="headline" gutters="false"> <!--header section--> <div id="header" style="border:4px solid red;height:85px;" dojotype="dijit.layout.contentpane" region="top"> <div id="headerarea" style="border:2px solid black;height:50px;" dojotype="dijit.layout.contentpane" region="top">logo here</div> <div id="navmenuarea" style="border:2px solid green;height:35px;" dojotype="dijit.layout.contentpane" region="top">menu here | <input type="button" onclick="togglevisibility('divrightmenu');" value="toggle right menu"/></div> </div> <!--center section--> <!--center container--> <div id="mapdiv" style="border:2px solid green;margin:2px;" dojotype="dijit.layout.contentpane" region="center"></div> <!--right container--> <div id="divrightmenu" style="display:none;width:150px;border:2px solid orange;background-color:whitesmoke;" dojotype="dijit.layout.contentpane" region="right"> right menu </div> <!--footer section--> <div style="border:4px solid blue;height:50px;" id="footer" dojotype="dijit.layout.contentpane" region="bottom"> footer here </div> </div> </body> </html> layout.js code:
dojo.require("esri.map"); var resizetimer; var map; function init() { var initialextent = new esri.geometry.extent(-125.0244140625, 14.4580078125, -80.0244140625, 59.4580078125, new esri.spatialreference({ wkid: 4326 })); map = new esri.map("mapdiv", { extent: initialextent }); dojo.connect(map, 'onload', function(themap) { dojo.connect(dijit.byid('mapdiv'), 'resize', function() { resizemap(); }); }); var url = "http://server.arcgisonline.com/arcgis/rest/services/esri_streetmap_world_2d/mapserver"; var tiledlayer = new esri.layers.arcgistiledmapservicelayer(url); map.addlayer(tiledlayer); } //handle resize of browser function resizemap() { cleartimeout(resizetimer); resizetimer = settimeout(function() { map.resize(); map.reposition(); }, 800); } //show map on load dojo.addonload(init); layout.css code:
html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-color:#fff; overflow:hidden; font-family: "trebuchet ms"; } #header { background-color:#fff; color:#999; font-size:16pt; font-weight:bold; } #headerarea { text-align:left; } #navmenuarea { text-align:right; /*background:url(toolbar_bg.png) repeat #6788a2;*/ } #topmenu { background-color:#fff; color:#999; font-size:16pt; text-align:right; font-weight:bold; } #footer { background-color:#fff; color:#999; font-size:10pt; text-align:center; }
use dijit/layout/bordercontainer, place 2 contentpanes inside it, setting 1 of 2 containers' region property "center" , other 1 "right". when want resize 1 of contentpanes, call "resize" method object containing "w" property. after calling resize on contentpane, call "layout" on border container.
example :
require([ "dijit/layout/bordercontainer", "dijit/layout/contentpane", "dijit/form/button", "dojo/domready!" ], function(bordercontainer, contentpane, button){ var container = new bordercontainer({ design : "headline", gutters : false }, "container"); var pane1 = new contentpane({ region : "center", id : "pane1" }); var pane2 = new contentpane({ region : "right", id : "pane2" }); var toolbar = new contentpane({ region : "bottom", id : "toolbar" }); var btn = new button({ label : "change right side", onclick : function(){ pane2.resize({ w : math.random() * pane2.get("w") }); container.layout(); } }); toolbar.addchild(btn); container.addchild(pane1); container.addchild(pane2); container.addchild(toolbar); container.startup(); }); see fiddle : http://jsfiddle.net/psoares/vesy7/
Comments
Post a Comment