Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Randell Benavidez on Jun 12, 2009 02:08
open dhtmlx forum
How to auto resize tabbar iframes

Hi, how do I autoresize tabbars set to hrefmode="iframe"? I don't want to have to scroll through the long content of one of the tabs. Thanks!
Answer posted by Alex (support) on Jun 12, 2009 02:49

Hello, 

tabbar doesn't provide any functionality that allows to resize the tabbar in case of iframe-based initialization.

If you load content from the same domain, you can use "ajax-html" mode to load pages. That mode allows to use enableAutoSize method. Please, see the sample: dhtmlxTabbar/samples/loading_creating_tabs_content/tab_ajax_html.html

In case of different domains, you can use only iframe-based loading mode and the security rules don't allow to get the page property. In common case the tabbar size can be changed by setSize(width,height) method.

Answer posted by Randell Benavdez on Jun 12, 2009 03:04
I tried using ajax-html hrefmode but it doesn't load my scripts inside the loaded html.  Isn't it supposed to load the process the scripts?
Answer posted by Alex (support) on Jun 12, 2009 05:40

Tabbar executes javascript that is defined in tab content. The sample dhtmlxTabbar/samples/loading_creating_tabs_content/tab_ajax_html.html demonstrates that. Here the second tab contains dhtmlxgrid (the grid initialization code was defined in the tab content).

Regarding using iframes mode - as it was written in the previous answer you can use setSize method to change tabbar size. You can call this method from iframe when its content is loaded:

function doOnLoad(){
  parent.tabbar.setSize(document.body.scrollWidth,document.body.scrollHeight,true);

}

Answer posted by Randell Benavidez on Jun 12, 2009 06:57
Okay, I tried tab_ajax_html.html again.  This time I'm getting the ErrorType: LoadXML one.  I assume that this code here:
<?xml version="1.0"?>
<tabbar  hrefmode="ajax">
    <row>
        <tab id="b1" width='100px' selected="1"  href="slow_ajax.php?num=0">Google</tab>
        <tab id="b2" width='100px' href="slow_ajax.php?num=1">Yahoo</tab>
    </row>
</tabbar>
is the one referred to as tabs7.xml, right? If yes, then probably I'm on the right track.  The tab tag inside the xml has an href attribute.  What's supposed to be the value of that attribute?  I'm assuming that it's the html that I want to load which contains html and JavaScript.  What could be the problem? When I remove the href's value, the error doesn't appear so I assume that the problem really stems from the content of that href.
Answer posted by Alex (support) on Jun 12, 2009 07:10

This sample is referred to tabs7a.xml - http://dhtmlx.com/docs/products/dhtmlxTabbar/samples/loading_creating_tabs_content/tab_ajax_html.html and http://dhtmlx.com/docs/products/dhtmlxTabbar/samples/loading_creating_tabs_content/tabs7a.xml

The xml that you provided uses "ajax" mode. 

Answer posted by Randell Benavidez on Jun 12, 2009 07:26
Now I'm getting an Invalid Request.  I wish there were better examples.
Answer posted by Alex (support) on Jun 12, 2009 07:45
Could you please explain what's wrong with these examples ? This information can be useful for us. 
Answer posted by Randell Benavidez on Jun 12, 2009 08:20
For example, in my case, I simply want to load an html with a javascript inside it asynchronously whenever I click a tab.  Obviously, I would need at least 2 html pages, right? The first one is where I will load the second html.  What should be the content of the first html: load the dhtmlxtabbar js, a div where to load it, etc.  The document here: http://www.dhtmlx.com/docs/products/docsExplorer/index.shtml?node=dhtmlxtabbar doesn't do that.  Under Loading Content with AJAX, only the XML is shown.  How about the rest of the stuff that will make it work?  The rest of the examples above it won't really work with that XML.
Answer posted by Randell Benavidez on Jun 12, 2009 08:51
I tried it again.  The regular text in the html I'm loading is being rendered but not the JavaScript part.
Answer posted by Alex (support) on Jun 12, 2009 08:52

Probably you're right. There should be also the example for "ajax-html" loading mode. 

Thank you for the information. 

In case of "ajax-html" the tabbar requires html content. In case of "ajax" mode the paths that are defined in href attributes are xml files. If you use "ajax-html", the path to html. Please, take a look http://dhtmlx.com/docs/products/dhtmlxTabbar/samples/loading_creating_tabs_content/tabs7a.xml  

If the issue still perists, please, provide the sample to re-create the issue. 

Answer posted by Randell Benavidez on Jun 12, 2009 08:56
And by the way, I tried both Loading Content with AJAX and the Mixed loading mode.  Neither executed the script inside the tab content.
Answer posted by Alex (support) on Jun 12, 2009 09:02

Please, take a look at the ready sample in the suite package dhtmlxTabbar/samples/loading_creating_tabs_content/tab_ajax_html.html - it demonstrates that javascript, that is called in the content, is executed when the tab is loaded.

Please, provide the sample if the issue is still actual.

Also you can use iframes mode as we described in one of the answers (setSize method). 

