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!

I don't really know...but this really seems like a cache issue. I wouldn't know how to solve it, either...

Any help would be greatly appreciated!

This article has been dead for over six months. Start a new discussion instead.