The Arcive of Official vBulletin Modifications Site.

About Developer · **Released**: 11-06-2011

ThreadNav(2.1) puts almost all the information in New Posts or Today's Posts in a compact scrolling navigation bar in the thread display page (showthread). The location in showthread depends on the user's thread viewing settings. Buttons on either end scroll the list of new posts right or left and additional information is available in a drop down box when you hover over the lower portion of the post cell. The list automatically refreshes using AJAX once a minute (default).

In Version 2.1 you can now place ThreadNav in any vBulletin page. A simple setting will put it in Forum Home (index) and it can be added to other pages with a simple template edit (See instuctions in ThreadNav settings in your AdminCP for edits).

Updated Version 2.1
I've updated this recently to make it fully compatible with updates to Thread & Forum Ignore System, if it is installed. I also got rid of the text jiggle in some browsers when you hover over a cell to display the drop box.

Features:

General:

Searches for New Posts or Today's Posts
List scrolls right or left with buttons at ends
Automatically refreshes once a minute (default setting)
Cell width adjusts automatically to fit available space
Hovering over lower portion of partially exposed cell
snaps the cell into full view
Automatically integrates with Thread & Forum Ignore System
if installed

In the cell for each thread:

Go to first unread post button (New Posts only)
Thread link goes to either first or last post depending
on user settings for viewing threads
Name of last poster
Last post button

In the drop down box:

Date/time
Forum
Thread starter
Peplies
Views
Links for previewing first and last posts

User settings:

Turn ThreadNav off
Get New Posts
Get Today's Posts

Admin Control Panel:

On/off
Other pages to show ThreadNav
Set refresh interval
Maximum minutes ThreadNav will continue refreshing
Allow or disallow guests to see ThreadNav
Maximum number of posts to show
Minimum width of each post cell.
Excluded forums

Upgrading to version 2.0

Upload the new product xml file in Plugins & Products and overwrite the old file.
Be sure to revert all threadnav templates, including threadnav.css.
Some pages will require simple template edits. See the ThreadNav setting sin the Admin CP for more information.

Bugs Fixed:

Now compatible with vBSEO
All text in phrases
More tips on styling in threadnav.css
Resolved major incompatibilities with some styles
Miscellaneous aesthetic changes
Resolved misalignment of borders of cell and drop box in some styles
Improved closing of drop boxes when you mouse out
Fixed more incompatibility issues with some some styles
Fixed incompatibility issue with IE (GRRRRRRRRRR....)
Overhauled system for opening and closing drop boxes

Style is based on borders, font-color and background-colors of postbits. For styles with darker colors a note at the top of threadnav.css gives helpful styling tips. If you need to add space above or below ThreadNav see top of threadnav.css. Don't use line breaks.

Installation is simple: upload the XML file to Products and you're ready to go -- no external files or edits.

Version 2.0 was developed in vB4.2.2 but should work in any vB4 version.

Erica1977 · #**122** 11-10-2011, 03:21 AM

Oh by the way you should change your version been 1.0 ever since you made this mod should probably be at 2.0 version.

nerbert · #**123** 11-10-2011, 03:32 AM

What you could do for Seamus Red scroll buttons is change the background to this:

Code:

	background: 		rgb(80,16,21);  /*{vb:stylevar postbithead_background};*/

That's the average color of the red part. It just won't have the texture. If you don't like it you can change it back easily.

venom2124 · #**124** 11-10-2011, 03:38 AM

disregard. I'm stupid and posting to the wrong mod.

nerbert · #**125** 11-10-2011, 04:13 AM

Surely with all the graphics on your forum someone could make some image buttons for your various styles. Just don't change the width!

I noticed another problem: in the Btech red and the others below it the last cell in Threadnav is only partly exposed. The problem is the JavaScript gets a measure of the width of the available space and calculates the cell width based on that. Normally in the course of loading the page it gets that dimension after the scroll bar on the left has popped up. On these styles there's a delay between the scroll bar popping up and the page narrowing to fit. Apparently it's getting the width at the wrong time and making the cells too wide. I'll work on an event listener or some other method to determine whether the width has narrowed.

Erica1977 · #**126** 11-10-2011, 04:29 AM

Quote:

Originally Posted by nerbert

Surely with all the graphics on your forum someone could make some image buttons for your various styles. Just don't change the width!

I noticed another problem: in the Btech red and the others below it the last cell in Threadnav is only partly exposed. The problem is the JavaScript gets a measure of the width of the available space and calculates the cell width based on that. Normally in the course of loading the page it gets that dimension after the scroll bar on the left has popped up. On these styles there's a delay between the scroll bar popping up and the page narrowing to fit. Apparently it's getting the width at the wrong time and making the cells too wide. I'll work on an event listener or some other method to determine whether the width has narrowed.

Oh ok Thanks just let me know and i'll keep working with you on this Mod Thanks!

:up:

nerbert · #**127** 11-10-2011, 02:14 PM

Updated xml file to resolve more style incompatibility issues and problem with IE

Erica1977, this should make the cells come out correctly in all styles.

Erica1977 · #**128** 11-10-2011, 03:12 PM

Quote:

Originally Posted by nerbert

Updated xml file to resolve more style incompatibility issues and problem with IE

Erica1977, this should make the cells come out correctly in all styles.

problem with this update see pic.

Attachment 134351

nerbert · #**129** 11-10-2011, 04:00 PM

Okay, the cells come out too narrow for you and too wide for me, but for the average viewer they should come out just right!

I looked at the source code for Btech and I see why there's a problem, and I have a vague intuitive phantom-like notion of how to solve it. I shall work on bringing my notion into concrete form

nerbert · #**130** 11-10-2011, 10:51 PM

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

HTML Code:

<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>

Erica1977 · #**131** 11-10-2011, 11:34 PM

Quote:

Originally Posted by nerbert

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

HTML Code:

<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.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05110 seconds Memory Usage 2,409KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)bbcode_code (2)bbcode_html (3)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (1)pagenav_pagelinkrel (11)post_thanks_box (4)post_thanks_box_bit (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit (11)post_thanks_postbit_info (10)postbit (6)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

4 благодарности(ей) от:
BCP Hung, Erica1977, Nacho Vidal, sticky

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!