SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS increment for next & prev links

    Instead of a navigation menu, my client would like to show NEXT and PREV links to click through the site's pages. Something like this:
    HTML Code:
    <div id="prevnext">
        <ul>
            <li class="next"><a href="page-3.php">NEXT</a></li>
            <li class="prev"><a href="page-1.php">PREV</a></li>
        <.ul>
    </div>
    I'm loading the page content using AJAX and a jQuery fade in and out. But the NEXT and PREV links need to be in the footer.php and be incrementing after a new page is loaded. The script looks like this:
    HTML Code:
    var $mainContent = $('#main-content'),
    newHash = '';
    
    $("#prevnext").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    	
    $(window).bind('hashchange', function() {
    									  
        newHash = window.location.hash.substring(1);
    							  
        if (newHash) {
            $mainContent
                .find("#content")
                .fadeOut(600, function() {
                    $mainContent.hide().load(newHash + " #content", function() {
                        $mainContent.fadeIn(600);				  
    		});
                });
        };
    										  
    });
    
    $(window).trigger('hashchange');
    My pages could be named page-1.php, page-2.php and so on. That works for me. I'm looking for a way to update and increment the NEXT and PREV links after each click. I would add the increment using PHP, but since I'm loading the pages with AJAX, the page is not refreshing.

    I would also like to hide the PREV link if there is no page to show, and hide the NEXT link if we're at the end of the list.

  2. #2
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you know how many pages there are you can insert the html links in either php or javascript. Much better than processing it on each click - imo

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by centered effect View Post
    If you know how many pages there are you can insert the html links in either php or javascript. Much better than processing it on each click - imo
    My page are built in PHP, calling a header.php, the page content (page-1.php), and then calling footer.php. The header and footer are not refreshing, and the content from the pages are being called and loaded by AJAX on click.

    I do know how many pages there are, but I don't understand what you mean about inserting the HTML links.

  4. #4
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One solution is:

    1) At the top of each page-x.php page have a session variable that updates and stores the current web page number.

    2) When the ajax request is sent with the prev/next link's current href value, the page-x.php increments the session variable according to whether next or prev link was clicked and then loads page-x.php.

    3) page-x.php then sends back to the browser (via the ajax request) the updated href values according to the incremented session variable value for the next/prev links.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •