Languages

Menu
Sites
Language
Run JavaScript on tab page change

Hello all,

I'm currently working on an application that consists of three pages, of which the second contains numerous charts powered by HighCharts. 

The charts render correctly when initializing them in "pageinit", but the width of the charts doesn't match the container properly. The charts seem to have the same width as the entire screen, not taking into account the padding in the div or it's actual width. By setting a timeout and thus initting the charts after  the second page was selected I can get the charts to render properly.

So I've been trying to have the charts init only after the second tab was selected by the user, what would be the best way to accomplish this? So far I've tried using the many jQuery mobile events, such as "pageload" and "beforepageload", but they either don't fire at all or fire too soon (causing the charts to be too wide again).

Any help would be greatly appreciated!

 

Edited by: Brock Boland on 17 Mar, 2014 Reason: Paragraph tags added automatically from tizen_format_fix module.
List

Responses

2 Replies
Lakshmi Grandhi
Did you try using "beforeshow" event. Please share your code to test functionality
Tiana Sweeney
Hi, thanks for your reply. I have solved it, though not sure if it's the best way to do it. I used the following code: 
$(document).delegate('#page2', 'pageshow', function() {
	//do things here
});
Do you maybe know an earlier/better way to do this?