Thanks very much for the help Klaus, I have been sidetracked onto
something else for a while and am only getting back to this now. I
have implemented your example code using 2 strategies. In both cases,
the function works by changing to the required tab. However, in both
cases, the tab content layout / styling is messed up or missing. As a
precaution I ensured that the content was not hidden by using the off-
left technique. This did not seem to change the outcome.
In the first, the tab content is loaded dynamically from a url. When
the function is executed the tab changes correctly but content is
loaded into the first tab instead of the selected tab. I am not sure
whether it is the first tab's content loading or whether the selected
tab's content is being loaded in the first tab.
In the second the tab content is static and included in the page. When
this function was called it changed to the correct tab and displyed
the correct content but the layout and styling was messed up.
So, I think that I will continue to use the second strategy but would
appreciate it if you could provide some insight into why the layout /
styling is messed up.
On Oct 23, 12:57�pm, Klaus Hartl <[EMAIL PROTECTED]> wrote:
> Not sure, but looks like you want this:
>
> $(function() {
>
> � � var $tabs = $('#tabtop, #innermemorialtabs').tabs();
>
> � � window.addExecutor = function() {
> � � � � $tabs.eq(0).tabs('select', 1)
> � � � � � � .end().eq(1).tabs('select', 0);
> � � };
>
> });
>
> --Klaus
>
> On 23 Okt., 14:30, LouisHeim <[EMAIL PROTECTED]>
> wrote:
>
> > Hi Klaus
>
> > Here is a simplified version of the source code (the real page is 1094
> > lines long). All I have done is strip out the content within each
> > fragment / panel. Thank you for taking the time out to look at this.
>
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
>
> > <head>
>
> > <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
>
> > <title><?php print $this->metaTitle; ?></title>
>
> > <script type="text/javascript" src="/js/jquery-1.2.6.min.js"></
> > script>
> > <script type="text/javascript" src="/js/ui.core.js"></script>
> > <script type="text/javascript" src="/js/ui.tabs.js"></script>
> > <script type="text/javascript" src="/js/jquery.jeditable.mini.js"></
> > script>
> > <script type="text/javascript" src="/js/jtip.js"></script>
> > <script type="text/javascript" src="/js/thickbox-compressed.js"></
> > script>
> > <script type="text/javascript" src="/js/tooltip.js"></script>
> > <script type="text/javascript" src="/js/jquery.wysiwyg.pack.js"></
> > script>
> > <script type="text/javascript" src="/js/jquery.scrollable.min.js"></
> > script>
>
> > <!-- custom navigation functions -->
> > <script type="text/javascript">
> > /*<![CDATA[*/
>
> > function addExecutor() {
>
> > $('#tabtop').tabs({
> > selected: 1,
> > load: function(e, ui) {
> > var $innertabs = $('#innermemorialtabs', ui.panel);
> > if ($innertabs.length) {
> > $innertabs.tabs(); // <= initialized like this the selected tab
> > will always be 0
> > selected = $innertabs.data('selected.tabs');
> > if (selected) {
> > $innertabs.tabs('select', 0);
> > }
> > }
> > }
> > });
>
> > }
>
> > /*]]>*/
> > </script>
>
> > </head>
>
> > <body style="background:url(/images/backgrounds/page-dashboard.jpg)
> > top center no-repeat #02204c;">
>
> > <!-- container - start -->
> > <div id="container">
>
> > <!-- dash-top - start -->
> > <div id="dash-top">
>
> > <!-- tabtop - start -->
> > <div id="tabtop">
> > <ul>
> > <li><a href="#fragment-1"><span>Main Tab One</span></a></li>
> > <li><a href="#fragment-2"><span>Main Tab Two</span></a></li>
> > <li><a href="#fragment-3"><span>Main Tab Three</span></a></li>
> > </ul>
> > </div>
> > <!-- tabtop - end -->
>
> > <!-- page - start -->
> > <div class="page">
>
> > <!-- fragment-1 (Main Tab One - Content) - start -->
> > <div id="fragment-1">
>
> > <!-- action box starts -->
> > <div class="ab-top"></div>
>
> > <!-- action-box - start -->
> > <div class="action-box">
>
> > <div class="ab-alert">
> > <span class="mainbutton">
> > <!-- clicking this link must take me to Main Tab Two -> Main
> > Tab Two - Inner Tab One -->
> > <a href="#" onclick="addExecutor();">Add an Executor</a>
> > </span>
> > </div>
>
> > <div class="clearme"></div>
>
> > </div>
> > <!-- action-box - end -->
>
> > <div class="ab-bottom"> </div>
> > <!-- action box ends -->
>
> > </div>
> > <!-- fragment-1 (Main Tab One - Content) - end -->
>
> > <!-- fragment-2 (Main Tab Two - Content) - start -->
> > <div id="fragment-2">
>
> > <!-- innertabs - start -->
> > <div id="innertabs">
>
> > <ul id="innerside">
> > <li><a href="#fragment-4"><span>Main Tab Two - Inner Tab One</
> > span></a></li>
> > <li><a href="#fragment-5"><span>Main Tab Two - Inner Tab Two</
> > span></a></li>
> > <li><a href="#fragment-6"><span>Main Tab Two - Inner Tab
> > Three</span></a></li>
> > </ul>
>
> > <!-- fragment-4 (Main Tab Two - Inner Tab One - Content) -
> > start -->
> > <div id="fragment-4">
> > </div>
> > <!-- fragment-4 (Main Tab Two - Inner Tab One - Content) - end
> > -->
>
> > <!-- fragment-5 (Main Tab Two - Inner Tab Two - Content) -
> > start -->
> > <div id="fragment-5">
> > </div>
> > <!-- fragment-5 (Main Tab Two - Inner Tab Two - Content) - end
> > -->
>
> > <!-- fragment-6 (Main Tab Two - Inner Tab Three - Content) -
> > start -->
> > <div id="fragment-6">
> > </div>
> > <!-- fragment-6 (Main Tab Two - Inner Tab Three - Content) -
> > start -->
>
> > <div class="clearme"></div>
>
> > </div>
> > <!-- innertabs - end -->
>
> > </div>
> > <!-- fragment-2 (Main Tab Two - Content) - end -->
>
> > <!-- fragment-3 (Main Tab Three - Content) - start -->
> > <div id="fragment-3">
>
> > <!-- innermemorialtabs - start -->
> > <div id="innermemorialtabs">
>
> > <ul id="innerside">
> > <li><a href="#fragment-7"><span>Main Tab Three - Inner Tab
> > One</span></a></li>
> > <li><a href="#fragment-8"><span>Main Tab Three - Inner Tab
> > Two</span></a></li>
> > <li><a href="#fragment-9"><span>Main Tab Three - Inner Tab
> > Three</span></a></li>
> > </ul>
>
> > <!-- fragment-7 (Main Tab Three - Inner Tab One - Content) -
> > start -->
> > <div id="fragment-7">
> > </div>
> > <!-- fragment-7 (Main Tab Three - Inner Tab One - Content) -
> > end -->
>
> > <!-- fragment-8 (Main Tab Three - Inner Tab Two - Content) -
> > start -->
> > <div id="fragment-8">
> > </div>
> > <!-- fragment-8 (Main Tab Three - Inner Tab Two - content) -
> > start -->
>
> > <!--
>
> ...
>
> read more �
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
