TitlePane

Submitted by criecke on Sun, 05/13/2007 - 12:06.

A TitlePane is a pane with a title on top that can be opened or collapsed. The visibility of the container is toggled by activating an arrow "button" on the title bar via the mouse or keyboard.

Examples

The rain in Spain falls mainly on the New York Stock Exchange.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>TitlePane Demo</title>

    <style type="text/css">

        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";

        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"

    </style>

    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js" 

        djConfig="parseOnLoad: true"></script>

        <script type="text/javascript">

           dojo.require("dojo.parser");

           dojo.require("dijit.TitlePane");

     </script>

</head>

<body class="tundra">

        <div dojoType="dijit.TitlePane" title="A Message from Thurston Howell III">

           The rain in Spain falls mainly on the New York Stock Exchange.  

        </div>

</body></html>

dijit.TitlePane A pane with a title on top, that can be opened or collapsed.
Attributes
duration	Integer 250	milliseconds to fade in/fade out
open	Boolean true	Whether pane is opened or closed.
title	String	Title of the pane. Use setTitle() to change after creation time.
Methods
setContent(/* String */content)	Typically called when an href is loaded. Our job is to make the animation smooth
setTitle(/* String */title)	sets the text of the title
toggle()	switches between opened and closed state

Accessibility (updated for 1.0)

Keyboard

Each title pane title is included in the tab order of the document.

Action	Key
toggle open/close of the title pane	enter or space key with focus on the title pane title
Navigate into an opened title pane	tab

Screen Reader Information

The title pane container will have an ARIA labelledby property which points to the id of the title pane title. The title pane title has the ARIA role of button and property of haspopup=true to indicate that it controls the display of the pane. The role of button is used to indicate to the user that an action will occur when the button is activated. The tilte pane container will have an ARIA role of region which will be supported in Firefox 3 and identified by future versions of the screen readers.

How i can size the Titlepane in 1.0?

Submitted by darkey on Thu, 11/08/2007 - 14:45.

Hi,

i try to set the width with this code:

<div dojoType="dijit.TitlePane" title="test" style="width:100px;">

But this doesn't work in 1.0. How can i set the width now?

Thank you, darkey

hmmm

Submitted by dante on Thu, 11/08/2007 - 17:11.

<script type="text/javascript">

dojo.require("dijit.TitlePane");

dojo.require("dojo.parser"); 

dojo.addOnLoad(function(){ 

     //dojo.parser.parse(dojo.query(".testNodeTitlePane"));

});

</script>

<div class="testNodeTitlePane">

    <div dojoType="dijit.TitlePane" style="width:220px;" title="foobar!">

              this should be 220px wide.

    </div>

</div>

I got it.

Submitted by darkey on Fri, 11/09/2007 - 09:56.

I got it.

<div dojoType="dijit.TitlePane" title="test" style="width: 100px;">

With the space in the Style Tag it works.

well thats weird. i've

Submitted by dante on Fri, 11/09/2007 - 14:21.

well thats weird. i've noticed too sometimes the presence of the ; after the 100px on the last element in a style="" tag throws things off.

you might experiment with: style="width:100px" style="width: 100px" and style="width:100px;" to see what happens.

i'm curious myself now actually.

Html as Title in Title Pane

Submitted by arun.george on Thu, 12/06/2007 - 11:23.

Can I have some html code in the title attribute
like

I found it working in FF and not in IE.
Any work around for this.

Remotely Loading -- href

Submitted by nileshbansal on Sat, 12/22/2007 - 12:27.

The documentation omits the fact that the content part of the titlepane can be remotely loaded by specifying href url. Those interested see
http://download.dojotoolkit.org/release-1.0.2/dojo-release-1.0.2/dijit/t...

titlepane events

Submitted by schnitzel25 on Fri, 01/18/2008 - 14:38.

