In the first case it looks to me that you're running into a timing
issue. Remember that tab content gets loaded asynchronously.
I can't tell why your layout is messed up without a demo, but make
sure you have valid HTML/CSS. Another common mistake is to serve full
pages (with html, body tags etc.) as tab content, when you only must
load chunks of HTML as these chunks are inserted into an existing
page.
--Klaus
On 9 Dez., 13:58, LouisHeim <[EMAIL PROTECTED]>
wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
