SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Need help with next/previous links

    My office has a convention where when we have a multi-page document, we do "previous" and "next" links to provide navigation between pages. Also part of the convention is the file naming. Basically, a multi-page document will have the pages named like this:

    jreport1.cfm
    jreport2.cfm
    jreport3.cfm
    jreport4.cfm

    And so on.

    With our new site redesign, I've decided to get fancier with the navigation. I want to make it look something like this:

    [ << Prev ] [ 1 ] [ 2 ] [ 3 ] [ 4 ] [ Next >> ]

    I have the CSS worked out, and I've figured out how to do the numbered links. I'm using this:

    Code CFM:
    <cfset thisfile = #GetFileFromPath(CGI.SCRIPT_NAME)#>
    <cfset page = 1>
    <cfset filter = #left(gettoken(thisfile,"1","."),len(gettoken(thisfile,"1",".")) -1)# & "*" & #gettoken(thisfile,"2",".")#>
    <cfdirectory action="list" name="pages" directory="#ExpandPath(".")#" filter="#filter#">
    <div id="localnav">
    <ul>
    <cfloop query="pages">
    <cfoutput><li><a href="#pages.name#"<cfif #pages.name# eq #thisfile#> class="current"</cfif>>#page#</a></li></cfoutput>
    <cfset page = #page# +1>
    </cfloop>
    </ul>
    </div>

    That basically gets the name of the current page, gets a list of other pages in the directory that match the wildcard "pagename*cfm", then makes an unordered list of them, applying a class to the current one.

    What I can't make out how to do is get the Next and Previous pages. I have an idea on how to do it, but it would be a bazillion lines of code. I'm wondering if anyone has any ideas on how to do it properly.

  2. #2
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Solved.

    Here's the final code (ugly as it may be):

    Code CFM:
    <cfset thisfile = #GetFileFromPath(CGI.SCRIPT_NAME)#>
    <cfset page = 0>
    <cfset filter = #left(gettoken(thisfile,"1","."),len(gettoken(thisfile,"1",".")) -2)# & "??." & #gettoken(thisfile,"2",".")#>
    <cfdirectory action="list" name="pages" directory="#ExpandPath(".")#" filter="#filter#">
    <cfset pagenum = #numberformat(right(gettoken(thisfile,"1","."),2),00)#>
    <cfset nonext = #numberformat(pages.recordcount,00)# -1>
    <cfset prev = #right(gettoken(thisfile,"1","."),2)# -1>
    <cfset next = #right(gettoken(thisfile,"1","."),2)# +1>
    <cfset prevpage = #left(gettoken(thisfile,"1","."),len(gettoken(thisfile,"1",".")) -2)# & #numberformat(prev,00)# & "." & #gettoken(thisfile,"2",".")#>
    <cfset nextpage = #left(gettoken(thisfile,"1","."),len(gettoken(thisfile,"1",".")) -2)# & #numberformat(next,00)# & "." & #gettoken(thisfile,"2",".")#>
    <div class="localnav">
    <ul><cfoutput>
    <li><a href="#prevpage#" title="Previous page"<cfif #pagenum# eq "00"> class="hide"</cfif>>&lt; Previous</a></li>
    <cfloop query="pages">
    <li><a href="#pages.name#" title="Page #page#"<cfif #pages.name# eq #thisfile#> class="current"</cfif>>#iif(page eq 0,DE("Index"),page)#</a></li>
    <cfset page = #page# +1>
    </cfloop>
    <li><a href="#nextpage#" title="Next Page"<cfif #pagenum# eq #nonext#> class="hide"</cfif>>Next &gt;</a></li>
    </cfoutput>
    </ul>
    </div>

    Along with:

    Code CSS:
    .localnav {
    	margin: 0;
    	padding: 0;
    	font-size: .9em;
    	text-align: center;
    	}
    .localnav ul {
    	list-style-type: none;
    	margin: 0;
    	}
    .localnav ul li {
    	display: inline;
    	margin: 0;
    	}
    .localnav ul li a {
    	padding: 2px 6px;
    	text-decoration: none;
    	border: 2px solid #369;
    	}
    .localnav ul li a.current {
    	background-color: #369;
    	color: #fff;
    	border: 2px solid #369;
    	}
    .localnav ul li a.hide {
    	visibility: hidden;
    	}
    .localnav ul li a:hover {
    	background-color: #006;
    	color: #fff;
    	}

    Creates this:



    Features:
    1) The "Previous" link is hidden if there's no previous page.
    2) The "Next" link is hidden is there's no next page.
    3) If new pages are added, a link for them is automatically generated.

    Rules:
    1) Pages have to end in a 2-digit number before the .cfm (example: mysillypage01.cfm)
    2) Page "00" is automatically the Index.

    Any improvements are welcome. Feel free to copy/reuse/swipe/edit/etc.


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
  •