is there any other events working for titlepane than onclick ? i want to do an administration interface with some windows and i want to save user data to the server when i close/open titlepanes.
i tried with onclick on dojo.byId('...').childNodes[1] (titlepane's title), but it's not working properly due to different event triggering from title and arrow. or i just can't see the way to do it.

can some1 pls give me a hint ? thanks in advance, cosmin.

You can probably do

Submitted by frankf on Fri, 01/18/2008 - 18:32.

You can probably do something like:

dojo.connect(dijit.byId('myTP'),"toggle",myFunction);

function myFunction() {
  alert('pane toggled');
}

it's exactly what i need,

Submitted by schnitzel25 on Fri, 01/18/2008 - 18:55.

it's exactly what i need, unfortunately it's not supported (atleast that's my conclusion). i tried with 'toggle', 'ontoggle', 'onopen' and so on, nothing works except 'onclick' which triggers on clicks anywhere inside the pane. i even scanned the source, all i could see is 'onOpen' there.

toggle is in the docs

Submitted by frankf on Fri, 01/18/2008 - 19:04.

toggle is in the docs (above), and is in the source:

http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/TitlePane.js

It is a "method", not an "event", if that is what you were looking for. I tested it in the test_TitlePane.html page, and it worked (unless I goofed in copy/paste into the post above).

dojo.connect can connect to both events and methods/functions.

thanks alot. i knew about

Submitted by schnitzel25 on Fri, 01/18/2008 - 19:22.

thanks alot.

i knew about the method, but i didn't know about the ability of dojo.connect to connect to methods aswell. i'll try it.

TitlePane containg ContentPane preload='false'

Submitted by stokes_dk on Mon, 02/25/2008 - 02:09.

Hi everyone. I'm new to Dojo (and loving it). I'm just having a little problem. I want to delay loading the contents of my content pane by placing it inside a TitlePane and setting preload='false'. E.g.

I expected that the ContentPane href would not be loaded until the TitlePane was opened, but this isn't what happens. I've seen another post where the person coded some javascript to make this work the way I want, but with dozens of instances it would mean a fair bit of additional code. I wondered if this is working as intended or if it's a problem with TitlePane or a problem with ContentPane.

Solved

Submitted by stokes_dk on Mon, 02/25/2008 - 15:36.

I solved this problem by using the href attribute on TitlePane. It's not documented but it works.

TitlePane Collapsable=true/false

Submitted by Firebird on Thu, 03/20/2008 - 21:37.

I think an attribute named Collapsable (Closeble, or something close to this) that define if the object can (can't) be collapsed should be interesting.

(sorry for the bad english). =D

Title panes move lower div content up and down

Submitted by Evanne on Tue, 04/08/2008 - 18:08.

Hi all,

Using the Dojo 1.1 release and I have been pleased with the look and feel and speed. So far, I see many improvements over Dojo 0.4 (the last release that I tried to use...).

I hope that I can explain my situation clearly. I have incorporated a series of 4 TitlePane widgets, that more or less act as a side-bar menu on one of my web forms. Each widget collapses up and down as advertised and looks really nice. Note that I do not have the 4 TitlePane widgets in a content pane or anything...they are just contained in a regular <div> tag that floats left.

Anyways, in another <div> tag, I have a banner that I want to travel the width of the page. However, no matter what I do position-wise, this banner seems to scroll up and down when I open/close the TitlePane widgets? Note that I tried to make this banner "fixed" using the CSS attribute position:fixed. The problem arises in that on another page that uses this same layout, there are more entries on the page and the banner winds up going across the information, rather than staying on the bottom of the page (due to its position being fixed). I have also tried playing with relative positioning as well.

Maybe this has nothing to do with the TitlePane. I notice on the test TitlePane html page that comes with the release, opening and closing of these panes results in the following widgets moving up and down as well.

Any help out there or do I just need to keep playing with the CSS? I'm running out of ideas....

Thanks,
Evanne

a couple of ideas

Submitted by rcoup on Mon, 05/05/2008 - 05:09.

Hi Evanne,

I think what you need to do is either:
* position the banner a fixed/minimum distance from the top of the container; or
* wrap the titlepanes in a fixed/minimum-height DIV

If the content of the titlepanes grows longer (so it would overlap with the fixed/min height) then neither of these solutions will be nice.

cant call toggle()

Submitted by roudex on Mon, 04/14/2008 - 08:08.

hi all
i'm new on dojo so i need help.

i have 2 titlepane under 1 titlepane so i want that when i clicked one of the sub titlepane i want the other one to be closed.

how will i do that

setTitle()

Submitted by Bin on Thu, 06/12/2008 - 23:42.

Can anyone demonstrate how to use the setTitle() function? I tried dojo.byId('myTitlePane').setTitle('foo'), but got an error. Thanks.

dijit.byId will work. (vs

Submitted by dante on Fri, 06/13/2008 - 02:43.

dijit.byId will work. (vs dojo.byId)

There is a cookie explaining why:
http://dojocampus.org/content/2008/05/06/jsid-dijitbyid-and-dojobyid/

Thanks, dante.

Submitted by Bin on Tue, 06/17/2008 - 04:21.

That cookie explains it very clearly. Thank you so much!

Search

The Book of Dojo

TitlePane

Examples

Accessibility (updated for 1.0)

Keyboard

Screen Reader Information

How i can size the Titlepane in 1.0?

hmmm

I got it.

well thats weird. i've

Html as Title in Title Pane

Remotely Loading -- href

titlepane events

You can probably do

it's exactly what i need,

toggle is in the docs

thanks alot. i knew about

TitlePane containg ContentPane preload='false'

Solved

TitlePane Collapsable=true/false

Title panes move lower div content up and down

a couple of ideas

cant call toggle()

setTitle()

dijit.byId will work. (vs

Thanks, dante.