Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] TabView content flickers on load

Expand Messages
  • Ted Husted
    The CSS approach works great with static tabs, but how do we make a tab with dynamic content visible once the rest of the page is loaded? With something like
    Message 1 of 11 , May 2, 2007
    • 0 Attachment
      The CSS approach works great with static tabs, but how do we make a tab with
      dynamic content visible once the rest of the page is loaded?

      With something like

      <div id="elBody_Content" class="yui-content">
      <div id="elHome">
      <p>Welcome to the application!</p>
      </div>
      <div id="elRegion">
      <p>This will be the Region page</p>
      </div>
      <div id="elLog">
      <div id="elLogReader" ></div>
      </div>

      The text for "Welcome to the application" and "This will be the region page"
      show up just fine, but the Log tag is blank.

      TAI, Ted.




      -Ted.



      Dav Glass wrote:
      >
      > Tom -
      >
      > Just add this line to your CSS where #demo is the id of your TabView:
      >
      > #demo div.yui-content div {
      > display: none;
      > }
      > Hope that helps 8-)
      >
      > Dav
      >
      > "tom.genoni" <yui@...> wrote:
      > http://developer.yahoo.com/yui/examples/tabview/basic_from_markup.html
      >
      > I'm seeing a flicker of the content when the page loads in IE. I
      > didn't see any methods for dealing with it in the docs. Any ideas?
      >
      > I've used Tabber in the past and it has some 'prevent flicker' code
      > that hides the tabs and the content until all of it finishes loading
      > but I haven't yet been able to replicate it with the YUI version.
      >
      > http://www.barelyfitz.com/projects/tabber/example.html
      > (view source for the code that prevents the flicker)
      >
      >
      >
      >
      >
      > Yahoo! Groups - Join or create groups, clubs, forums & communities. Links
      >
      >
      >
      >
      >
      >
      > Dav Glass
      > dav.glass@...
      > blog.davglass.com
      >
      >
      > + Windows: n. - The most successful computer virus, ever. +
      > + A computer without a Microsoft operating system is like a dog
      > without bricks tied to its head +
      > + A Microsoft Certified Systems Engineer is to computing what a
      > McDonalds Certified Food Specialist is to fine cuisine +
      >

      --
      View this message in context: http://www.nabble.com/TabView-content-flickers-on-load-tf3282135.html#a10292497
      Sent from the ydn-javascript mailing list archive at Nabble.com.
    • Ted Husted
      To demonstrate the problem with dynamic tabs and this CSS change, witness * http://www.geocities.com/planetyazaar/examples/phonebook/Home-1.html and *
      Message 2 of 11 , May 3, 2007
      • 0 Attachment
        To demonstrate the problem with dynamic tabs and this CSS change, witness

        * http://www.geocities.com/planetyazaar/examples/phonebook/Home-1.html

        and

        * http://www.geocities.com/planetyazaar/examples/phonebook/Home-2.html

        The difference between these two is that one uses the "#demo div.yui-content
        div {display: none;} " setting.

        After the page has finished rendering, is there a way to restore the tab
        operation to normal, so that clicking on the tab presents the content.

        We can do it all scriptologically, which does seem to render quickly, but
        that's a lot more coding :)

        -Ted.


        Ted Husted wrote:
        >
        > The CSS approach works great with static tabs, but how do we make a tab
        > with dynamic content visible once the rest of the page is loaded?
        >
        > With something like
        >
        > <div id="elBody_Content" class="yui-content">
        > <div id="elHome">
        > <p>Welcome to the application!</p>
        > </div>
        > <div id="elRegion">
        > <p>This will be the Region page</p>
        > </div>
        > <div id="elLog">
        > <div id="elLogReader" ></div>
        > </div>
        >
        > The text for "Welcome to the application" and "This will be the region
        > page" show up just fine, but the Log tag is blank.
        >
        > TAI, Ted.
        >
        >
        >
        >
        > -Ted.
        >
        >
        >
        > Dav Glass wrote:
        >>
        >> Tom -
        >>
        >> Just add this line to your CSS where #demo is the id of your TabView:
        >>
        >> #demo div.yui-content div {
        >> display: none;
        >> }
        >> Hope that helps 8-)
        >>
        >> Dav
        >>
        >> "tom.genoni" <yui@...> wrote:
        >> http://developer.yahoo.com/yui/examples/tabview/basic_from_markup.html
        >>
        >> I'm seeing a flicker of the content when the page loads in IE. I
        >> didn't see any methods for dealing with it in the docs. Any ideas?
        >>
        >> I've used Tabber in the past and it has some 'prevent flicker' code
        >> that hides the tabs and the content until all of it finishes loading
        >> but I haven't yet been able to replicate it with the YUI version.
        >>
        >> http://www.barelyfitz.com/projects/tabber/example.html
        >> (view source for the code that prevents the flicker)
        >>
        >>
        >>
        >>
        >>
        >> Yahoo! Groups - Join or create groups, clubs, forums & communities. Links
        >>
        >>
        >>
        >>
        >>
        >>
        >> Dav Glass
        >> dav.glass@...
        >> blog.davglass.com
        >>
        >>
        >> + Windows: n. - The most successful computer virus, ever. +
        >> + A computer without a Microsoft operating system is like a dog
        >> without bricks tied to its head +
        >> + A Microsoft Certified Systems Engineer is to computing what a
        >> McDonalds Certified Food Specialist is to fine cuisine +
        >>
        >
        >

        --
        View this message in context: http://www.nabble.com/TabView-content-flickers-on-load-tf3282135.html#a10307601
        Sent from the ydn-javascript mailing list archive at Nabble.com.
      • Ted Husted
        We did a spike as to a full scriptological approach. It does work well in the end, but it doesn t seem as agile. As an alternative, we re going to try using a
        Message 3 of 11 , May 8, 2007
        • 0 Attachment
          We did a spike as to a full scriptological approach. It does work well in the
          end, but it doesn't seem as agile. As an alternative, we're going to try
          using a disconnected TabView for a top-level menu, and then put the content
          on panels that can be hidden or shown in response to the tab changes.

          I'll post a working example of whatever we end up doing. But, if anyone has
          any tips as to flicker-free loading of multiple, non-trivial widgets, please
          feel free to share :)

          The missing link might be a "ContentRendered" event. We've tried using
          "ContentReady", but that fires before the screen has finished dancing! We're
          looking for a signal that the markup has been parsed and enhanced.

          -Ted.


          Ted Husted wrote:
          >
          > To demonstrate the problem with dynamic tabs and this CSS change, witness
          >
          > * http://www.geocities.com/planetyazaar/examples/phonebook/Home-1.html
          >
          > and
          >
          > * http://www.geocities.com/planetyazaar/examples/phonebook/Home-2.html
          >
          > The difference between these two is that one uses the "#demo
          > div.yui-content div {display: none;} " setting.
          >
          > After the page has finished rendering, is there a way to restore the tab
          > operation to normal, so that clicking on the tab presents the content.
          >
          > We can do it all scriptologically, which does seem to render quickly, but
          > that's a lot more coding :)
          >
          > -Ted.
          >
          >
          > Ted Husted wrote:
          >>
          >> The CSS approach works great with static tabs, but how do we make a tab
          >> with dynamic content visible once the rest of the page is loaded?
          >>
          >> With something like
          >>
          >> <div id="elBody_Content" class="yui-content">
          >> <div id="elHome">
          >> <p>Welcome to the application!</p>
          >> </div>
          >> <div id="elRegion">
          >> <p>This will be the Region page</p>
          >> </div>
          >> <div id="elLog">
          >> <div id="elLogReader" ></div>
          >> </div>
          >>
          >> The text for "Welcome to the application" and "This will be the region
          >> page" show up just fine, but the Log tag is blank.
          >>
          >> TAI, Ted.
          >>
          >>
          >>
          >>
          >> -Ted.
          >>
          >>
          >>
          >> Dav Glass wrote:
          >>>
          >>> Tom -
          >>>
          >>> Just add this line to your CSS where #demo is the id of your TabView:
          >>>
          >>> #demo div.yui-content div {
          >>> display: none;
          >>> }
          >>> Hope that helps 8-)
          >>>
          >>> Dav
          >>>
          >>> "tom.genoni" <yui@...> wrote:
          >>> http://developer.yahoo.com/yui/examples/tabview/basic_from_markup.html
          >>>
          >>> I'm seeing a flicker of the content when the page loads in IE. I
          >>> didn't see any methods for dealing with it in the docs. Any ideas?
          >>>
          >>> I've used Tabber in the past and it has some 'prevent flicker' code
          >>> that hides the tabs and the content until all of it finishes loading
          >>> but I haven't yet been able to replicate it with the YUI version.
          >>>
          >>> http://www.barelyfitz.com/projects/tabber/example.html
          >>> (view source for the code that prevents the flicker)
          >>>
          >>>
          >>>
          >>>
          >>>
          >>> Yahoo! Groups - Join or create groups, clubs, forums & communities.
          >>> Links
          >>>
          >>>
          >>>
          >>>
          >>>
          >>>
          >>> Dav Glass
          >>> dav.glass@...
          >>> blog.davglass.com
          >>>
          >>>
          >>> + Windows: n. - The most successful computer virus, ever. +
          >>> + A computer without a Microsoft operating system is like a dog
          >>> without bricks tied to its head +
          >>> + A Microsoft Certified Systems Engineer is to computing what a
          >>> McDonalds Certified Food Specialist is to fine cuisine +
          >>>
          >>
          >>
          >
          >

          --
          View this message in context: http://www.nabble.com/TabView-content-flickers-on-load-tf3282135.html#a10374463
          Sent from the ydn-javascript mailing list archive at Nabble.com.
        • sailormoon2099
          I ve tried the the css approach to prevent the tabview flickering on load however if you have nested tabs, the nested tabs remain hidden. ...
          Message 4 of 11 , May 29, 2007
          • 0 Attachment
            I've tried the the css approach to prevent the tabview flickering on
            load however if you have nested tabs, the nested tabs remain hidden.

            --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@...> wrote:
            >
            > Tom -
            >
            > Just add this line to your CSS where #demo is the id of your TabView:
            >
            > #demo div.yui-content div {
            > display: none;
            > }
            > Hope that helps 8-)
            >
            > Dav
            >
            > "tom.genoni" <yui@...> wrote:
            http://developer.yahoo.com/yui/examples/tabview/basic_from_markup.html
            >
            > I'm seeing a flicker of the content when the page loads in IE. I
            > didn't see any methods for dealing with it in the docs. Any ideas?
            >
            > I've used Tabber in the past and it has some 'prevent flicker' code
            > that hides the tabs and the content until all of it finishes loading
            > but I haven't yet been able to replicate it with the YUI version.
            >
            > http://www.barelyfitz.com/projects/tabber/example.html
            > (view source for the code that prevents the flicker)
            >
            >
            >
            >
            >
            > Yahoo! Groups - Join or create groups, clubs, forums & communities.
            Links
            >
            >
            >
            >
            >
            >
            > Dav Glass
            > dav.glass@...
            > blog.davglass.com
            >
            >
            > + Windows: n. - The most successful computer virus, ever. +
            > + A computer without a Microsoft operating system is like a dog
            > without bricks tied to its head +
            > + A Microsoft Certified Systems Engineer is to computing what a
            > McDonalds Certified Food Specialist is to fine cuisine +
            >
          • dav.glass@yahoo.com
            Tom -- Can you post me an example link of the nested tabs issue? It s probably a cascade issue.. Dav Glass dav.glass@yahoo.com blog.davglass.com + Windows: n.
            Message 5 of 11 , May 29, 2007
            • 0 Attachment
              Tom --

              Can you post me an example link of the nested tabs issue?

              It's probably a cascade issue..
               
              Dav Glass
              dav.glass@...
              blog.davglass.com


              + Windows: n. - The most successful computer virus, ever. +
              + A computer without a Microsoft operating system is like a dog
              without bricks tied to its head +
              + A Microsoft Certified Systems Engineer is to computing what a
              McDonalds Certified Food Specialist is to fine cuisine +


              ----- Original Message ----
              From: sailormoon2099 <sailormoon2099@...>
              To: ydn-javascript@yahoogroups.com
              Sent: Tuesday, May 29, 2007 12:54:06 PM
              Subject: [ydn-javascript] Re: TabView content flickers on load

              I've tried the the css approach to prevent the tabview flickering on
              load however if you have nested tabs, the nested tabs remain hidden.

              --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@...> wrote:
              >
              > Tom -
              >
              > Just add this line to your CSS where #demo is the id of your TabView:
              >
              > #demo div.yui-content div {
              >  display: none;
              > }
              > Hope that helps 8-)
              >
              > Dav
              >
              > "tom.genoni" <yui@...> wrote:
              http://developer.yahoo.com/yui/examples/tabview/basic_from_markup.html
              >
              > I'm seeing a flicker of the content when the page loads in IE. I
              > didn't see any methods for dealing with it in the docs. Any ideas?
              >
              > I've used Tabber in the past and it has some 'prevent flicker' code
              > that hides the tabs and the content until all of it finishes loading
              > but I haven't yet been able to replicate it with the YUI version.
              >
              > http://www.barelyfitz.com/projects/tabber/example.html
              > (view source for the code that prevents the flicker)
              >
              >
              >
              >
              >  
              > Yahoo! Groups - Join or create groups, clubs, forums & communities.
              Links
              >
              >
              >
              >
              >
              >
              > Dav Glass
              > dav.glass@...
              > blog.davglass.com
              >
              >
              > + Windows: n. - The most successful computer virus, ever. +
              > + A computer without a Microsoft operating system is like a dog
              >     without bricks tied to its head +
              > + A Microsoft Certified Systems Engineer is to computing what a
              >    McDonalds Certified Food Specialist is to fine cuisine  +
              >




              Yahoo! Groups Links

              <*> To visit your group on the web, go to:
                  http://groups.yahoo.com/group/ydn-javascript/

              <*> Your email settings:
                  Individual Email | Traditional

              <*> To change settings online go to:
                  http://groups.yahoo.com/group/ydn-javascript/join
                  (Yahoo! ID required)

              <*> To change settings via email:
                  mailto:ydn-javascript-digest@yahoogroups.com
                  mailto:ydn-javascript-fullfeatured@yahoogroups.com

              <*> To unsubscribe from this group, send an email to:
                  ydn-javascript-unsubscribe@yahoogroups.com

              <*> Your use of Yahoo! Groups is subject to:
                  http://docs.yahoo.com/info/terms/


            • dav.glass@yahoo.com
              Tom -- This should do it: http://blog.davglass.com/files/yui/tab6/ Let me know if it doesn t :) Dav Dav Glass dav.glass@yahoo.com blog.davglass.com + Windows:
              Message 6 of 11 , May 29, 2007
              • 0 Attachment
                Tom --

                This should do it:
                http://blog.davglass.com/files/yui/tab6/

                Let me know if it doesn't :)

                Dav
                 
                Dav Glass
                dav.glass@...
                blog.davglass.com


                + Windows: n. - The most successful computer virus, ever. +
                + A computer without a Microsoft operating system is like a dog
                without bricks tied to its head +
                + A Microsoft Certified Systems Engineer is to computing what a
                McDonalds Certified Food Specialist is to fine cuisine +


                ----- Original Message ----
                From: sailormoon2099 <sailormoon2099@...>
                To: ydn-javascript@yahoogroups.com
                Sent: Tuesday, May 29, 2007 12:54:06 PM
                Subject: [ydn-javascript] Re: TabView content flickers on load

                I've tried the the css approach to prevent the tabview flickering on
                load however if you have nested tabs, the nested tabs remain hidden.

                --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@...> wrote:
                >
                > Tom -
                >
                > Just add this line to your CSS where #demo is the id of your TabView:
                >
                > #demo div.yui-content div {
                >  display: none;
                > }
                > Hope that helps 8-)
                >
                > Dav
                >
                > "tom.genoni" <yui@...> wrote:
                http://developer.yahoo.com/yui/examples/tabview/basic_from_markup.html
                >
                > I'm seeing a flicker of the content when the page loads in IE. I
                > didn't see any methods for dealing with it in the docs. Any ideas?
                >
                > I've used Tabber in the past and it has some 'prevent flicker' code
                > that hides the tabs and the content until all of it finishes loading
                > but I haven't yet been able to replicate it with the YUI version.
                >
                > http://www.barelyfitz.com/projects/tabber/example.html
                > (view source for the code that prevents the flicker)
                >
                >
                >
                >
                >  
                > Yahoo! Groups - Join or create groups, clubs, forums & communities.
                Links
                >
                >
                >
                >
                >
                >
                > Dav Glass
                > dav.glass@...
                > blog.davglass.com
                >
                >
                > + Windows: n. - The most successful computer virus, ever. +
                > + A computer without a Microsoft operating system is like a dog
                >     without bricks tied to its head +
                > + A Microsoft Certified Systems Engineer is to computing what a
                >    McDonalds Certified Food Specialist is to fine cuisine  +
                >




                Yahoo! Groups Links

                <*> To visit your group on the web, go to:
                    http://groups.yahoo.com/group/ydn-javascript/

                <*> Your email settings:
                    Individual Email | Traditional

                <*> To change settings online go to:
                    http://groups.yahoo.com/group/ydn-javascript/join
                    (Yahoo! ID required)

                <*> To change settings via email:
                    mailto:ydn-javascript-digest@yahoogroups.com
                    mailto:ydn-javascript-fullfeatured@yahoogroups.com

                <*> To unsubscribe from this group, send an email to:
                    ydn-javascript-unsubscribe@yahoogroups.com

                <*> Your use of Yahoo! Groups is subject to:
                    http://docs.yahoo.com/info/terms/


              • sailormoon2099
                That worked thnx
                Message 7 of 11 , May 29, 2007
                • 0 Attachment
                  That worked thnx

                  --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
                  >
                  > Tom --
                  >
                  > This should do it:
                  > http://blog.davglass.com/files/yui/tab6/
                  >
                  > Let me know if it doesn't :)
                  >
                  > Dav
                  >
                  > Dav Glass
                  > dav.glass@...
                  > blog.davglass.com
                  >
                  >
                  > + Windows: n. - The most successful computer virus, ever. +
                  > + A computer without a Microsoft operating system is like a dog
                  > without bricks tied to its head +
                  > + A Microsoft Certified Systems Engineer is to computing what a
                  > McDonalds Certified Food Specialist is to fine cuisine +
                  >
                  > ----- Original Message ----
                  > From: sailormoon2099 <sailormoon2099@...>
                  > To: ydn-javascript@yahoogroups.com
                  > Sent: Tuesday, May 29, 2007 12:54:06 PM
                  > Subject: [ydn-javascript] Re: TabView content flickers on load
                  >
                  > I've tried the the css approach to prevent the tabview flickering on
                  > load however if you have nested tabs, the nested tabs remain hidden.
                  >
                  > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@> wrote:
                  > >
                  > > Tom -
                  > >
                  > > Just add this line to your CSS where #demo is the id of your TabView:
                  > >
                  > > #demo div.yui-content div {
                  > > display: none;
                  > > }
                  > > Hope that helps 8-)
                  > >
                  > > Dav
                  > >
                  > > "tom.genoni" <yui@> wrote:
                  > http://developer.yahoo.com/yui/examples/tabview/basic_from_markup.html
                  > >
                  > > I'm seeing a flicker of the content when the page loads in IE. I
                  > > didn't see any methods for dealing with it in the docs. Any ideas?
                  > >
                  > > I've used Tabber in the past and it has some 'prevent flicker' code
                  > > that hides the tabs and the content until all of it finishes loading
                  > > but I haven't yet been able to replicate it with the YUI version.
                  > >
                  > > http://www.barelyfitz.com/projects/tabber/example.html
                  > > (view source for the code that prevents the flicker)
                  > >
                  > >
                  > >
                  > >
                  > >
                  > > Yahoo! Groups - Join or create groups, clubs, forums & communities.
                  > Links
                  > >
                  > >
                  > >
                  > >
                  > >
                  > >
                  > > Dav Glass
                  > > dav.glass@
                  > > blog.davglass.com
                  > >
                  > >
                  > > + Windows: n. - The most successful computer virus, ever. +
                  > > + A computer without a Microsoft operating system is like a dog
                  > > without bricks tied to its head +
                  > > + A Microsoft Certified Systems Engineer is to computing what a
                  > > McDonalds Certified Food Specialist is to fine cuisine +
                  > >
                  >
                  >
                  >
                  >
                  > Yahoo! Groups Links
                  >
                • carrie
                  hi, I am a new commer for YUI, and I have a very simple question... Is there anyone can help me? How can I set some style attributes to an element, using
                  Message 8 of 11 , May 31, 2007
                  • 0 Attachment
                    hi,
                    I am a new commer for YUI, and I have a very simple question...
                    Is there anyone can help me?

                    How can I set some style attributes to an element, using YAHOO.util.Anim?
                    for example: margin,z-index,etc...


                    Very thankful for you guys help~~~~


                    Carrie
                  • LINGAM RAVI KIRAN
                    Hi, I guess Anim module is for to produce the animation to the elements. For simple style attributes, you can use YAHOO.util.Dom module which has many
                    Message 9 of 11 , May 31, 2007
                    • 0 Attachment
                      Hi,

                      I guess Anim module is for to produce the animation to the elements. For simple style attributes, you can use YAHOO.util.Dom module which has many functions to get/set the style properties. In Anim module you have a method called "setAttribute" which will be used to set the animation attributes, for ex. width, height, position of the element.

                      In Dom package you have method called "setStyle" which is used to update the styling properties of a element.

                      Regards,
                      L. Ravi Kiran

                      ----- Original Message ----
                      From: carrie <carrie_zhxj@...>
                      To: ydn-javascript@yahoogroups.com
                      Sent: Thursday, May 31, 2007 1:10:35 PM
                      Subject: [ydn-javascript] How can I set style attributes to Anim elment

                      hi,
                      I am a new commer for YUI, and I have a very simple question...
                      Is there anyone can help me?

                      How can I set some style attributes to an element, using YAHOO.util.Anim?
                      for example: margin,z-index, etc...

                      Very thankful for you guys help~~~~

                      Carrie


                    Your message has been successfully submitted and would be delivered to recipients shortly.