srbarker8
asked on
Javascript PostMessage to Parent from Child .. resize iframe according to jQueryUI tab height
Hi there,
I am stuck on a problem using postMessage to instruct a parent page to resize the iframe that holds the child page.
The child page has jqueryUI tabs on it and each tab can be drastically different in the height of the content ...
So, I set up some code on the select: function of the jQueryUI tab-set to get the height of the content of the tab.
But, my code works in Firefox but it does not work in Internet Explorer (sheesh!)
Here is a link to my sample parent page .. which works in FF but not in IE.
Link to my test page: http://www.carcaraway.com/parent_page.html
From the child, I need to tell the parent to resize the iframe based on the size of the currently selected tab's content.
Does someone know of a better way to do this ... aka .. a way that works in FF and IE, etc?
Please help!
Thx Scott
ps; In IE it resizes if the selected tab's content is BIGGER .. but if it is smaller ... I still get the same height value as the previously used tab....it does not change.
I am using $('body').outerHeight( true ); to get the height of the content ... but like I said ... does not work in all browsers...
I am stuck on a problem using postMessage to instruct a parent page to resize the iframe that holds the child page.
The child page has jqueryUI tabs on it and each tab can be drastically different in the height of the content ...
So, I set up some code on the select: function of the jQueryUI tab-set to get the height of the content of the tab.
But, my code works in Firefox but it does not work in Internet Explorer (sheesh!)
Here is a link to my sample parent page .. which works in FF but not in IE.
Link to my test page: http://www.carcaraway.com/parent_page.html
From the child, I need to tell the parent to resize the iframe based on the size of the currently selected tab's content.
Does someone know of a better way to do this ... aka .. a way that works in FF and IE, etc?
Please help!
Thx Scott
ps; In IE it resizes if the selected tab's content is BIGGER .. but if it is smaller ... I still get the same height value as the previously used tab....it does not change.
I am using $('body').outerHeight( true ); to get the height of the content ... but like I said ... does not work in all browsers...
remove the console.log
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thx - that works.
Are you are right about the old jquery.
But, I just tried to upgrade the jquery libs ... and it stopped working.
I am going to post it again with the new libs not working
Are you are right about the old jquery.
But, I just tried to upgrade the jquery libs ... and it stopped working.
I am going to post it again with the new libs not working
Be sure to use 1.1+ and not 2.0 which will not work in IE8
1.11 :)