Hey All,

I had got something working for content resizing of iFrames within TabContainer and TabPanels. It's not elegant (I would like to know if you can intercept selected tab via JS and then target specific tab instead of resizing all again) but here goes...

Key items are line 27 - OnClientActiveTabChanged call to do the preload of frames and lines 30/36 with the onload within the iFrames to kick it off on first load (OnClientActiveTabChanged not done on first load). I have onload in all iFrames as my tab starting position can change by user.

Javascript is common resize code adjusted to my needs...and this was built in VS 2008 using Ajax toolkit TabContainer and TabPanel Controls

Hope this helps

Dave

1        <script type="text/javascript" language="javascript">
2        function changeHeight(frmpg)
3        {
4          var iheight=document.getElementById(frmpg).contentWindow.document.body.scrollHeight;
5          document.getElementById(frmpg).height=iheight;
6        }
7    
8        function preLoadFrames()
9        {
10           var iframeids = ["Iframe1", "Iframe2", ..., <Iframe(n)>]
11           var iheight; //not used, should delete but it's posted ;)
12    	//set i value to max out at the max # of frames (n) you have minus 1
13           for(var i = 0; i <= (n-1); i++)
14           {
15               changeHeight(iframeids[i]);
16           }
17       }
18       19   
20       ...
21       
22       <form id="form1" runat="server">
23       <asp:ScriptManager ID="ScriptManager1" runat="server">
24       </asp:ScriptManager>
25       <div>
26   
27       <cc1:TabContainer ID="TabContainer1" runat="server" OnClientActiveTabChanged="function(){preLoadFrames();}">
28           <cc1:TabPanel ID="TabPanel1" runat="server" TabIndex="0">
29               <ContentTemplate>
30                   <iframe id="Iframe1" onload="changeHeight('Iframe1')" scrolling="no" frameborder="no" marginheight="0" marginwidth="0" height="95%" width="95%" src="</iframe>
31               </ContentTemplate>
32           </cc1:TabPanel>
33   
34           <cc1:TabPanel ID="TabPanel2" runat="server" TabIndex="0">
35               <ContentTemplate>
36                   <iframe id="Iframe2" onload="changeHeight('Iframe2')" scrolling="no" frameborder="no" marginheight="0" marginwidth="0" height="95%" width="95%" src="</iframe>
37               </ContentTemplate>
38           </cc1:TabPanel>
39   
40   	...
41   
42       </cc1:TabContainer>
43       
44       </div>
45       </form>

I realize this is two weeks old but to your question "I would like to know if you can intercept selected tab via JS and then target specific tab instead of resizing all again", you can change your OnClientActiveTabChanged="function(){preLoadFrames();}" to...

OnClientActiveTabChanged="preLoadFrames2"

And add (or replace) "function preLoadFrames2(sender, args) { ... }" with your "preLoadFrames" (inside your script).  Now you can access the activeTabIndex by doing "sender.get_activeTabIndex()" inside your preLoadFrames2 function.

Alternativly you can make your own JS GetActiveTab function by adding something like this with your old preLoadFrames function

function GetActiveTabJS() { return ($find('<%=TabContainer1.ClientID%>')).get_activeTabIndex(); }

 Using you code I was able to figure out a problem of my own; If you have "ActiveTabIndex=" set in your TabContainer then the inital load of the tabContainer always returns "0" for scrollHeight (using either your method, or if you put the alert(window.document.body.scrollHeight) in the IFrames target HTML body's onload.

Cheers, NB

Thanks NB...

Will give it a go

Dave

Hey NB,

format of calling a JS function in the OnClientActiveTabChanged method. There was an associated post on this that I googled in the past.

BUT you put me on right track and got it working (don't need array of frame id's any more, just sync'ed tab index to match up to frame id) as follows...

Note: key was OnClientActiveTabChanged="function(sender, args){preLoadFrames1(sender.get_activeTabIndex());}"

1        <script type="text/javascript" language="javascript">
2        <!--
3       function changeHeight(frmpg)
4        {
5            if(document.getElementById(frmpg)!=null){
6                var iheight=document.getElementById(frmpg).contentWindow.document.body.scrollHeight;
7                document.getElementById(frmpg).height=iheight;
8            }
9        }
10       
11       function preLoadFrames1(index)
12       {
13           var frameID = "Iframe"+index;
14           changeHeight(frameID);
15       }
16       //-->
17       </script>
18   
19   ...
20   
21       <cc1:TabContainer ID="TabContainer1" runat="server" OnClientActiveTabChanged="function(sender, args){preLoadFrames1(sender.get_activeTabIndex());}">
22           <cc1:TabPanel ID="TabPanel0" runat="server" TabIndex="0" Font-Bold="True" HeaderText="page 1">
23               <ContentTemplate>
24                   <iframe id="Iframe0" onload="changeHeight('Iframe0')" scrolling="no" frameborder="no" marginheight="0" marginwidth="0" height="95%" width="95%" src="page1"></iframe>
25               </ContentTemplate>
26           </cc1:TabPanel>
27           
28           <cc1:TabPanel ID="TabPanel1" runat="server" TabIndex="1" Font-Bold="True" HeaderText="page 2">
29               <ContentTemplate>
30                   <iframe id="Iframe1" onload="changeHeight('Iframe1')" scrolling="no" frameborder="no" marginheight="0" marginwidth="0" height="95%" width="95%" src="page2"></iframe>
31               </ContentTemplate>
32           </cc1:TabPanel>
33       </cc1:TabContainer>
34   

Thanks Again NB

Dave...