Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I have an app that I'm building using the javascript API and have created 3 titlepanes in the header that open up to reveal information (basemap gallery, legend, layers). It functions exactly how I want it to, now I would like to make it "look pretty" by giving each pane its own image, where when you click on the image, it opens the pane in the same way.

I have tried overriding the CSS however, that gives all the titlepanes the same image. It looks as though I'll need to convert the titlepanes to a togglebutton. Reading through some of the samples it looks like I'll need to add additional code beyond the html change. Is there a best way to go about this edit?

EDIT: Here is an example of the html that creates the titlepane the "basemapGallery" div is the information inside the pane that I would like to make a drop down or any other type of button where I can control the image.

<div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false" open="false" style="float:right; margin-right:10px;">
                <div dojoType="dijit.layout.ContentPane"  style="width:275px; height:560px; overflow:auto;">
         <div id="basemapGallery"></div>
                </div>
  </div>
share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

I wound up using dojo.fx.toggler to build a function in the javascript and then update the html to create the button.

function basicToggle() {
toggler = new dojo.fx.Toggler({
    node: "basemap",
    showFunc : dojo.fx.wipeIn,
    hideFunc : dojo.fx.wipeOut
})

} dojo.addOnLoad(basicToggle);

and

<button dojoType="dijit.form.Button">    
<img src="basemap.png" />     
<script type="dojo/method" event="onClick">   
    toggler[(dojo.style("basemap","display") == "none") ? 'show':'hide']();
</script>

share|improve this answer
add comment

May your question belongs better to stackoverflow.com than to the GIS community.

Btw: if you post some of CSS you created otherwise no one will find a mistake. How do you create the panes in HTML or JavaScript? Which version of Dojo are you using?

EDIT:

I just tried something like this:

<div id="tp2" data-dojo-type="dijit/TitlePane" data-dojo-props="title: '<img src=\'images/bullet.png\'>I\'m a TitlePane Too'">
    Click arrow to close me.
</div>

And it worked pretty good. But I don't know if that would be the result you were looking for. But you can give it a try.

Btw: I was using dojo 1.8.0 but I recognized that you are using a different dojo version. Anyway the solution should work in a same way.

share|improve this answer
    
How do I move this to stackoverflow without crossposting? –  Craig Sep 17 '12 at 17:33
    
I guess you did it the right way. I think only moderators or somebody with high reputation can vote to move questions. –  mistapink Sep 18 '12 at 6:44
    
Thanks for the effort. This isn't what I'm looking for but I appreciate the help. –  Craig Sep 18 '12 at 14:07
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.