dhtmlxTabbar Initialising and scrollbar

V2.5

The tabbar can be instantiated using the following html:

<title>For demo purpose only :: &1</title>
<link rel='STYLESHEET' type='text/css' href='js/dhtmlxtabbar.css'>
<script src="js/dhtmlxcommon.js"></script>
<script src="js/dhtmlxtabbar.js"></script>
<script src="js/dhtmlxtabbar_start.js"></script>
<script>
	dhtmlx.skin = "dhx_skyblue"
</script>

How do you invoke the inner scrollbar using html? Or, do you have to use the jscript to achieve such:

	var tabbar;
	function doOnLoad() {
        tabbar = new dhtmlXTabBar("a_tabbar", "top");
        tabbar.setSkin('dhx_skyblue');
        tabbar.setImagePath("codebase/imgs/");
        tabbar.addTab("a1", "Tab 1-1", "100px");
        tabbar.addTab("a2", "Tab 1-2", "100px");
        tabbar.addTab("a3", "Tab 1-3", "100px");
        [b]tabbar.showInnerScroll();[/b]
        tabbar.setHrefMode("ajax-html");
        tabbar.setContentHref("a1", "common/test_page_1.html");
        tabbar.setContentHref("a2", "common/test_page_2.html");
        tabbar.setContentHref("a3", "common/test_page_3.html");
        tabbar.setTabActive("a1");
    }
</script>

Initialising
When the page loads in the browser the contents of all the tabbar containers are displayed (flashed) on the screen well before the tabbar is drawn.

Is there anyway to delay loading or load on demand when the tab is selected?

How do you invoke the inner scrollbar using html?

[code]


[/code]

When the page loads in the browser the contents of all the tabbar containers are displayed (flashed) on the screen well before the tabbar is drawn.

You may try to hide tabbar divs initially:

[code]

[/code]

Must be missing something as the I’m not able to get the scrollbar to work.

    <?php 
      $bio = get_page( $post->ID )->post_content;   
      $transcript = get_post_meta($post->ID, "transcript", true);
    ?> 
<div ...>
<div id="a_tabbar" oninit="doOnInit()" style="width:500px; height:350px; margin-bottom: 20px;">
      <div id="html_1" ><div class="momshape"><div class="momlook"><?php echo $bio; ?></div></div></div>
      <div id="html_2" ><div class="momshape"><div class="momlook"><?php echo $transcript; ?></div></div></div>

        <script>
      		tabbar = new dhtmlXTabBar("a_tabbar", "top");
      		tabbar.setSkin('dhx_skyblue');
      		tabbar.setImagePath("<?php echo bloginfo('stylesheet_directory')?>/js/imgs/");
      		tabbar.addTab("a1","Biography","100px");
          tabbar.addTab("a2","Transcript","100px");
          tabbar.setContent("a1","html_1");
          tabbar.setContent("a2","html_2");
          tabbar.setTabActive("a1");
        </script>	
      </div>
      <script>
          function doOnInit(){
              a_tabbar.showInnerScroll();
          }        
      </script>
...
</div>

Between this thread and another related thread there is a solution (hopefully). In the above, I can access the WordPress objects, classes and functions to populate the tab content but miss out on the scrollbar (and potentially other dhtmlx APIs).

In the other thread all the dhtmlx ‘bits’ appear to work but not be able to populate the tab content with XML. An XML error is returned when trying to access the WordPress content by either calling a function (located in functions.php) with:

tabbar.loadXML("<?php my_xml() ?>);

viz:

[code]function my_tabbar(){
$div1 = ‘

’;
$div2 = ‘
’;

//include XML Header (as response will be in xml format)
if ( stristr($_SERVER[“HTTP_ACCEPT”],“application/xhtml+xml”) ) {
header(“Content-type: application/xhtml+xml”); } else {
header(“Content-type: text/xml”);
}
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");

print('<tabbar><row>');
print('<tab id="a1" width=' . "'100px'" . ' selected="1">Biography');
print("<content><![CDATA[" . $div1.$div2. get_page( $post->ID )->post_content ."</div></div>]]></content>");
print("</tab>");
print('<tab id="a2" width=' . "'100px'" . '>Transcript');
print("<content><![CDATA[" . $div1.$div2. get_post_meta($post->ID, "transcript", true) . "</div></div>]]></content>");
print("</tab>");
print("</row></tabbar>");

}
[/code]
or by trying to load XML with:

tabbar.loadXML("<?php echo bloginfo('stylesheet_directory')?>/get_xml.php?pid=" + <?php echo $post->ID?>);

What bit am I’m overlooking here - I’m fast running out of hair?

I’ve missed up two initialization approaches. They can not be used together.

You should use either <div id=“a_tabbar” class=“dhtmlxTabBar”
or tabbar = new dhtmlXTabBar(“a_tabbar”, “top”);

My previous answer concerned the 1st method.

In case of tabbar = new dhtmlXTabBar(“a_tabbar”, “top”); (your last code) you may do the following:

[code]

<?php echo $bio; ?>
<?php echo $transcript; ?>
    <script>
        tabbar = new dhtmlXTabBar("a_tabbar", "top");
        tabbar.setSkin('dhx_skyblue');
        tabbar.setImagePath("<?php echo bloginfo('stylesheet_directory')?>/js/imgs/");
        tabbar.addTab("a1","Biography","100px");
        tabbar.addTab("a2","Transcript","100px");
        tabbar.setContent("a1","html_1");
        tabbar.setContent("a2","html_2");
        tabbar.setTabActive("a1");

         tabbar.showInnerScroll();
    </script>   

[/code]