I am currently finalising a simple website for a project I'm working on. I have two tab controls. One on the right of the page, and one on the left. Both have 3 tabs that when clicked display different content. I created one a while ago, and it has worked perfectly, I have recently returned and tried to add a second one. The problem is, when the page loads, the first one works, but the second one loads with all three content areas displayed down the page. Oddly, once I click one of the tabs on the second controller, only that tab is displayed, and the entire control seems to work correctly just like the other one.

I'm sure I have made a stupid error, but I just cant seem to find it. Any help would be massively appreciated.

Removing the .invalidateSize(); does make both work perfectly, do you know how i could invalidate the chart size another way? And why doest this effect the other controller? Thanks
–
user2014175Jul 19 '13 at 16:43

As soon as an exception is encountered, javascript ends the current thread of execution. That means no code after the chart3.invalidateSize() call is run at all, which means switch_tabs2() is never invoked. With respect to invalidateSize(), I don't know what you're trying to accomplish there. The DOM elements in your example will automatically resize to fit their content. Perhaps you're using a charting library of some sort which has an invalidateSize() call? Regardless, chart3 was never defined in your example, so you won't be able to call anything on it without having first defined it.
–
David MillsJul 19 '13 at 16:53

All fixed! Thanks very much for all your help. I am indeed using amcharts to produce graphs from an sql db ... I had read the documentation on invalidateSize() incorrectly, and have now moved it to its correct position. Its all working perfectly, thanks again!
–
user2014175Jul 19 '13 at 17:12