Title Pane close on start

MathewSuran · ‎05-27-2014

This should be an easy question that I can not figure out. How do I set the title pane to default closed on startup? Right now the default is open(expanded) when it loads. This is different then .leftpanevisibility to hide the entire content pane. Thanks!

SteveCole · ‎05-27-2014

Ok, well, here's another option on the JS side of things you can try while your application loads. You basically tell the titlePane to close programatically. Here's my same example as before but using this JS method instead of specifying it on the HTML side of things:

[HTML]<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"/>

<script>dojoConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>

<script>
   dojo.require("dijit.TitlePane");

   function init() {
    dijit.byId("tp2").set("open",false);
   };

   dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="tp2" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'I\'m a TitlePane Too'">
   Click arrow to close me.
</div>
</body>
</html>[/HTML]

Now, the app you inherited may be structured a little different but the key line is that one line of code in my example's init function.

View solution in original post

SteveCole · ‎05-27-2014

Wouldn't use just set one of it's properties with data-dojo-props on the HTML side of things like this:
[HTML]<div data-dojo-type="dijit/TitlePane" data-dojo-props="open: false"></div>[/HTML]

Steve

MathewSuran · ‎05-27-2014

How different would that be for legacy?

SteveCole · ‎05-27-2014

The *ONE* time I assume someone is using AMD... LOL. 😄

Actually, not much different. Here's an HTML line for a contentPane from one of my legacy projects:
[HTML]<div id="dataLayerSection" dojoType="dijit.layout.ContentPane" title="Data Layers" data-dojo-props="label:'Click to Expand'" selected="true">[/HTML]

So basically the forward slashes become periods.

MathewSuran · ‎05-27-2014

Haha you know what assuming does...:D

I figured the slashes for periods from the dojo webpage but can not seem to figure out where to integrate properly into the layout of my HTML. Ill keep messing with it. Thx.

MathewSuran · ‎05-27-2014

I cant figure out how to add your suggestion to what I have:

[HTML]<div data-dojo-type="dijit.layout.BorderContainer" id="leftPane" data-dojo-props="design:'headline', gutters:false,region:'left'" style="height:100%;padding:0;display:none;">
</div>[/HTML]

SteveCole · ‎05-27-2014

Can you post your HTML code? That would be the best way to help.

MathewSuran · ‎05-27-2014

That is the HTML code I'm working with.

SteveCole · ‎05-27-2014

Are you literally starting from scratch? You asked about legacy code so I thought you already had some code / HTML written.

MathewSuran · ‎05-27-2014

Basically I was given a project that was 75% complete and I have had to reverse engineer to figure out what the company had done. I am completely new to all of this and have been figuring it out as I go along. I posted the HTML code 3 posts ago but here it is again:
[HTML]<div data-dojo-type="dijit.layout.BorderContainer" id="leftPane" data-dojo-props="design:'headline', gutters:false,region:'left'" style="height:100%;padding:0;display:none;">
</div>[/HTML]

Let me know if you need more than that.