Show Thread Enhancements - ThreadNav: scrolling New Posts navigation bar for Showthread

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.

[nerbert]

You have the right templates but there's an error in the templates (my bad!)

In your default style in "threadnav" in function hideInfo(event, id) find the line

x1=c+d+59-list.scrollLeft;

and change to 59 to 60

Now test it. Refresh the showthread page in any style, open a drop box and very slowly exit both to the right and the left. It should close exactly as you cross the border. If that works go to function hidePrev(event, id) and find

x1=c+d+59-list.scrollLeft-18;

and change 59 to 60 and test the preview drop box.

If all that works we have all the mechanical problems fixed and then we can work on fixing up the styling.

[Erica1977]

Originally Posted by nerbert

You have the right templates but there's an error in the templates (my bad!)

In your default style in "threadnav" in function hideInfo(event, id) find the line

x1=c+d+59-list.scrollLeft;

and change to 59 to 60

Now test it. Refresh the showthread page in any style, open a drop box and very slowly exit both to the right and the left. It should close exactly as you cross the border. If that works go to function hidePrev(event, id) and find

x1=c+d+59-list.scrollLeft-18;

and change 59 to 60 and test the preview drop box.

If all that works we have all the mechanical problems fixed and then we can work on fixing up the styling.

ok i did part 1 like you said and you said default style only not sure what your asking me to open and close but i added it part 1 this x1=c+d+60-list.scrollLeft; so can you come on and test it please i only did that part and only to default style let me know if i have to do second part.

[nerbert]

The changes didn't come through. Are all these child styles of a single default style? From looking at the style menu it appears they don't have a parent style. If that's the case you will have to change each one.

Do both changes on Seamus Red and we'll see if that works

[Erica1977]

Originally Posted by nerbert

The changes didn't come through. Are all these child styles of a single default style? From looking at the style menu it appears they don't have a parent style. If that's the case you will have to change each one.

Do both changes on Seamus Red and we'll see if that works

Does this answer your Question.
Attachment 134340

[Erica1977]

Originally Posted by nerbert

The changes didn't come through. Are all these child styles of a single default style? From looking at the style menu it appears they don't have a parent style. If that's the case you will have to change each one.

Do both changes on Seamus Red and we'll see if that works

Ok did it to Seamus Red.

[nerbert]

It looks like they are all independent styles. Let's get Seamus Red done and if it works there it should work everywhere. No point changing them all since I'll be updating the xml file to incorporate this change and then you'll have to revert everything again.

I'll post instructions that should fix up the appearance of the scroll buttons for Seamus Red in the next post.

[venom2124]

Have a slight alignment issue on the home page. Just wondering how I might go about fixing it.

[Erica1977]

Originally Posted by nerbert

It looks like they are all independent styles. Let's get Seamus Red done and if it works there it should work everywhere. No point changing them all since I'll be updating the xml file to incorporate this change and then you'll have to revert everything again.

I'll post instructions that should fix up the appearance of the scroll buttons for Seamus Red in the next post.

Ok will wait Thanks! :up:

[nerbert]

The changes came through on Seamus but it's still not working. I'm going to have to study this. In the mean time let's see if we can get those seamus scroll buttons looking better.

Go to "threadnav.css" and put this line at the top of .scroll

	padding: 		11px 0px 12px 0px;

and while you're there change the first line of div.threadnav to this

	margin: 		0px 0px 6px 0px;

That will put some space between ThreadNav and User Tag List.

Do you want to do something with those blazing white lines in ThreadNav? I thought the color at the very top of each of those red headers would look nice but maybe a medium gray would also work.

EDIT: Oops! That first instruction should be for .scroll, not .info

[Erica1977]

Originally Posted by nerbert

The changes came through on Seamus but it's still not working. I'm going to have to study this. In the mean time let's see if we can get those seamus scroll buttons looking better.

Go to "threadnav.css" and put this line at the top of .scroll

	padding: 		11px 0px 12px 0px;

and while you're there change the first line of div.threadnav to this

	margin: 		0px 0px 6px 0px;

That will put some space between ThreadNav and User Tag List.

Do you want to do something with those blazing white lines in ThreadNav? I thought the color at the very top of each of those red headers would look nice but maybe a medium gray would also work.

EDIT: Oops! That first instruction should be for .scroll, not .info

like this.

.scroll {
	padding: 		11px 0px 12px 0px;
        border: 		none;	
	height:			40px;
	width:  		17px;
	background: 		{vb:stylevar postbithead_background};
	color: 			{vb:stylevar postbithead_color};
	cursor: 		pointer;
	overflow:		hidden;
	clear:			none;
}