In Message Paging

In addition to the "anchor" PGDCode designed to make navigation easier for long posts, it is often desirable too to be able to "page" an article to avoid long scrolls.

We will create the following 2 PGDCodes for this purpose. One is to create pages inside an article, and the other is to add the pager inside the article.

The PGDCodes:

1. Marking a section as a page

Pattern: \[(page)\=(\w+) pageNum\=(\d{1,2})\](.+?)\[\/\1\]
Replace With:

<div id="$2$3">  
 <a name="anchor$2$3"></a><b style="border-bottom: 1px solid #CCC;">This is a multi-page document. Currently you are on page $3.</b>  
 <p>  
 $4  
 </p>  
 </div>

Purpose: Page Designer
Example: [page=UniqueID pageNum=PageNumber]Content[/page]
Begin Tag: [page=pp pageNum=1]
End Tag: [/page]
ECMAScript Compliant, Ignore Case  checked.

2. Pager

Pattern: \[pager\=([^\s]+?) total=(\d{1,2})\]
Replace With:

<div style="text-align: center; width: 350px; border: 1px dashed black; margin: 10px auto; padding: 5px;">Page: <span id="$1Pager"></span>  
 
 <script type="text/javascript">  
 function PGDCodeChangePager$1(pg, totalPages, goto){  
    for (var i=1; i <= totalPages; i++){  
        var currPGDPage = $get("$1" + i.toString());  
        var currPGDPager = $get("pager$1" + i.toString());  
 
        if(!currPGDPage || !currPGDPager) return;  
 
        if (i==pg) {  
              currPGDPage.style.display="" ;  
              currPGDPager.style.fontWeight = "bold";  
              if (goto) location.hash = 'anchor$1' + pg.toString();  
        } else {  
              currPGDPage.style.display= "none";  
              currPGDPager.style.fontWeight = "normal";  
        }  
    }  
 }  
 
 Sys.Application.add_load(  
        function(){  
               var pagerString = '';  
               for (var i = 1; i <= $2; i++) {  
               pagerString += " <a href=\"#\" id=\"pager$1" + i.toString() + "\" onclick=\"PGDCodeChangePager$1(" + i.toString() + ", $2, true); return false;\">" + i.toString() + "</a> ";  
             }  
 
             $get('$1Pager').innerHTML = pagerString;  
 
             $get("pager$1" + "1").style.fontWeight = "bold";  
 
             PGDCodeChangePager$1 (1, $2, false);  
         }  
 );  
 
 </script>  
 </div> 

Purpose: Pager for pages
Example: [pager=UniqueID total=TotalPageNumber]
Begin Tag: [pager=pp total=2]
End Tag: (a space)
Ignore Case  checked.

Note:

You should mark at least 2 pages. The UniqueID in the page marker and the pager must be the same for the pager to function.

You will surround portions of text in a message with the page PGDCode to page the message. Make sure you set the page number correctly and make sure the UniqueID is the same for all the pages. Then, at the end of the article, add the pager PGDCode.

Example: