Ok, I got it working by following another link on that page. I just did this after the jquery file import:
<!-- BEGIN Prevent FOUC http://monc.se/kitchen/152/avoiding-flickering-in-jquery --> <script type="text/javascript"> document.write('<style type="text/css">body{display:none}</style>'); jQuery(function($) { $('body').css('display','block'); }); </script> <!-- END Prevent FOUC --> On Tue, Jan 5, 2010 at 7:23 PM, Clayton Dukes <cdu...@gmail.com> wrote: > Well... > I spoke too soon. I was all happy that the <li>'s didn't flash, but > didn't notice that the tabs were actually missing. > > Here's what I have: > <head> > <!-- BEGIN Prevent FOUC > http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content > --> > <style type="text/css"> > .js #hide_fouc {display: none;} > </style> > > <script type="text/javascript"> > document.documentElement.className = 'js'; > </script> > <!-- END Prevent FOUC --> > > Then, > In my tabs, I have: > <div id="tabs" class="ui-tabs" style="position: relative; top: 20px; > left: 1px;"> > <ul id="hide_fouc"> > <li><a href="#tab-Main">Main</a><span class="ui-icon > ui-icon-close">Remove Tab</span></li> > <li><a href="#tab-Graphs">Graphs</a><span class="ui-icon > ui-icon-close">Remove Tab</span></li> > > <li><a href="#tab-Table">Table</a><span class="ui-icon > ui-icon-close">Remove Tab</span></li> > <li><a href="#tab-About">About</a><span class="ui-icon > ui-icon-close">Remove Tab</span></li> > </ul> > > > This just hides the tabs completely...what am I doing wrong? > > > On Tue, Jan 5, 2010 at 6:53 PM, Clayton Dukes <cdu...@gmail.com> wrote: >> That worked - thank you very much! >> >> >> On Mon, Jan 4, 2010 at 12:40 AM, Steven Black <ste...@stevenblack.com> wrote: >>> Here's a nice reference on jQuery and the FOUC. >>> >>> http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content >>> >>> / Side question: should all functions use the $(document).ready >>> (function() or just some? / >>> >>> Just some. Some things, like event bindings for example, can >>> typically be deferred, and thus fire later. Try putting such code in >>> >>> $(window).load(function () { // run code }); >>> >>> **--** Steve >>> >>> On Jan 3, 11:25 pm, Clayton Dukes <cdu...@gmail.com> wrote: >>>> Thanks for the advice :-) >>>> I get what the site says about FUOC, but I don't quite get how to >>>> implement it. >>>> >>>> I've added the classes like below, but it doesn't seem to change >>>> anything. Am I supposed to add a css style for the classes or are they >>>> built in? >>>> >>>> <div id="tabs" class="ui-tabs" style="position: relative; top: 20px; >>>> left: 1px;"> >>>> <ul> >>>> <li><a href="#tab-Main">Main</a><span class="ui-icon >>>> ui-icon-close">Remove Tab</span></li> >>>> <li><a href="#tab-Graphs">Graphs</a><span class="ui-icon >>>> ui-icon-close">Remove Tab</span></li> >>>> <li><a href="#tab-Table">Table</a><span class="ui-icon >>>> ui-icon-close">Remove Tab</span></li> >>>> </ul> >>>> <!-- BEGIN Tab: tab-Main --> >>>> <div id="tab-Main" class="ui-tabs-hide"> >>>> >>>> Also, I have firebug, I just can't figure out why the pages are doing >>>> what they're doing (not just the table, but things like the portlet >>>> headers missing, etc.) >>>> Forgive me if I sound a bit ignorant, I just started using javascript >>>> and jquery about a month ago :-) >>>> >>>> > THEREFORE you either aren't saving state properly, or some Javascript >>>> > that runs in the first instance isn't being invoked in the second >>>> > instance. >>>> >>>> I'll have to dig deeper, but I suspect it's either some js not getting >>>> reloaded, or the same js loading twice because it's in the file saved >>>> to disk, or maybe a duplicate div id or something? >>>> Does all that get removed completely when the tab is deleted or just >>>> hidden somewhere? >>>> >>>> Side question: should all functions use the >>>> $(document).ready(function() or just some? I have a mixture of both, >>>> but didn't really understand when/where to use either. Is this why the >>>> FUOC is occurring? >>>> Again, new to this thing, sorry... >>>> >>>> >>>> >>>> On Sun, Jan 3, 2010 at 10:00 PM, Steven Black <ste...@stevenblack.com> >>>> wrote: >>>> >>>> > An unrelated suggestion: Google "Flash of unstyled content" and delay >>>> > the visibility of content until it is properly styled. >>>> >>>> > Related to this: you really should be developing with the aid of the >>>> > FireFox browser with the Web Developer add-in. "Inspect Element" is >>>> > your friend. >>>> >>>> > With FF + WD add-in it took me 5-seconds to ascertain that, >>>> >>>> > * The first instance of the Table pane, the table therein has >>>> > element.style {width:1618 px;} (on my monitor) >>>> >>>> > * The second instance of the Table pane, restored after deleting, the >>>> > table therein has element.style {width:596 px;} (on my monitor) >>>> >>>> > THEREFORE you either aren't saving state properly, or some Javascript >>>> > that runs in the first instance isn't being invoked in the second >>>> > instance. >>>> >>>> > Make sense? >>>> >>>> > Takeaway: run, don't walk, and get the FireFox Browser and add the Web >>>> > Developer add-in. I was using right-click, Inspect Element to inspect >>>> > the table in the Table pane. Same applies to the other panes, >>>> > presumably. >>>> >>>> > **--** Steve >>>> >>>> > On Jan 3, 6:16 pm, Clayton Dukes <cdu...@gmail.com> wrote: >>>> > > I've built a work-around to being able to re-add a deleted tab. >>>> > > The workaround builds the initial pages in an array, then echo's the >>>> > > contents out - and, at the same time, saves the contents to a temp >>>> > > directory. >>>> > > The reason I need to do it this way is I don't want to just "hide" data >>>> > > because some of it needs to be secured (like admin pages, etc) and >>>> > > users >>>> > > could easily view source. >>>> >>>> > > I have everything working, but for some odd reason, when I re-add the >>>> > > page >>>> > > from disk, some of the portlet headers are missing along with some >>>> > > general >>>> > > 'funkiness' and other missing items. >>>> > > I'm stumped as to what to try and fix and was wondering if anyone >>>> > > might be >>>> > > able to shed some light. >>>> >>>> > > The website is at:http://lztest.gdd.net >>>> > > login/pass is guest/guest >>>> >>>> > > If you remove any of the 3 initial tabs, you can re-add them from the >>>> > > menu. >>>> > > If I restore the main tab, the portlet headers don't show up (and also >>>> > > the >>>> > > watermarks in the time fields aren't working) >>>> > > If I restore the graphs page, all the graphs are missing. >>>> > > If I restore the Table page, the portlet header is missing (and, >>>> > > oddly, the >>>> > > table isn't sized properly). >>>> >>>> > > -- >>>> > > ______________________________________________________________ >>>> >>>> > > Clayton Dukes >>>> > > ______________________________________________________________ >>>> >>>> > -- >>>> >>>> > You received this message because you are subscribed to the Google >>>> > Groups "jQuery UI" group. >>>> > To post to this group, send email to jquery...@googlegroups.com. >>>> > To unsubscribe from this group, send email to >>>> > jquery-ui+unsubscr...@googlegroups.com. >>>> > For more options, visit this group >>>> > athttp://groups.google.com/group/jquery-ui?hl=en. >>>> >>>> -- >>>> ______________________________________________________________ >>>> >>>> Clayton Dukes >>>> ______________________________________________________________ >>> >>> -- >>> >>> You received this message because you are subscribed to the Google Groups >>> "jQuery UI" group. >>> To post to this group, send email to jquery...@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. >>> >>> >>> >> >> >> >> -- >> ______________________________________________________________ >> >> Clayton Dukes >> ______________________________________________________________ >> > > > > -- > ______________________________________________________________ > > Clayton Dukes > ______________________________________________________________ > -- ______________________________________________________________ Clayton Dukes ______________________________________________________________
-- You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to jquery...@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.
