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

Paginator and Progressive Markup

Expand Messages
  • C.Everson
    Hello, I d like to use the Paginator in a fashion that would work if the user has Javascript turned off. Basically I want to take a page with content laid out
    Message 1 of 7 , Feb 23, 2009
    • 0 Attachment
      Hello,

      I'd like to use the Paginator in a fashion that would work if the user has
      Javascript turned off.

      Basically I want to take a page with content laid out on it like the
      Paginator demo at:

      http://developer.yahoo.com/yui/examples/paginator/pag_getting_started.html

      Then I want the page configured so that if Javascript is turned off, that
      all the DIVs normally hidden and used by the Paginator would be visible.


      Ideally I'd like to start out with all the DIV content visible and the
      controls for the Paginator hidden with CSS.

      Then at the start of my Pagination script (in YAHOO.util.Event.onDOMReady
      ), I would unhide the pagination controls and prepare the page for
      pagination (hiding all but the first page).


      It seems I should be able to use the YAHOO.util.Dom functions to do this,
      but I am having some problems with it.


      In the demo example, the content wrapper starts out has hidden with this
      CSS:

      #content div {
      display: none;
      }

      and the markup for the content and first div is like this:

      <div id="content" class="page1">
      <div class="page1">
      <p>Little Jim was...</p>
      <p>Jim dropped the...</p>
      </div>

      (repeat with 4 other DIVs where the class is page2 ... page5)


      I can see that the content div starts out hidden, then the class set to
      page1 makes the content div and the first page div visible, but I am unsure
      how to get the effect that I want.

      It seems like a simple enough thing to do, but today it is eluding me!

      Thanks for any help.

      Chuck
    • Lucas Smith
      ... user has ... http://developer.yahoo.com/yui/examples/paginator/pag_getting_started.html ... that ... YAHOO.util.Event.onDOMReady ... this, ... unsure ...
      Message 2 of 7 , Feb 27, 2009
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "C.Everson" <cje@...> wrote:
        >
        > Hello,
        >
        > I'd like to use the Paginator in a fashion that would work if the
        user has
        > Javascript turned off.
        >
        > Basically I want to take a page with content laid out on it like the
        > Paginator demo at:
        >
        >
        http://developer.yahoo.com/yui/examples/paginator/pag_getting_started.html
        >
        > Then I want the page configured so that if Javascript is turned off,
        that
        > all the DIVs normally hidden and used by the Paginator would be visible.
        >
        >
        > Ideally I'd like to start out with all the DIV content visible and the
        > controls for the Paginator hidden with CSS.
        >
        > Then at the start of my Pagination script (in
        YAHOO.util.Event.onDOMReady
        > ), I would unhide the pagination controls and prepare the page for
        > pagination (hiding all but the first page).
        >
        >
        > It seems I should be able to use the YAHOO.util.Dom functions to do
        this,
        > but I am having some problems with it.
        >
        >
        > In the demo example, the content wrapper starts out has hidden with this
        > CSS:
        >
        > #content div {
        > display: none;
        > }
        >
        > and the markup for the content and first div is like this:
        >
        > <div id="content" class="page1">
        > <div class="page1">
        > <p>Little Jim was...</p>
        > <p>Jim dropped the...</p>
        > </div>
        >
        > (repeat with 4 other DIVs where the class is page2 ... page5)
        >
        >
        > I can see that the content div starts out hidden, then the class set to
        > page1 makes the content div and the first page div visible, but I am
        unsure
        > how to get the effect that I want.
        >
        > It seems like a simple enough thing to do, but today it is eluding me!
        >
        > Thanks for any help.
        >
        > Chuck
        >

        Chuck,

        You can do a few things. Here are two options, one with some extra
        css and another line of js, and one with a smidge of js in the head:

        1) In the markup, instead of having the #content element
        class="page1", use class="all", then define in your css
        #demo .all div { display : block; }

        During the Paginator instantiating code, just call
        Dom.replaceClass('content','all','page1');

        2) In your css, omit (or better yet, comment out) the line
        #content div { display: none; }

        then in the head use a technique like this
        http://lucassmith.name/2008/10/script-to-add-css-only-when-javascript-is-available.html

        or if you are willing to drop a second script node in the head, you
        could do
        <script
        src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/stylesheet/stylesheet-min.js"></script>
        <script type="text/javascript">
        YAHOO.util.StyleSheet().set('#content div', { display: 'none' });
        </script>

        Up to you of course. I would recommend option #1 unless there's
        something else preventing you from doing so.

        Hope this helps,
        Luke
      • C.Everson
        ... Hi Luke, Thanks for getting back to me on this! The #1 option seems to work fine - nothing preventing me from using it and it is much easier to implement
        Message 3 of 7 , Feb 28, 2009
        • 0 Attachment
          On Sat, 28 Feb 2009 06:29:54 -0000, Lucas Smith wrote:

          > You can do a few things. Here are two options, one with some extra
          > css and another line of js, and one with a smidge of js in the head:
          >
          > 1) In the markup, instead of having the #content element
          > class="page1", use class="all", then define in your css
          > #demo .all div { display : block; }
          >
          > During the Paginator instantiating code, just call
          > Dom.replaceClass('content','all','page1');
          >
          > 2) In your css, omit (or better yet, comment out) the line
          > #content div { display: none; }
          >
          > then in the head use a technique like this
          > http://lucassmith.name/2008/10/script-to-add-css-only-when-javascript-is-available.html
          >
          > or if you are willing to drop a second script node in the head, you
          > could do
          > <script
          > src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/stylesheet/stylesheet-min.js"></script>
          > <script type="text/javascript">
          > YAHOO.util.StyleSheet().set('#content div', { display: 'none' });
          > </script>
          >
          > Up to you of course. I would recommend option #1 unless there's
          > something else preventing you from doing so.
          >
          > Hope this helps,
          > Luke


          Hi Luke,

          Thanks for getting back to me on this!

          The #1 option seems to work fine - nothing preventing me from using it and
          it is much easier to implement than what I had worked out.


          One extra thing I did was add this to it to get rid of the Flash of
          Unstyled Content as the page loads and the content is assembled.

          In the <style> block in the <head> I added this:

          .loader #demo { display: none; }
          .loader2 #demo { display: inherit; }


          Then just before the </head> I added this:

          <script type="text/javascript">
          document.getElementsByTagName('html')[0].className = 'loader';
          </script>


          Finally in the OnDomReady where the Paginator is instantiated I added this:

          // Unhide page now that the content is assembled
          document.getElementsByTagName('html')[0].className = 'loader2';



          It works as expected, there is no flash as the content is assembled and of
          course if Javascript is disabled it has no effect.

          But is there a better (YUI) way to do this?

          Thanks!

          Chuck


          -------------------------------------------------------------------------------------------------------
        • Lucas Smith
          [snip] ... it and ... and of ... You should be able to omit the .loader2 #demo and just clear the html.className since you re definitively setting the value
          Message 4 of 7 , Feb 28, 2009
          • 0 Attachment
            [snip]
            > Hi Luke,
            >
            > Thanks for getting back to me on this!
            >
            > The #1 option seems to work fine - nothing preventing me from using
            it and
            > it is much easier to implement than what I had worked out.
            >
            >
            > One extra thing I did was add this to it to get rid of the Flash of
            > Unstyled Content as the page loads and the content is assembled.
            >
            > In the <style> block in the <head> I added this:
            >
            > .loader #demo { display: none; }
            > .loader2 #demo { display: inherit; }
            >
            >
            > Then just before the </head> I added this:
            >
            > <script type="text/javascript">
            > document.getElementsByTagName('html')[0].className = 'loader';
            > </script>
            >
            >
            > Finally in the OnDomReady where the Paginator is instantiated I
            added this:
            >
            > // Unhide page now that the content is assembled
            > document.getElementsByTagName('html')[0].className = 'loader2';
            >
            >
            >
            > It works as expected, there is no flash as the content is assembled
            and of
            > course if Javascript is disabled it has no effect.
            >
            > But is there a better (YUI) way to do this?
            >
            > Thanks!
            >
            > Chuck

            You should be able to omit the .loader2 #demo and just clear the
            html.className since you're definitively setting the value rather than
            doing any cautious add/remove. I'm sure there are a number of ways to
            skin the cat, so whatever works for you is great. You might keep in
            mind that depending on where your js is located on the page,
            containing the html.className update (or most code in many cases)
            inside the onDOMReady callback isn't necessary. The DOM above the
            currently executing script is loaded and modifiable by that time.

            Luke
          • C.Everson
            ... Hi Luke, Thanks for the feedback. Since YUI removeClass uses an ID and I don t have one for the tag, then will this do it?
            Message 5 of 7 , Mar 1, 2009
            • 0 Attachment
              On Sun, 01 Mar 2009 06:48:37 -0000, Lucas Smith wrote:

              > [snip]
              > You should be able to omit the .loader2 #demo and just clear the
              > html.className since you're definitively setting the value rather than
              > doing any cautious add/remove. I'm sure there are a number of ways to
              > skin the cat, so whatever works for you is great. You might keep in
              > mind that depending on where your js is located on the page,
              > containing the html.className update (or most code in many cases)
              > inside the onDOMReady callback isn't necessary. The DOM above the
              > currently executing script is loaded and modifiable by that time.

              Hi Luke,

              Thanks for the feedback.

              Since YUI removeClass uses an ID and I don't have one for the <html> tag,
              then will this do it?

              document.getElementsByTagName('html')[0].className = '';

              It seems to work, but I don't want to create any memory leaks or problems.

              Also thanks for the heads up about the DOM being ready above the callback.

              Chuck
            • Lucas Smith
              ... tag, ... problems. That s exactly right. That won t cause any leaks. ... callback. ... Glad to help, Luke
              Message 6 of 7 , Mar 1, 2009
              • 0 Attachment
                --- In ydn-javascript@yahoogroups.com, "C.Everson" <cje@...> wrote:
                >
                > On Sun, 01 Mar 2009 06:48:37 -0000, Lucas Smith wrote:
                >
                > > [snip]
                > > You should be able to omit the .loader2 #demo and just clear the
                > > html.className since you're definitively setting the value rather than
                > > doing any cautious add/remove. I'm sure there are a number of ways to
                > > skin the cat, so whatever works for you is great. You might keep in
                > > mind that depending on where your js is located on the page,
                > > containing the html.className update (or most code in many cases)
                > > inside the onDOMReady callback isn't necessary. The DOM above the
                > > currently executing script is loaded and modifiable by that time.
                >
                > Hi Luke,
                >
                > Thanks for the feedback.
                >
                > Since YUI removeClass uses an ID and I don't have one for the <html>
                tag,
                > then will this do it?
                >
                > document.getElementsByTagName('html')[0].className = '';
                >
                > It seems to work, but I don't want to create any memory leaks or
                problems.

                That's exactly right. That won't cause any leaks.

                >
                > Also thanks for the heads up about the DOM being ready above the
                callback.
                >
                > Chuck
                >

                Glad to help,
                Luke
              • C.Everson
                ... Thanks for the confirmation! ... You folks are the best! Chuck
                Message 7 of 7 , Mar 1, 2009
                • 0 Attachment
                  On Sun, 01 Mar 2009 21:29:39 -0000, Lucas Smith wrote:
                  >> then will this do it?
                  >> document.getElementsByTagName('html')[0].className = '';
                  >> It seems to work, but I don't want to create any memory leaks or problems.
                  >
                  > That's exactly right. That won't cause any leaks.

                  Thanks for the confirmation!

                  > Glad to help,

                  You folks are the best!

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