Start Building Professional
Web Apps Today

dhtmlxTabbar Refresh Page Problem

Please look at the following URL:

http://www.modelscope.com/help_main.php

When you first visit that URL in IE or Firefox, the tab bar displays correctly. If you then refresh the browser in Firefox, it works fine. However, if you refresh in IE, the content within the tab disappears completely. If you click on any of the other tabs, the content comes back, but I need to fix this so that the content loads automatically after a page refresh.

Also, you will notice that a vertical scroll bar appears when you first go to a tab, even though I have:

tabbar.enableAutoSize(true,true);

It seems as though the enableAutoResize() function is miscalculating the needed height for the tab bar by a few pixels, which results in an unnecessary scroll bar. Can you fix that function so that it adds a few more pixels of height? Or perhaps add an additional parameter that would allow the user to specify an additional number of pixels when calling the function.

Problem caused by moment of tabbar initialization, it is initialized while document not fully loaded, it not a problem in normal case. But in IE, when you are loading it second time, data for content taken directly from cache, which slightly change behavior.

To resolve issue just add next line to tabbar init
    dhtmlxEvent(window,"load",function(){tabbar.adjustSize()});

>>Also, you will notice that a vertical scroll bar appears when you first go to a tab, even though I have:
Caused by custom styling inside content, the margin on top div doesn't included in calculation, you can wrap you loaded content in one more DIV , or just use attached css file instead of original one.

I did as you suggested and wrapped the loaded content in another DIV. However, I'm still getting the vertical scroll bar. I would prefer to use this approach, rather than messing with the CSS, so any additional help would be appreciated.

Please try to use attached js file instead of original one - it must resolve issue with incorrect size detection in IE.

Well, Firefox is now working perfectly, but I'm getting strange script errors in IE.

Problem caused by inline script in one of loaded tabs, it has next code

<script language=\"javascript\">
<!--
    function showhide(id1) {

The problem caused by <!-- , while it pretty normal for static HTML, tabbar failed to parse such content when it loaded by ajax-html ( it recognizes section as script , but can't execute it correctly because of HTML comment )

OK, that fixed the script errors. Thank you.

I have one last question. When you click on one of the FAQ's, the inner content becomes slightly wider, which results in a horizontal scroll bar. How can I force the inner content to wrap, so that I don't get this scroll bar?

The tabbar can't detect, if content inside it dynamically changed, so
a) you can adjust loaded content, so it will not change the width on expanding|collapsing
or
b) call tabbar.adjustSize() each time to update sizes
or
c) remove the overflow:auto; rules from dhtmlxtabbar.css - in such case tabbar will never show scrolls.

Thank you again for your continuing help with these issues.

I've added the tabbar.adjustSize(); to the end of the script that expands/collapses the FAQ's. It seems to work perfectly in IE, but not in Firefox. For example:

1. In Firefox, go to: http://www.modelscope.com/help_main.php
2. Click on "How can I delete my account?" (Vertical Scroll Bar appears)
   
3. Click on "How can I update my profile?" (Horizontal scroll bar appears)

How can I make it work in Firefox the same way that it works in IE?

Please try to use attached css file instead of original one.

Works perfectly. Thank you very much. Your support is OUTSTANDING!!!