this definately seems more pronouced with jquery ui tabs than other tabs see http://www.mail-archive.com/jquery...@googlegroups.com/msg18846.html another issue with jquery FOUC and no css
On Feb 11, 12:43 pm, dodyryda <dodyr...@gmail.com> wrote: > thanks for your quick reply Richard, been trying to find out > what 'term' for what i was experiancing..thanks very much... > > it seems to me that the old webfx script still has the upper hand over > the jquery tabs ui > in terms of speed and support for degrading including headings. The > tabs are so much quicker / No fouc trouble.. > > I was worried that google may not be indexing my webfx tabs but I > think I just need to restructure my code > a little to improve it. It's a shame the jquery ui tabs do not > natively use headings tags as this provides a nice > structure for print preview pages without any css hacks. > > On Feb 11, 11:50 am, "Richard D. Worth" <rdwo...@gmail.com> wrote: > > > On Wed, Feb 11, 2009 at 5:55 AM, dodyryda <dodyr...@gmail.com> wrote: > > > > Hi > > > > After some advice here, as I may be implementing the jquery ui > > > incorrectly. > > > It seems slow to apply its theme. I have tried calling the core.js and > > > tab.js scripts from head and body section but always seems to render the > > > text content of the div's before applying the theme so the user gets a > > > poor > > > experiance... an example is > > >http://www.speedcrete.co.uk/blade-only-i35.html > > > This is commonly referred to as a Flash of Unstyled Content, or FOUC. > > > > in contrast the previous tab script I was using the webfx tabpane renders > > > perfectly. ie > > >http://www.speedcrete.co.uk/lite-man-self-propelled-ballon-light-i448... > > > > can anyone suggest a reason why this is happening, i am very new to this > > > so > > > may be doing something blindly obvious wrong... > > > This happens because the page loads without the tabs style. The browser > > first displays it as a user without JavaScript would see it. As soon as the > > document is ready, the Tabs script then adds the appropriate classes (which > > style it). You can add some of those classes or styles manually so that you > > don't see a flash, or not as prounounced of one, but there's a tough balance > > here. If you want the content of the tabs to not display at all, for > > example, you could hide them with css and leave it up to the Tabs plugin to > > show them. But that means someone that comes to your page without JavaScript > > (enabled) would not see that content. This is proposed as an option here, > > for example > > >http://docs.jquery.com/UI/Tabs#...prevent_a_FOUC_.28Flash_of_Unstyled... > > > but as it says "note that this will *not* degrade gracefully with JavaScript > > being disabled" > > > > As a side note I do like how the webfx script uses heading tags to > > > identify > > > the tabs. This way when it degrades / click print preview the tab headings > > > stay with the particular block of text they relate to.. shame the jquery > > > ui > > > tabs don't do this.. > > > You can have headings in addition to the links at the top that become the > > tabs. That's up to you. Using css you could specify that your headings > > should be hidden when JavaScript upgrades it to a Tabs. And you could limit > > the hiding of them (even the styling of tabs entirely) to not effect print, > > again just using css. > > > - Richard --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to jquery-ui@googlegroups.com To unsubscribe from this group, send email to jquery-ui+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
