Tabbed catagories

[markaew]

I have the tabbed categories in my forum and I like them except I don't like the fact I can't see new posts until I open the category. Is there anything else that can be added to show new posts without opening each one to see if there is anything new?

[Former Member]

You could always browse the Recent Threads and Recent Posts but this doesn't sound possible to me.

[Chris]

With no clue as to which tabbed categories code to which you refer (a forum link and/or a link to the code would help) I'll post this with the caveat that it may not work because of the unknown variables. Drop the following code into your main footer:


<script type="text/javascript">
/* Add "new" to category titles if there are new posts */
$(function(){
$('.container.boards')
.each(function(){
var b = $(this);
if(b.find('td.icon img[title="New Posts"]').length){
b.find('.title_wrapper').prepend('<span class="new-icon" style="display:inline;float:none;"><a href="#" onclick="return false;">new</a></span>');
}
})
})
</script>


It should give you something like this:

[markaew]

sukhon.freeforums.net

This is a forum for a Thai high school and we need to make it as fool-proof as possible. Not seeing "new" in the category tab takes away a thought free action.

I will need to dump the tabs if I can't accomplish this.

[markaew]

If you want me to give you the code, I'll have to wait until I get home. I'm on my laptop now.

I got the code from the "templates" section here in support.

[Chris]

OK, that code changes the forum to a totally different structure so try this instead

<script type="text/javascript">
(function($){
$(function(){
$('.tabbedcategories td')
.each(function(){
$(this).contents().wrapAll('<div/>').parent().css({position:"relative",height:"100%"})
if(/tab(\d+)$/.test(this.id)){
var a = RegExp.$1,
b = $(this).css({"vertical-align":"top"}).children().first(),
c = $('.tabbedcatsdiv.'+ a),
d = $('<span class="new-icon" style="display:inline;float:none;"><a href="#" onclick="return false;">new</a></span>')
.wrap('<div style="position:absolute;display:inline-block;right:3px;top:-1em;" class="content"></div>').parent()
if(c.find('td.icon img[title="New Posts"]').length){
b.prepend(d)
}
}
a = b = c = d = null;
})
})})(jQuery)
</script>




You'll note that the real estate on those tabs are pretty limited so the new indicator will be sort of hovering above any tab that has new posts. Pay no attention to the fact that all tabs are new in the above pic, that's just because I am a guest on that forum and cannot see new post indicators so turned them all on in order to test positioning.

[markaew]

Thank you very much. I will try it when I get home. I am about 12 hours different from you so sorry about the delay in response.

[markaew]

EB

I'm not sure where I should put the code because on the layout-templates>home I experimented in several combinations with different results from your screen shot. I put your code on my lines 20-42 and it made the tabs non-functional and created duplicate categories below.

Of course, if I remove the table just above that script, the tabs are gone. If it's not much trouble, please look again. I returned it to it's original state so if you want me to re-install your code on lines 20-42 so you can see, let me know.

[Chris]

Place the code at the bottom of your home layout or in your main footer depending on whether you want it working on a theme by theme basis or across multiple themes. If it's still not working then it's best to leave it in place so I can investigate why it may not be working, basically it needs to run AFTER the code you're using to create those tabbed categories since it targets the structure created by that code.

Edit: You may notice also that I used encapsulation to protect the use of jQuery's "$" variable and that's because I'm seeing 6 different scripts failing on that forum due to that variable being "undefined", most likely due to scripts trying to run before the jQuery library is loaded but I saw only one such script so took precautions.

[markaew]

Ok. I placed the code at the bottom of the home layout so you can see the results.

It's working!!! Thank you!!!!

[Former Member]

Chris, I would love to have a "new" overlap the top of my category image if it has a new post in it. I have images instead of category names (accomplished via an img tag in the Display Name) and the collapsible category plugin installed. Is it possible to have the "new" show up for how my forum is set up? Or, even better, is there a way to have an image of my own creation show up (so I can make a larger "new" rather than my small thread "new")? alcryst.proboards.com

[Chris]

Dec 22, 2013 12:42:00 GMT -8 ₪» ⅀ ƪ Ƒ «₪ said:

Chris, I would love to have a "new" overlap the top of my category image if it has a new post in it. I have images instead of category names (accomplished via an img tag in the Display Name) and the collapsible category plugin installed. Is it possible to have the "new" show up for how my forum is set up? Or, even better, is there a way to have an image of my own creation show up (so I can make a larger "new" rather than my small thread "new")? alcryst.proboards.com

Unfortunately the layout on that forum no longer has the information needed to determine whether a board has new posts or not, specifically this
<td class="icon">$[board.icon]</td>
which would normally contain an icon indicating if there were new posts or not for a particular board.

What you could do is at least put back the icon making it display:none if you do not want it visible, that way a code could then pick it up even if it cannot be seen by the human eye. If you decide to do so then I would suggest giving it a unique class name or placing it directly after the description so it is in a known location and could be easily found by a script, example


<img style="display:none;" class="board-icon" src="$[board.icon.src]" alt="$[board.icon.alt]" title="$[board.icon.title]"  width="1" height="1">

[Former Member]

Alright so in the Layout Template > Board > Board List I changed

<p class="description"><div style="background-color:#837257;border:2px solid #2d2821;border-radius:40px 40px 40px 40px;box-shadow: -3px 3px 10px #171616;margin-bottom: 35px; color: #2d2821;font-family:georgia:padding:10px;font-size:8px;margin-right:150px;margin-left:150px;"><div class="boarddescription">$[board.description]</div></div></p>

to

<p class="description"><div style="background-color:#837257;border:2px solid #2d2821;border-radius:40px 40px 40px 40px;box-shadow: -3px 3px 10px #171616;margin-bottom: 35px; color: #2d2821;font-family:georgia:padding:10px;font-size:8px;margin-right:150px;margin-left:150px;"><div class="boarddescription">$[board.description]</div></div></p>
<img style="display:none;" class="board-icon" src="$[board.icon.src]" alt="$[board.icon.alt]" title="$[board.icon.title]"  width="1" height="1">

assuming that is what you wanted. Is that correct? And what further steps would I need to take?

[Chris]

That should do it and a better idea of exactly where you want the new icon to appear

[Former Member]

Nothing is showing up when there's a new post, is there something I'm doing wrong? I'm sorry, I'm very over my head here