I hate to come back so soon, since I was all proud of myself for working out the last issue. This is a different issue, and beyond the scope of my knowledge.
The pagination itself WORKS FINE. However, I'm trying to use a tooltip script on an image hover, and though it works fine if the page is properly cached, it does NOT work as I go from page to page, using the pagination numbers to navigate.
Oddly, if I click on the picture itself, the tooltip works. You can see what's going on here http://www.siiimple.com/siiimple when you roll over the top three images they do not initially utilize the tooltip script. However, if you click the image, it begins to show the larger image.
Here is the javascript code associated with the PAGINATION, thought I really don't know where the problem resides:
//Ajax Pagination Script- Author: Dynamic Drive ([url]http://www.dynamicdrive.com[/url])
//** Created Sept 14th, 07'
//** Updated Oct 31st, 07'- Fixed bug when book only contains 1 page
//** Updated Aug 9th 08'- Upgraded to v1.2:
//1) Adds ability to limit the range of the visible pagination links shown for a book with many pages
//2) Adds Session only persistence to persist the last page user viewed when navigating away then returning to the webpage containing the script.
//3) Modified Ajax request function in IE7 to use ActiveXObject object, so script can be tested offline
//** Updated Oct 21st 08'- Upgraded to v1.2.1: Fixed bug with no content showing when there's only one page
//** Updated Dec 1st 08'- v1.2.2: Fixed bug in FF when only one page in book
var ajaxpageclass=new Object()
ajaxpageclass.loadstatustext="Requesting content, please wait..." // HTML to show while requested page is being fetched:
ajaxpageclass.ajaxbustcache=false // Bust cache when fetching pages?
ajaxpageclass.paginatepersist=true //enable persistence of last viewed pagination link (so reloading page doesn't reset page to 1)?
ajaxpageclass.pagerange=4 // Limit page links displayed to a specific number (useful if you have many pages in your book)?
ajaxpageclass.ellipse="..." // Ellipse text (no HTML allowed)
/////////////// No need to edit beyond here /////////////////////////
ajaxpageclass.connect=function(pageurl, divId){
var page_request = false
var bustcacheparameter=""
if (window.XMLHttpRequest && !document.all) // if Mozilla, Safari etc (skip IE7, as object is buggy in that browser)
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE6 or below
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
document.getElementById(divId).innerHTML=this.loadstatustext //Display "fetching page message"
page_request.onreadystatechange=function(){ajaxpageclass.loadpage(page_request, divId)}
if (this.ajaxbustcache) //if bust caching of external page
bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcacheparameter, true)
page_request.send(null)
}
ajaxpageclass.loadpage=function(page_request, divId){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(divId).innerHTML=page_request.responseText
}
}
ajaxpageclass.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}
ajaxpageclass.setCookie=function(name, value){
document.cookie = name+"="+value
}
ajaxpageclass.getInitialPage=function(divId, pageinfo){
var persistedpage=this.getCookie(divId)
var selectedpage=(this.paginatepersist && this.getCookie(divId)!=null)? parseInt(this.getCookie(divId)) : pageinfo.selectedpage
return (selectedpage>pageinfo.pages.length-1)? 0 : selectedpage //check that selectedpage isn't out of range
}
ajaxpageclass.createBook=function(pageinfo, divId, paginateIds){ //MAIN CONSTRUCTOR FUNCTION
this.pageinfo=pageinfo //store object containing URLs of pages to fetch, selected page number etc
this.divId=divId
this.paginateIds=paginateIds //array of ids corresponding to the pagination DIVs defined for this pageinstance
//NOTE: this.paginateInfo stores references to various components of each pagination DIV defined for this pageinstance
//NOTE: Eg: divs[0] = 1st paginate div, pagelinks[0][0] = 1st page link within 1st paginate DIV, prevlink[0] = previous link within paginate DIV etc
this.paginateInfo={divs:[], pagelinks:[[]], prevlink:[], nextlink:[], previouspage:null, previousrange:[null,null], leftellipse:[], rightellipse:[]}
this.dopagerange=false
this.pagerangestyle=''
this.ellipse='<span style="display:none">'+ajaxpageclass.ellipse+'</span>' //construct HTML for ellipse
var initialpage=ajaxpageclass.getInitialPage(divId, pageinfo)
this.buildpagination(initialpage)
this.selectpage(initialpage)
}
ajaxpageclass.createBook.prototype={
buildpagination:function(selectedpage){ //build pagination links based on length of this.pageinfo.pages[]
this.dopagerange=(this.pageinfo.pages.length>ajaxpageclass.pagerange) //Bool: enable limitpagerange if pagerange value is less than total pages available
this.pagerangestyle=this.dopagerange? 'style="display:none"' : '' //if limitpagerange enabled, hide pagination links when building them
this.paginateInfo.previousrange=null //Set previousrange[start, finish] to null to start
if (this.pageinfo.pages.length<=1){ //no 0 or just 1 page
document.getElementById(this.paginateIds[0]).innerHTML=(this.pageinfo.pages.length==1)? "Page 1 of 1" : ""
return
}
else{ //construct paginate interface
var paginateHTML='<div class="pagination"><ul>\n'
paginateHTML+='<li><a href="#previous" rel="'+(selectedpage-1)+'">«</a></li>\n' //previous link HTML
for (var i=0; i<this.pageinfo.pages.length; i++){
var ellipses={left: (i==0? this.ellipse : ''), right: (i==this.pageinfo.pages.length-1? this.ellipse : '')} //if this is 1st or last page link, add ellipse next to them, hidden by default
paginateHTML+='<li>'+ellipses.right+'<a href="#page'+(i+1)+'" rel="'+i+'" '+this.pagerangestyle+'>'+(i+1)+'</a>'+ellipses.left+'</li>\n'
}
paginateHTML+='<li><a href="#next" rel="'+(selectedpage+1)+'">next »</a></li>\n' //next link HTML
paginateHTML+='</ul></div>'
}// end construction
this.paginateInfo.previouspage=selectedpage //remember last viewed page
for (var i=0; i<this.paginateIds.length; i++){ //loop through # of pagination DIVs specified
var paginatediv=document.getElementById(this.paginateIds[i]) //reference pagination DIV
this.paginateInfo.divs[i]=paginatediv //store ref to this paginate DIV
paginatediv.innerHTML=paginateHTML
var paginatelinks=paginatediv.getElementsByTagName("a")
var ellipsespans=paginatediv.getElementsByTagName("span")
this.paginateInfo.prevlink[i]=paginatelinks[0]
if (paginatelinks.length>0)
this.paginateInfo.nextlink[i]=paginatelinks[paginatelinks.length-1]
this.paginateInfo.leftellipse[i]=ellipsespans[0]
this.paginateInfo.rightellipse[i]=ellipsespans[1]
this.paginateInfo.pagelinks[i]=[] //array to store the page links of pagination DIV
for (var p=1; p<paginatelinks.length-1; p++){
this.paginateInfo.pagelinks[i][p-1]=paginatelinks[p]
}
var pageinstance=this
paginatediv.onclick=function(e){
var targetobj=window.event? window.event.srcElement : e.target
if (targetobj.tagName=="A" && targetobj.getAttribute("rel")!=""){
if (!/disabled/i.test(targetobj.className)){ //if this pagination link isn't disabled (CSS classname "disabled")
pageinstance.selectpage(parseInt(targetobj.getAttribute("rel")))
}
}
return false
}
}
},
selectpage:function(selectedpage){
//replace URL's root domain with dynamic root domain (with or without "www"), for ajax security sake:
if (this.pageinfo.pages.length>0){
var ajaxfriendlyurl=this.pageinfo.pages[selectedpage].replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
ajaxpageclass.connect(ajaxfriendlyurl, this.divId) //fetch requested page and display it inside DIV
}
if (this.pageinfo.pages.length<=1) //if this book only contains only 1 page (or 0)
return //stop here
var paginateInfo=this.paginateInfo
for (var i=0; i<paginateInfo.divs.length; i++){ //loop through # of pagination DIVs specified
//var paginatediv=document.getElementById(this.paginateIds[i])
paginateInfo.prevlink[i].className=(selectedpage==0)? "prevnext disabled" : "prevnext" //if current page is 1st page, disable "prev" button
paginateInfo.prevlink[i].setAttribute("rel", selectedpage-1) //update rel attr of "prev" button with page # to go to when clicked on
paginateInfo.nextlink[i].className=(selectedpage==this.pageinfo.pages.length-1)? "prevnext disabled" : "prevnext"
paginateInfo.nextlink[i].setAttribute("rel", selectedpage+1)
paginateInfo.pagelinks[i][paginateInfo.previouspage].className="" //deselect last clicked on pagination link (previous)
paginateInfo.pagelinks[i][selectedpage].className="currentpage" //select current pagination link
}
paginateInfo.previouspage=selectedpage //Update last viewed page info
ajaxpageclass.setCookie(this.divId, selectedpage)
this.limitpagerange(selectedpage) //limit range of page links displayed (if applicable)
},
limitpagerange:function(selectedpage){
//reminder: selectedpage count starts at 0 (0=1st page)
var paginateInfo=this.paginateInfo
if (this.dopagerange){
var visiblelinks=ajaxpageclass.pagerange-1 //# of visible page links other than currently selected link
var visibleleftlinks=Math.floor(visiblelinks/2) //calculate # of visible links to the left of the selected page
var visiblerightlinks=visibleleftlinks+(visiblelinks%2==1? 1 : 0) //calculate # of visible links to the right of the selected page
if (selectedpage<visibleleftlinks){ //if not enough room to the left to accomodate all visible left links
var overage=visibleleftlinks-selectedpage
visibleleftlinks-=overage //remove overage links from visible left links
visiblerightlinks+=overage //add overage links to the visible right links
}
else if ((this.pageinfo.pages.length-selectedpage-1)<visiblerightlinks){ //else if not enough room to the left to accomodate all visible right links
var overage=visiblerightlinks-(this.pageinfo.pages.length-selectedpage-1)
visiblerightlinks-=overage //remove overage links from visible right links
visibleleftlinks+=overage //add overage links to the visible left links
}
var currentrange=[selectedpage-visibleleftlinks, selectedpage+visiblerightlinks] //calculate indices of visible pages to show: [startindex, endindex]
var previousrange=paginateInfo.previousrange //retrieve previous page range
for (var i=0; i<paginateInfo.divs.length; i++){ //loop through paginate divs
if (previousrange){ //if previous range is available (not null)
for (var p=previousrange[0]; p<=previousrange[1]; p++){ //hide all page links
paginateInfo.pagelinks[i][p].style.display="none"
}
}
for (var p=currentrange[0]; p<=currentrange[1]; p++){ //reveal all active page links
paginateInfo.pagelinks[i][p].style.display="inline"
}
paginateInfo.pagelinks[i][0].style.display="inline" //always show 1st page link
paginateInfo.pagelinks[i][this.pageinfo.pages.length-1].style.display="inline" //always show last page link
paginateInfo.leftellipse[i].style.display=(currentrange[0]>1)? "inline" : "none" //if starting page is page3 or higher, show ellipse to page1
paginateInfo.rightellipse[i].style.display=(currentrange[1]<this.pageinfo.pages.length-2)? "inline" : "none" //if end page is 2 pages before last page or less, show ellipse to last page
}
}
paginateInfo.previousrange=currentrange
},
refresh:function(pageinfo){
this.pageinfo=pageinfo
var initialpage=ajaxpageclass.getInitialPage(this.divId, pageinfo)
this.buildpagination(initialpage)
this.selectpage(initialpage)
}
}And here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="CSS/golden.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="CSS/style.css" type="text/css" media="screen, projection">
<!-- Screenshots -->
<script src="js/jquery.js" "text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/tooltip.js" type="text/javascript"></script>
<!-- Pagination -->
<link rel="stylesheet" type="text/css" href="CSS/ajaxpagination.css" />
<script src="js/ajaxpagination.js" type="text/javascript"></script>
<title>siiimple</title>
<style>
body {background-color:#fff;}
.main{background-color:#fff;}
.g160{background-color:#fac0c0; height:150px; }
.g320{background-color:#fff; height:150px; }
.clear{height:100px;}
img{border:1px solid #444;}
#screenshot{
position:absolute;
border:none;
background:#333;
padding:5px;
display:none;
color:#fff;
}
#tooltip{
position:absolute;
border:none;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
#paginate-bottom{margin-bottom:2em;}
</style>
</head>
<body>
<div class="main">
<div id="siiimple"> </div>
<div id="paginate-bottom"> </div>
<script type="text/javascript">
var siiimple={
pages: ["page-1.html", "page-2.html", "page-3.html", "page-4.html", "page-5.html"],
selectedpage: 0 //set page shown by default (0=1st page)
}
var mybookinstance=new ajaxpageclass.createBook(siiimple, "siiimple", ["paginate-bottom"])
</script>
</body>
</html>Thanks for any help!