Answer posted by Randell Benavidez on Jun 12, 2009 10:14
I'm having a hard time isolating the problem with the ajax-html.  I guess I'll use the resizing of the iframe for now. Thanks Alex!
Answer posted by Ian on Aug 11, 2009 12:55
I'm also trying to get my tab content to auto-resize.  I'm using an XML file to load my tab definitions with  <tabbar hrefmode="iframe"> mode set.

I couldn't really make clear what was being suggested.  I have my main page as index.html.  That in turn loads an xml file which has hrefmode set to "iframe". So where is it that I have to place the javascript function that was suggested:

function doOnLoad(){
  parent.tabbar.setSize(document.body.scrollWidth,document.body.scrollHeight,true);

}

Does this go into the <head> section of my index.html file and then get called by each iframe script that is specfied in my XML file using <body onload='doOnLoad()'> or does the script and the body onload call both go into each iframe script ?

Would be really helpful if you could explain it again, I really appreciate the time you guys take answering questions but in this particular case I'm just not clear as to what you're suggesting.


Answer posted by Alex (support) on Aug 12, 2009 03:05

This method can be called from the page (from each page) loaded inside iframe in body onload event:

<body onload="doOnLoad()">

Answer posted by Ian on Aug 12, 2009 04:21
Yes but where is the javascript function doOnLoad placed?

Answer posted by Alex (support) on Aug 12, 2009 05:14
It doesn't matter. For example in the header part of the page where it's called.
Answer posted by Ian on Aug 12, 2009 06:19
OK, well I tried putting the function and the "body onload" statement into one of the tab content scripts and all that happens is that all my tabs disappear and I'm still left with a scrollbar on the tab content section.

This is what I have:

The main program, index.html which contains:

<head>
<link rel="stylesheet" type="text/css" href="dhtmlxtabbar.css">
<script  src="dhtmlxcommon.js"></script>
<script  src="dhtmlxtabbar.js"></script>
</head>

<body style="height:100%;">

<table>
<tr>
<td>
<div id="a_tabbar" style="width:780px;height:680px;margin-left:20px;margin-top:10px;"/>
</td>
</tr>
</table>

<script>
tabbar=new dhtmlXTabBar("a_tabbar","right");
tabbar.setImagePath("imgs/");
tabbar.loadXML("tabs4.xml");
tabbar.setStyle("modern");
</script>



The XML loader file:

<?xml version="1.0"?>
<tabbar hrefmode="iframe">
    <row>
        <tab id="a1" selected="1" width='70px' href="index.php">1</tab>
        <tab id="a2" width='60px' href="view.php?status=s">2</tab>
        <tab id="a3" width='60px' href="add.php">3</tab>
        <tab id="a4" width='60px' href="view.php?status=u">4</tab>
        <tab id="a5" width='70px' href="view.php?status=c">5</tab>
        <tab id="a6" width='70px' href="view.php?status=d">6</tab>
        <tab id="a7" width='80px' href="extras.php">7</tab>
        <tab id="a8" width='70px' href="charts.php">8</tab>
        <tab id="a9" width='60px' href="cards.php">9</tab>
        <tab id="a10" width='70px' href="donate.php">10</tab>
    </row>
</tabbar>



Then, for example, in the script which is loaded by the second tab I have in the head section:

<script>
function doOnLoad(){
  parent.tabbar.setSize(document.body.scrollWidth,document.body.scrollHeight,true);
}
</script>

and also:

<body onload="doOnLoad()">



When I click on the tab to load this script all that happens is that all the tabs disappear and ther is no resizing.  Do you have a working example showing this working anywhere?







Answer posted by Alex (support) on Aug 12, 2009 07:27

You can use own approach to get content size. The possible solution is attached.

Attachments (1)
1250085799.zip86.73 Kb
Answer posted by Ian on Aug 14, 2009 08:14
Thanks for providing the attachment, I have now made some progress but still have a problem.  The tab content is now auto-resizing but I had to add an extra bit of javascript so that in those tabs with very little content the rest of my tabs where still showing.  For example, I have 10 tabs and one of the tabs only has 2 lines of content.  When that tab was displayed & auto-resized the whole display shrunk and only my first 3 tabs were showing with scrolling necessary to see the remaining 7 tabs.

I fixed this by adding a line of javascript so that there was a minimum tab content size that would make sure even with those tabs that had very little content at least the whole container with all the tabs was showing.

var container = document.getElementById("overall");
var temp = container.offsetHeight;
if (temp < 700) {temp = 700};
parent.tabbar.setSize(780,temp+20);

The problem I'm still left with is that the content of each of my tabs has a background image and even though I can make the tab content area be large enough to show all the tabs the background image does not reflect that.  So where I have a tab with just a couple of lines of text in it the background image is only shown behind that info and the rest of the auto-sized tab is blank.  Is there a way round this ?



Answer posted by Alex (support) on Aug 14, 2009 08:28
The tabbar API doesn't provide methods to operate with tabs content. You should use own approach in this case.