Select to view content in your preferred language

Tab Container & Flip Through Identified Results

2393
10
07-23-2012 09:46 AM
JohnWall
Regular Contributor
I am attempting to create an infoWindow/pop-up which has two tabs within one container and allows a user to tab through multiple results at a given point. I have been able to successively code the tab container and identify separately, but am struggling to combine them. Here is my tab container code:

function getWindowContent(graphic) {
        //make a tab container 
        var tc = new dijit.layout.TabContainer({
          style: "width:100%;height:100%;"
        }, dojo.create("div"));

        //display attribute information1
        var cp1 = new dijit.layout.ContentPane({
          title: "Info (Deutsch)",
    content: "<b>Project Title:</b> " + graphic.attributes.Projekt + "<p><b>Laufzeit:</b> "+graphic.attributes.Laufzeit + "</p>" + "<p><b>Ansprechpartner:</b> " + graphic.attributes.Ansprechpa + "</p>" + "<a href="+graphic.attributes.Link__Deut+">Project Website</a>"
        });
  
        //display attribute information2
        var cp2 = new dijit.layout.ContentPane({
          title: "Info (English)",
    content: "<b>Project Title:</b> " + graphic.attributes.Project_Na + "<p><b>Years of Research:</b> "+graphic.attributes.Laufzeit + "</p>" + "<p><b>Contact Person:</b> " + graphic.attributes.Ansprechpa + "</p>" + "<a href="+graphic.attributes.Link__Deut+">Project Website</a>"
        });
  
        tc.addChild(cp1);
        tc.addChild(cp2);
  
  return tc.domNode;
      }
0 Kudos
10 Replies
JohnWall
Regular Contributor
Oops code is too big.  I have attached it to this message.

David


Hi David,
Thanks for getting back to me and providing your code. Unfortunately, I was not able to get the code to work for me either by loading exactly what you have nor after tooling around with it for a little bit. As such, I think I am going to scrap the idea for tabs and try multiple container panels within a border container. But, I am even having issues with that. Here is the code I have for that:

function getWindowContent(graphic) {
        var bc = new dijit.layout.BorderContainer({
   style: "width:600px;height:600px;background-color:lightblue;"
        }, dojo.create("div"));
  
  //display attribute information1
        var german = new dijit.layout.ContentPane({
          region: "leading",
    content: "<p>Hallo Welt!</p><p>info</p><p>info</p><p>info</p>"
        }, dojo.create("div"));
  
  //display attribute information2
        var french = new dijit.layout.ContentPane({
          region: "center",
    content: "<p>Bonjour tout le monde!</p><p>info</p><p>info</p><p>info</p>"
        }, dojo.create("div"));
  
        //display attribute information3
        var english = new dijit.layout.ContentPane({
          region: "trailing",
    content: "<p>Hello World!</p><p>info</p><p>info</p><p>info</p>"
        }, dojo.create("div"));
  
  bc.addChild(german);
  bc.addChild(french);
  bc.addChild(english);
  
  return bc.domNode;
      }


Do you have any ideas as to why my 'german' container is not showing while the 'english' one is depicted just fine and the 'french' one is compressed? I've tried various things, but cannot seem to get it to work.
Thanks,
John
0 Kudos