Numbered Page Navigation

Discussion in 'Web Design and Development' started by nomar383, Mar 31, 2010.

  1. nomar383 macrumors 65816

    nomar383

    Joined:
    Jan 29, 2008
    Location:
    Rexburg, ID
    #1
  2. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #2
    You shouldn't use JavaScript for pagination. What if the user doesn't have JS enabled, how would like them to navigate your site? Things like navigation should never be left to JS in my opinion.
     
  3. nomar383 thread starter macrumors 65816

    nomar383

    Joined:
    Jan 29, 2008
    Location:
    Rexburg, ID
  4. citizenzen macrumors 65816

    Joined:
    Mar 22, 2010
    #4
  5. mshepherd macrumors regular

    Joined:
    Feb 29, 2004
    #5
    I think using javascript for pagination makes sense if you have a valid reason. But if you are just going to be using it to link another page it doesn't page sense. If you wanted to load a lot of data ahead of time and then use a javascript interface to page through it that makes sense. I wouldn't be concerned about users not having JavaScript enabled, and if you are you can use a no script tag.
     
  6. H00513R macrumors 6502a

    H00513R

    Joined:
    Mar 12, 2010
    Location:
    Indiana
    #6
    What are you going to be doing that constitutes numbering a lot of pages?
     
  7. mshepherd macrumors regular

    Joined:
    Feb 29, 2004
    #7
    Looking through this I can see a few issues, they are not doing a count to find total records, instead it appears they are selecting all records and finding out how many are in the result set. This could get slow if your record set was large.
     
  8. nomar383 thread starter macrumors 65816

    nomar383

    Joined:
    Jan 29, 2008
    Location:
    Rexburg, ID
    #8
    Let me give some more information:

    1. The server that the site is hosted on has access to perl and mySQL, neither of which I particularly want to use for this purpose if it can be avoided.

    2. There are a few hundred static pages with about 4 photos on them each. Right now there is navigation at the top that goes up to 12+ across in many categories. I want to make it so that only 5 or so show, with links to previous and next (as in the blogger example).

    3. Here is an example of one of the pages: http://torontostreetart.com/BTuT-HTML/BTuT-013.html

    A piece of javascript that could be put in the head tag of each page would be the ideal solution, but I'm open to other suggestions that will work with the environment I am given.

    Thanks for all your help so far.
     
  9. citizenzen macrumors 65816

    Joined:
    Mar 22, 2010
    #9
    You'd rather hard-code a few hundred HTML files? Now I'm no expert on this, but I think you could make one PHP page, import your photo names into a MYSQL database and it would make life MUCH easier for you.

    Databases can be your friend... if you just give them a chance. :)
     
  10. nomar383 thread starter macrumors 65816

    nomar383

    Joined:
    Jan 29, 2008
    Location:
    Rexburg, ID
    #10
    It's actually for a customer on our system. I have no access to install php (it's not on the server and I'm not an admin). Also, I don't really want to create a new database/table just for this one customer (they also wouldn't be able to maintain that themselves). Ideally, I can give a solution to the customer, that he would happily put on each static page himself. If there is no easy way, I'll just tell him it would cost more than it's worth for custom programming :). If it were up to me, I'd do it your way in a heartbeat!
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    I'm not convinced I understand exactly what you want, but here is some start code that may be able to work for you. And remember, starter code. This doesn't do much on its own. The nav creation just does a previous and next link.

    PHP:
    var first   1;
    var 
    last    200;
    var 
    current 0;

    function 
    setPageNum() {
        var 
    url window.location;
        
    // Grab the 3-digit number from current url
        
    var page url.match(/(\d{3})\.html$/)[0];
        
    current  parseInt(page);
    }

    function 
    Previous() {
      
    // Check if at beginning
        
    if (current <= first) { return ''; }
        
    current -= 1;
        var 
    prev '00' current;
        
    prev prev.substr(-3);
        return 
    'BTuT-'prev +'.html';
    }

    function 
    Next() {
      
    // Check if at end
        
    if (current >= last) { return ''; }
        
    current += 1;
        var 
    next '00' current;
        
    next prev.substr(-3);
        return 
    'BTuT-'next +'.html';
    }

    function 
    createNav() {
        var 
    nav '';
        var 
    prevPage Previous();
        var 
    nextPage Next();
        if (
    prevPage != '') {
            
    nav += '<a href="'prevPage +'">Previous</a> ';
        }
        if (
    nextPage != '') {
            
    nav += '<a href="'nextPage +'">Next</a>';
        }
        
    // Set the nav to the page
        
    document.getElementById('galleryNav').innerHTML nav;
    }

    // Run the setPageNum function when the page loads
    try { // For browsers that know DOMContentLoaded (FF, Safari, Opera)
            
    document.addEventListener("DOMContentLoaded"setPageNumfalse);

    catch (
    e) { // IE
        
    window.attachEvent('onload'setPageNum);
    }
    Place this type of HTML somewhere on your page. You don't seem to have the navigation currently setup within a tag that's easily found by JavaScript, so it could be the harder part here for placing the navigation onto the page dynamically since you just want to add a script to the head tag. It is doable though (you just have to wander down the DOM a lot, which is why table layouts are so horrid), but having an id attribute to grab ahold of would be much easier.
    HTML:
    <div id="galleryNav"></div>
     
  12. nomar383 thread starter macrumors 65816

    nomar383

    Joined:
    Jan 29, 2008
    Location:
    Rexburg, ID
    #12
    Wow, that's a massive help and way more than I expected :). I can work with that for sure.
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    Cool, let me know if you run into issues, I didn't test the code at all so there's little issues with the code that's there, like the parseInt function will likely think most pages are in base-8 so the numbering could go screwy. That's an easy fix though,
    PHP:
    parseInt(page10);
    The 10 makes it base-10 (or decimal). Also, the current variable doesn't need to be updated in the Previous and Next functions. I had started writing those functions in a different way, but changed the approach and incrementing or decrementing that variable doesn't make sense anymore.
     

Share This Page