/* Paginator 3000 - idea by ecto (ecto.ru) - coded by karaboz (karaboz.ru) How to implement:

Be sure that width of your paginator does not change after page is loaded If it happens you must call Paginator.resizePaginator(paginator_example) function to redraw paginator */ /* Paginator class paginatorHolderId - id of the html element where paginator will be placed as innerHTML (String): required pagesTotal - number of pages (Number, required) pagesSpan - number of pages which are visible at once (Number, required) pageCurrent - the number of current page (Number, required) baseUrl - the url of the website (String) if baseUrl is 'http://www.yourwebsite.com/pages/' the links on the pages will be: http://www.yourwebsite.com/pages/1, http://www.yourwebsite.com/pages/2, etc */ var Paginator = function(paginatorHolderId, pagesTotal, pagesSpan, pageCurrent, baseUrl){ if(!document.getElementById(paginatorHolderId) || !pagesTotal || !pagesSpan) return false; this.inputData = { paginatorHolderId: paginatorHolderId, pagesTotal: pagesTotal, pagesSpan: pagesSpan ' + '

' + '

' + '

' + '

' + '

' + '

' + '

' + ' '; return html; } /* Set all needed properties for scrollThumb and it's width */ Paginator.prototype.initScrollThumb = function(){ this.html.scrollThumb.widthMin = '8'; // minimum width of the scrollThumb (px) this.html.scrollThumb.widthPercent = this.inputData.pagesSpan/this.inputData.pagesTotal * 100; this.html.scrollThumb.xPosPageCurrent = (this.inputData.pageCurrent - Math.round(this.inputData.pagesSpan/2))/this.inputData.pagesTotal * this.html.table.offsetWidth; this.html.scrollThumb.xPos = this.html.scrollThumb.xPosPageCurrent; this.html.scrollThumb.xPosMin = 0; this.html.scrollThumb.xPosMax; this.html.scrollThumb.widthActual; this.setScrollThumbWidth(); } Paginator.prototype.setScrollThumbWidth = function(){ // Try to set width in percents this.html.scrollThumb.style.width = this.html.scrollThumb.widthPercent + "%"; // Fix the actual width in px this.html.scrollThumb.widthActual = this.html.scrollThumb.offsetWidth; // If actual width less then minimum which we set if(this.html.scrollThumb.widthActual = this.inputData.pagesTotal - this.inputData.pagesSpan) { cellFirstValue = this.inputData.pagesTotal - this.inputData.pagesSpan + 1; this.html.scrollThumb.xPos = this.html.table.offsetWidth - this.html.scrollThumb.offsetWidth; this.moveScrollThumb(); } for(var i=0; i" + cellCurrentValue + "" + ""; } else { html = "" + "" + cellCurrentValue + "" + ""; } this.html.tdsPages[i].innerHTML = html; } } /* Scroll to current page */ Paginator.prototype.scrollToPageCurrent = function(){ this.html.scrollThumb.xPosPageCurrent = (this.inputData.pageCurrent - Math.round(this.inputData.pagesSpan/2))/this.inputData.pagesTotal * this.html.table.offsetWidth; this.html.scrollThumb.xPos = this.html.scrollThumb.xPosPageCurrent; this.moveScrollThumb(); this.drawPages(); } Paginator.prototype.disableSelection = function(){ document.onselectstart = function(){ return false; } this.html.scrollThumb.focus(); } Paginator.prototype.enableSelection = function(){ document.onselectstart = function(){ return true; } } /* Function is used when paginator was resized (window.onresize fires it automatically) Use it when you change paginator with DHTML Do not use it if you set fixed width of paginator */ Paginator.resizePaginator = function (paginatorObj){ paginatorObj.setPageCurrentPointWidth(); paginatorObj.movePageCurrentPoint(); paginatorObj.setScrollThumbWidth(); paginatorObj.scrollToPageCurrent(); } /* Global functions which are used */ function getElementsByClassName(objParentNode, strNodeName, strClassName){ var nodes = objParentNode.getElementsByTagName(strNodeName); if(!strClassName){ return nodes; } var nodesWithClassName = []; for(var i=0; i