Start Building Professional
Web Apps Today

Tabbar Resizing

I need some help getting a tabbar to resize correctly. Please look at the following URL:

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

This tab bar contains two tabs. The first tab contains a grid and the second tab contains a folder with a varying number of objects, depending on which category the user selects. The problem I'm having is that the tabbar size is always calculated based on the previous category selection, rather than the current category.

For example, when the page initially loads, the tabbar content size is correct. However, the default setting, when no category is selected, is to load "All Models". Therefore, when the user clicks on any of the categories, the tabbar content size is now too large, because it is calculated based on "All Models", not the current category. If the user then clicks back to the "Categories" tab, the content size is calculated based on the number of models in the last selected category.

It seems like there should be a way to manually refresh the tabbar size after the user clicks on any of the categories or tabs. I've tried inserting tabbar.adjustSize(); in various places throughout the code, but it doesn't seem to have any effect.

Here are some steps you can follow to see the problem.

1. Load the page (size is correct)
2. Click on "Models" (size is correct because it was calculated in step 1)
3. Click on "Categories" (size is too large because it was calculated in step 2)
4. Click on "Girls" (size is too large because step 3 didn't change anything)
5. Click on "Categories" (size appears correct, but in actuality this was just luck, because it was calculated in step 4)
6. Click on "Couples" (size is too small because it was calculated in step 4)

The behavior I want is that when the user clicks on the Categories tab, it calculates the size based on the grid in that tab. When the user clicks on the Models tab, or any of the categories, it calculates the size based on the number of models in that category.

You can try to add next code to tabbar initialization. 

tabbar.setOnTabContentLoaded(function(){
          tabbar.adjustSize();
});

I added that code and it didn't really help. It's doing the same thing as before. The only difference now is that when the page initially loads, the content area is too large, because it's based on the fact that "All Models" is loaded in the Models tab. Please take a closer look at the code and see if you can provide any other suggestions.

Please check attached sample. 

Thanks, but that sample code is really no help. I know how to load content into tabs and I know how to switch tabs programatically. My existing code already does that. The problem I'm experiencing is that after switching tabs, the content area is not automatically resizing to the correct dimensions. Can you please look at my specific code and tell me what I need to change to make it resize correctly?

The sample shows - that size of second tab always adjusted to the loaded content, while using setOnTabContentLoaded event for size normalization. 

>>the content area is not automatically resizing to the correct dimensions. 
by defautl tabbar adjust its size after tab switching, which is not work in your case, because content loaded by ajax, so it require additional call from setOnTabContentLoaded event ( in moment when data loaded )

> by default tabbar adjust its size after tab switching, which is not work in your case, because content loaded by ajax, so it require additional call from setOnTabContentLoaded event ( in moment when data loaded )

That's fine, but if you look at my source code, you will see that I added the setOnTabContentLoaded statement, exactly as it was shown in your sample, and it is still not resizing.

Please try to add next code 

myFolders.attachEvent("onXMLLoadingEnd",function(){
   window.setTimeout(function(){
          tabbar.setSize(null,100);
          tabbar.adjustSize();
          return true;
   },1);
});

OK, that's working much better. One last question...Is there any way to make the Categories tab size to the grid, rather than sizing to the content in the Models tab?

By default tabbar resize to max content size ( so if you have few tabs of different size the tabbar will take size of biggest one )
Such behavior can't be easily changed.