Int Problem (Navigation Bug)

[BillyBoB6969]

I am building a Blog system for a school project and am putting a lot of dynamic abilities into it. One feature is that it must stay on the same page without reloading. As you could imagine there must be some sort of navigation system built. I have built one but am struggling to get it to work correctly.

This site is at My Site.

The first navigation is built by the php page at the start of the browsing. When you click on new page it opens fine and then deletes all navigation. After that javascript takes the building process over. Rebuilds the system based on the CurPage variable set at the beginning and every page change.

When you click one of these built from javascript it takes you to the page you selected plus two (ex: click 3 and it brings you to 5), but the previous arrow works fine....

I have no idea where to start on fixing this problem. Any help is greatly appreciated.

var CurPage = 0;

function changeNav(EntryCount) {
	var navObj = document.getElementById('Navigation');
	clearObj(navObj);
	if(CurPage>=2) {
		if(CurPage==2) {
			var anchorPre = document.createElement("a");
			anchorPre.onmousedown = function() {
				changePage('1', EntryCount);
				return false;
			}
			anchorPre.appendChild(document.createTextNode("< "));
			navObj.appendChild(anchorPre);
		}else{
			var anchorF = document.createElement("a");
			anchorF.onmousedown = function() {
				changePage('1', EntryCount);
				return false;
			}
			anchorF.appendChild(document.createTextNode("First "));
			navObj.appendChild(anchorF);
			
			var anchorPre = document.createElement("a");
			anchorPre.onmousedown = function() {
				changePage(CurPage-1, EntryCount);
				return false;
			}
			anchorPre.appendChild(document.createTextNode("< "));
			navObj.appendChild(anchorPre);
		}
	}
	var sPage = parseInt(CurPage)-2;
	if(sPage<=0) sPage = 1;
	var lPage = parseInt(CurPage)+2;
	if(lPage>=Math.ceil(parseInt(EntryCount)/5)) lPage = Math.ceil(parseInt(EntryCount)/5);
	var cPage = sPage;
	while(cPage<=lPage) {
		var anchorI = document.createElement("a");
		if(cPage!=CurPage) {
			anchorI.onmousedown = function() {
				changePage(cPage, EntryCount);
				return false;
			}
		}
		if(cPage==CurPage) 
			anchorI.style.color = "#b5cade";
		anchorI.appendChild(document.createTextNode(cPage+" "));
		navObj.appendChild(anchorI);
		cPage++;
	}
}

function changePage(PageNumber, EntryCount) {
	if(CurPage == 0) {
		var i = 0;
		while(i<=5) {
			i++;
			hideEntry(i);
		}
		var startPoint = ((PageNumber-1)*5)+1;
		var endPoint = startPoint+4;
		var j = startPoint;
		while(j<=endPoint) {
			if(j<=EntryCount) {
				showEntry(j);
			}
			j++;
		}
	}else{
		var HstartPoint = ((CurPage-1)*5)+1;
		var HendPoint = HstartPoint+4;
		var h = HstartPoint;
		while(h<=HendPoint) {
			if(h<=EntryCount) {
				hideEntry(h);
			}
			h++;
		}
		var startPoint = ((PageNumber-1)*5)+1;
		var endPoint = startPoint+4;
		var j = startPoint;
		while(j<=endPoint) {
			if(j<=EntryCount) {
				showEntry(j);
			}
			j++;
		}
	}
	CurPage = PageNumber;
	changeNav(EntryCount);
}

This is the important javascript for these functions.

[Master_script_maker]

try:

var CurPage = 1;
var Snumber = "h"; //number to switch first to last at. int value or "h" which means one half
function changeNav(EntryCount) {
	var navObj = document.getElementById('Navigation');
	clearObj(navObj);
  var i=Math.ceil(EntryCount/5); //last page
  if(Snumber==="h") {
    Snumber=Math.ceil(i/2);
  }
  if(CurPage>=Snumber) {
    a=[];
    a[0]=document.createElement("a");
    a[0].appendChild(document.createTextNode("First "));
    a[0].onclick = function() {
      changePage('1', EntryCount);
    }
    navObj.appendChild(a[0]);
    
    a[1]=document.createElement("a");
    a[1].appendChild(document.createTextNode("< "));
    a[1].onclick = function() {
      changePage(CurPage-1, EntryCount);
    }
    navObj.appendChild(a[1]);
  }
  a=[];
  if(CurPage+4>i) {
    n=i;
    q=i-4;
  } else {
    q=CurPage-1||CurPage;
    n=q+4;
  }
  while(q<=n) {
    a[q]=document.createElement("a");
    a[q].appendChild(document.createTextNode(q+" "));
    if(q==CurPage){
      a[q].style.color="rgb(181, 202, 222)";
    }
    a[q].onmousedown =(function (n, e) {
      return function() {changePage(n, e);};
    })(q, EntryCount);
    navObj.appendChild(a[q]);
    ++q;
  }
  if(CurPage<Snumber) {
    a=[];
    a[0]=document.createElement("a");
    a[0].appendChild(document.createTextNode("> "));
    a[0].onclick = function() {
      changePage(CurPage+1, EntryCount);
    }
    navObj.appendChild(a[0]);
    
    a[1]=document.createElement("a");
    a[1].appendChild(document.createTextNode("Last "));
    a[1].onclick = function() {
      changePage(i, EntryCount);
    }
    navObj.appendChild(a[1]);
  }
}

