Search code examples
phpjqueryhtmlloadprogressive-enhancement

Fallback with scrolling loaders


Fantastic community you have here, onto my first question.

I'm creating a blog completely from scratch, and already know that I can load content on scrolling events using jquery and PHP (to save loading it all at once). For those of you who don't know how or what this is, you can find a tutorial link here:

http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html

However, this method relies on javascript requests. In the name of good practice and for the 1-2% of people that still load the yahoo homepage with java-script disabled. This could result in a user only loading a few posts, or loading the entire set of posts. I'd like to find the best progressive workaround that will allow me to:

  1. If Javascript is enabled (load content using the above JQ/PHP scrolling method as normal)
  2. If Javascript is disabled (Grayskull Forbid!?) fall back to a more html/css reliant method automatically, without me having to design for it separately.

Quite a complex question, I hope it makes sense. If I'm thinking along the right lines, the html/css fallback might be to break up the content with separate pages and page buttons, but I'm unsure how the two might translate together, for instance, what I design for the JQ/PHP scrolling method seems to be within one loading page, where the html alternative seems to be on separated pages.

I could use some advice.


Solution

  • To give you an idea: pseudo code:

    <noscript>
        <!-- Server-side language generated pagination -->
        <a href="1.html" class="active">1</a>
        <a href="2.html">2</a>
        <a href="3.html">3</a>
    </noscript>    
    
    <content>
       <article>
       <article>
       <article>
       <article>
       <!-- JS pushes new content on scroll with AJAX, otherwise...-->
    </content>
    
    <noscript>
        <a href="1.html" class="active">1</a>
        <a href="2.html">2</a>
        <a href="3.html">3</a>
    </noscript>