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 ______________________________________________________________
-- 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.