function changePage(PageNumber, EntryCount) {
  EntryCount=parseInt(EntryCount);
  PageNumber=parseInt(PageNumber);
  var f = (CurPage-1)*5+1;//first entry currently showing
  var i=f+5<EntryCount?f+5:EntryCount; //temporary variable for bound
  while(f<i) {
    hideEntry(f);
    ++f;
  }
  f=(PageNumber-1)*5+1; //f is now the first entry of what you want to show
  i=f+5; //redefine the variable bound
  if(PageNumber==1+Math.floor(EntryCount/5)) {
    i=f+EntryCount-Math.floor(EntryCount/5)*5; //if page number is the last one, set it to the remaining entries
  }
  while(f<i) {
    showEntry(f);
    ++f;
  }
  CurPage = PageNumber;
  changeNav(EntryCount);
}

[BillyBoB6969]

That code doesn't work, because in editing the code I think you have mistaken some of the variables and the change from page to page is now not working. I am just going to try and take some of the ideas that you put in and work around it, because the navigation system kinda works.

[BillyBoB6969]

With a few more hours of research I came up with the error. Its in the event handler when making the links. Javascript would try and find the variable in the div scope, so I added a property to the element being created and accessed it via this.variable.

Here's the fixed code:

var CurPage = 0;
var selPage = 0;

function changeNav(EntryCount) {
	var navObj = document.getElementById('Navigation');
	clearObj(navObj);
	if(CurPage>=2) {
		if(CurPage!=2&&!prevPage) {
			var anchorF = document.createElement("a");
			anchorF.onmousedown = function() {
				changePage('1', EntryCount);
				return false;
			}
			anchorF.appendChild(document.createTextNode("First "));
			navObj.appendChild(anchorF);
		}
		var anchorPre = document.createElement("a");
		var prevPage = (CurPage*1)-1;
		anchorPre.onmousedown = function() {
			changePage(prevPage, EntryCount);
			return false;
		}
		anchorPre.appendChild(document.createTextNode("< "));
		navObj.appendChild(anchorPre);
	}
	var sPage = parseInt(CurPage)-2;
	if(sPage<=0) sPage = 1;
	var lPage = parseInt(CurPage)+2;
	if(lPage>=Math.ceil(parseInt(EntryCount)/5)) lPage = Math.ceil(parseInt(EntryCount)/5);
	selPage = sPage;
	var a = [];
	while(selPage<=lPage) {
		a[selPage] = document.createElement("a");
		if(selPage!=CurPage) {
			a[selPage].sPage = selPage;
			a[selPage].onmousedown = function() {
				changePage(this.sPage, EntryCount);
				return false;
			}
		}else
			a[selPage].style.color = "#b5cade";
		a[selPage].appendChild(document.createTextNode(selPage+" "));
		navObj.appendChild(a[selPage]);
		selPage++;
	}
}

function changePage(PageNumber, EntryCount) {
	if(CurPage == 0) {
		var i = 0;
		while(i<=5) {
			i++;
			hideEntry(i);
		}
		var startPoint = ((PageNumber-1)*5)+1;
		var endPoint = startPoint+4;
		var j = startPoint;
		while(j<=endPoint) {
			if(j<=EntryCount) {
				showEntry(j);
			}
			j++;
		}
	}else{
		var HstartPoint = ((CurPage-1)*5)+1;
		var HendPoint = HstartPoint+4;
		var h = HstartPoint;
		while(h<=HendPoint) {
			if(h<=EntryCount) {
				hideEntry(h);
			}
			h++;
		}
		var startPoint = ((PageNumber-1)*5)+1;
		var endPoint = startPoint+4;
		var j = startPoint;
		while(j<=endPoint) {
			if(j<=EntryCount) {
				showEntry(j);
			}
			j++;
		}
	}
	CurPage = PageNumber;
	changeNav(EntryCount);
}

Still kinda novice at javascript. I guess it happens to the best of us.

[Master_script_maker]

glad you could figure it out , but i am pretty sure mine worked, i tested it out on your page and it worked.