[Erica1977]

Originally Posted by nerbert

Erica1977, replace the entire threadnav template with this and see how it works

<form method="post">	
	<link rel="stylesheet" type="text/css" href="{vb:raw vbcsspath}threadnav.css" />
	<div class="threadnav" id="threadnav">
		<button type="button" class="scroll" id="left" 
			onmousedown="move(this);"
			onmouseup="stop(this);"
			onmouseout="stop(this);">
			<vb:if condition="!is_browser('opera')">
				<div style="margin:-3px 0px 0px -2px;font-size:13px;">◄</div>
			<vb:else />
				<div style="margin:-4px 1px 0px 0px;font-size:16px;">◀</div>
			</vb:if>
		</button>
		
		<button type="button" class="scroll" id="right" 
			onmousedown="move(this);"
			onmouseup="stop(this);"
			onmouseout="stop(this);">
			<vb:if condition="!is_browser('opera')">
				<div style="margin:-3px -2px 0px 0px;font-size:13px;">►</div>
			<vb:else />
				<div style="margin:-4px 0px 0px 1px;font-size:16px;">▶</div>
			</vb:if>
		</button>
	
		<div class="threadlist" id="threadlist">
			{vb:raw threadbits}
		</div>
	</div>
	
	<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
	<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
	
	<script type="text/javascript">
	<!-- 
		function move(obj) {
			x = obj.id == 'left' ? -6 : 6;	
			interval=setInterval('list.scrollLeft += x', 20);
			obj.style.opacity=0.8;
			obj.style.filter='Alpha(opacity=80)';	
		}
		
		function stop(obj) {
			clearInterval(interval);
			obj.style.opacity=1.0;
			obj.style.filter='Alpha(opacity=100)';	
		}		
	
		function delay(type, id) {
			if(nodelay==0){
				hoverDelay[id]=setTimeout("show('"+type+"', '"+id+"')", 200);
			}
			else {
				show(type,id);
			}
		}
		
		function show(type, id) {
			var cell     = fetch_object('cont_'+id);
			var scroll   = fetch_object('threadlist').scrollLeft;
			var drop     = fetch_object(type+'_'+id);	
			var nav      = fetch_object('threadnav');
			var left     = fetch_object('left');
			var right    = fetch_object('right');	
			var delta1   = left.offsetLeft + 17;
			var delta2   = right.offsetLeft - width - 1;
			var offset   = cell.offsetLeft;	
			var position = offset-scroll - 1;
			if(position < delta1) {
				list.scrollLeft += position - delta1;
				drop.style.left =''+(delta1)+'px';
			}
			else if(position > delta2) {
				list.scrollLeft += position - delta2;
				drop.style.left =''+(delta2)+'px';
			}    
			else {
				drop.style.left =''+(position)+'px';
			}
			nodelay=1;
			deltaY = 41;
			drop.style.top=''+(nav.offsetTop + deltaY)+'px';
			drop.style.display='block';
			dropWidth=type=='info'?width:(width+36);
			drop.style.width=''+(dropWidth-1)+'px'
			var border='1px solid {vb:stylevar postbit_background.backgroundColor}';
			fetch_object('name_'+id).style.borderBottom=border;
		}
		
		function prevFirst(id) {
			show('prev', id);
			fetch_object('prevlasttext_'+id).style.display='none';
			fetch_object('prevfirsttext_'+id).style.display='block';
			fetch_object('prevfirst_'+id).style.backgroundColor='white';
			fetch_object('prevlast_'+id).style.backgroundColor='transparent';
			fetch_object('info_'+id).style.display='none';
			nodelay=1;
		}
	
		function prevLast(id) {
			show('prev', id);
			fetch_object('prevlasttext_'+id).style.display='block';
			fetch_object('prevfirsttext_'+id).style.display='none';
			fetch_object('prevlast_'+id).style.backgroundColor='white';
			fetch_object('prevfirst_'+id).style.backgroundColor='transparent';
			fetch_object('info_'+id).style.display='none';
			nodelay=1;
		}
	
		function hideInfo(event, id) { 
			mouseY=is_ie?
			event.clientY+document.documentElement.scrollTop -document.documentElement.clientTop :
			event.pageY;
			mouseX=is_ie?
			event.clientX+document.documentElement.scrollLeft-document.documentElement.clientLeft:
			event.pageX;
			a=fetch_object('threadnav').parentNode.offsetTop;
			b=fetch_object('threadnav').offsetTop;
			c=fetch_object('name_'+id).parentNode.offsetLeft;
			y1=a+b+26
			y2=a+b+40+98
			x1=x0+c-list.scrollLeft;
			x2=x1+width;
			if(mouseY<=y1||mouseX<=x1||mouseX>=x2||mouseY>=y2) {
				fetch_object('info_'+id).style.display='none';
				clearTimeout(hoverDelay[id]);
				nodelay=0;
				border='0px solid transparent';
				fetch_object('name_'+id).style.borderBottom=border;
			}
		}
	
		function hidePrev(event, id) { 
			mouseY=is_ie?
			event.clientY+document.documentElement.scrollTop -document.documentElement.clientTop :
			event.pageY;
			mouseX=is_ie?
			event.clientX+document.documentElement.scrollLeft-document.documentElement.clientLeft:
			event.pageX;
			a=fetch_object('threadnav').parentNode.offsetTop;
			b=fetch_object('threadnav').offsetTop;
			c=fetch_object('name_'+id).parentNode.offsetLeft;
			y1=a+b+26+14
			y2=a+b+40+98
			x1=x0+c-list.scrollLeft-18;
			x2=x1+width+18;
			if(mouseY<=y1||mouseX<=x1||mouseX>=x2||mouseY>=y2) {
				fetch_object('prev_'+id).style.display='none';
				clearTimeout(hoverDelay[id]);
				nodelay=0;
				border='0px solid transparent';
				fetch_object('name_'+id).style.borderBottom=border;
			}
		}
	
		function getThreads() {
			newThreadCheck = new vB_AJAX_Handler(true);
			newThreadCheck.onreadystatechange(addCells);
			var url='showthread.php?do=search';
			newThreadCheck.send(url);
		}
		
		function addCells() {
			list.innerHTML=newThreadCheck.handler.responseText;
			setWidth();
		}
	
		function setWidth() {
			var n=list.innerHTML.match(/<td id="?td_\d+"?|<td class="?blank"?>/gi).length;
			var tableWidth=(width)*n;
			fetch_object('table').style.width=''+tableWidth+'px';
			for(i=0; i<cells.length; i++) {
				if(cells[i].id.match(/td_\d/i)||cells[i].className=='blank'){
					cells[i].style.width=''+(width)+'px';
				}
			}
		}
	
		var y1=0;
		var y2=0;
		var x1=0;
		var x2=0;
		var x;
		var nodelay=0;
		var refresh = {vb:raw vboptions.TN_refresh};
		var limit= {vb:raw vboptions.TN_refresh_limit};
		var list=fetch_object('threadlist');;		
		var hoverDelay = new Array();
		var interval = null;
		var newThreadCheck;
		var windowWidth;

		var field = fetch_object('threadnav').parentNode;
		field.style.position='relative';
		field.style.zIndex=1;

		var e=fetch_object('threadnav');
		var b=document.getElementsByTagName('body')[0];
		var x0=0;
		if (e.style.position=='absolute') {
			x0=e.offsetLeft-e.scrollLeft;
		} 
		else {
			while ((e!=null) && (e!=b) && (e.style.position!='absolute')) {
				x0+=e.offsetLeft-e.scrollLeft;
				if((e.parentNode)&&(e.parentNode.scrollLeft))x0-=e.parentNode.scrollLeft;
				e=e.offsetParent;
			}
		}

		listWidth=fetch_object('right').offsetLeft-19-17+1;
		var width=(listWidth/(Math.floor(listWidth/{vb:raw vboptions.TN_cell_width}))); 
		width = Math.round(width);
		var cells = new Object();
		cells=document.getElementsByTagName('td');
		
		var update = setInterval("if(nodelay==0) getThreads();", refresh*1000);
		setTimeout("clearInterval(update)", limit*60*1000);
	      	setWidth();
	//-->
	</script>
</form>
	

ok just changed it with this code btech red.