[SBlueman]

I wanted to share how I share the Zoints Thread tag mod on my NFL forum, maybe it will help others.

I run a NFL Football Forum at GridironFans.com, and we pride ourselves in bringing all the latest NFL news to the members of our community. We have one forum (unfortunately I am limited to being able to post news in one forum because of the current setup of the vbAdvanced portal system) where I post all the NFL news. The forum is closed to posting new threads to everyone except for a group called "NFL News Reporters". When this group posts news they are required to use a post icon for the team they are posting about and then they are required to enter topic tags. Now this is where I differ from the current setup most of you know.

Most of you are used to this field:



On our site though the reporters are required to use pre-determined tags. How do they do this? By clicking on them from this field:



They click on the tags to select them and the tags are then added to each post. How did we pull this off? By using a custom code. I edited the "zointstags_tagform" to this:

<br>
<!-- zoints tags field -->
<fieldset class="fieldset" style="margin:0px 0px 0px 0px">
		<legend>You Must Click Once On The Applicable Topic Tags:</legend>
		<div style="padding:$stylevar[formspacer]px">
			<table cellpadding="0" cellspacing="$stylevar[cellspacing]" border="0" width="95%">
<tr>
	<td><input type="hidden" class="bginput" id="tags" name="zointstags" value="$zointstags" size="40" tabindex="1" /></td>
</tr>
<tr>
<td><!-- BEGIN Topic Tags - TMO -->             
              <td width="100%" class="row1"><span class="gen"> 
                <style type="text/css">
	.selected { background-color: #7777FF; }
	.unselected { background-color: transparent; }
#popularTags span { font-size: 11px; font-family: monospace; }
#popularTags {width: 100%;}
</style>
                <script type="text/javascript">

Array.prototype.contains = function (ele) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == ele) {
            return true;
        }
    }
    return false;
};

Array.prototype.remove = function (ele) {
    var arr = new Array();
    var count = 0;
    for (var i = 0; i < this.length; i++) {
        if (this[i] != ele) {
            arr[count] = this[i];
            count++;
        }
    }
    return arr;
};

window.onload = function () {
        var taglist = document.getElementById('tags');
	taglist.value = taglist.value.replace (/\s+/g,'');  // strip space
        var tags = taglist.value.split(',');
        
        var populartags = document.getElementById('popularTags').getElementsByTagName('span');
        
        for (var i = 0; i < populartags.length; i++) {
            if (tags.contains(populartags[i].innerHTML)) {
                populartags[i].className = 'selected';
            }
        }
}

function doTag(ele) {
    var thisTag = ele.innerHTML;
    var taglist = document.getElementById('tags');
    var tags = taglist.value.split(',');
 
    // If tag is already listed, remove it
    if (tags.contains(thisTag)) {
        tags = tags.remove(thisTag);
        ele.className = 'unselected';
        
    // Otherwise add it
    } else {
        tags.splice(tags.length-1, 0, thisTag);
        ele.className = 'selected';
    }
    
    taglist.value = tags.join(',');
    document.getElementById('tags').focus();
}
</script>
                <table id="popularTags">
                  <tr> 
                    <td colspan=4><span onclick="doTag(this)">afc</span></td>
                    <td colspan=4><span onclick="doTag(this)">nfc</span></td>
                  </tr>
                  <tr> 
                    <td><span onclick="doTag(this)">afceast</span></td>
                    <td><span onclick="doTag(this)">afcnorth</span></td>
                    <td><span onclick="doTag(this)">afcsouth</span></td>
                    <td><span onclick="doTag(this)">afcwest</span></td>
                    <td><span onclick="doTag(this)">nfceast</span></td>
                    <td><span onclick="doTag(this)">nfcnorth</span></td>
                    <td><span onclick="doTag(this)">nfcsouth</span></td>
                    <td><span onclick="doTag(this)">nfcwest</span></td>
                  </tr>
                  <tr> 
                    <td><span onclick="doTag(this)">bills</span></td>
                    <td><span onclick="doTag(this)">bengals</span></td>
                    <td><span onclick="doTag(this)">colts</span></td>
                    <td><span onclick="doTag(this)">broncos</span></td>
                    <td><span onclick="doTag(this)">cowboys</span></td>
                    <td><span onclick="doTag(this)">bears</span></td>
                    <td><span onclick="doTag(this)">buccaneers</span></td>
                    <td><span onclick="doTag(this)">49ers</span></td>
                  </tr>
                  <tr> 
                    <td><span onclick="doTag(this)">dolphins</span></td>
                    <td><span onclick="doTag(this)">browns</span></td>
                    <td><span onclick="doTag(this)">jaguars</span></td>
                    <td><span onclick="doTag(this)">chargers</span></td>
                    <td><span onclick="doTag(this)">eagles</span></td>
                    <td><span onclick="doTag(this)">lions</span></td>
                    <td><span onclick="doTag(this)">falcons</span></td>
                    <td><span onclick="doTag(this)">cardinals</span></td>
                  </tr>
                  <tr> 
                    <td><span onclick="doTag(this)">jets</span></td>
                    <td><span onclick="doTag(this)">ravens</span></td>
                    <td><span onclick="doTag(this)">texans</span></td>
                    <td><span onclick="doTag(this)">chiefs</span></td>
                    <td><span onclick="doTag(this)">giants</span></td>
                    <td><span onclick="doTag(this)">packers</span></td>
                    <td><span onclick="doTag(this)">panthers</span></td>
                    <td><span onclick="doTag(this)">rams</span></td>
                  </tr>
                  <tr> 
                    <td><span onclick="doTag(this)">patriots</span></td>
                    <td><span onclick="doTag(this)">steelers</span></td>
                    <td><span onclick="doTag(this)">titans</span></td>
                    <td><span onclick="doTag(this)">raiders</span></td>
                    <td><span onclick="doTag(this)">redskins</span></td>
                    <td><span onclick="doTag(this)">vikings</span></td>
                    <td><span onclick="doTag(this)">saints</span></td>
                    <td><span onclick="doTag(this)">seahawks</span></td>
                  </tr>
                  <tr> 
                    <td><span onclick="doTag(this)">nfl</span></td>
                    <td><span onclick="doTag(this)">draft</span></td>
                    <td><span onclick="doTag(this)">injury</span></td>
                    <td><span onclick="doTag(this)">legal</span></td>
                    <td><span onclick="doTag(this)">rumor</span></td>
                    <td><span onclick="doTag(this)">score</span></td>
                    <td><span onclick="doTag(this)">topstory</span></td>
                    <td><span onclick="doTag(this)">transaction</span></td>
                  </tr>
                </table>
                <br/>
                <b>NOTE:</b> The 'nfl' tag is for league news only. You do not 
                have to tag everything with 'nfl'. 
                <!-- END Topic Tags - TMO --></td>
</tr>
</table></fieldset>
<!-- / zoints tags field -->

Now....once a story is posted they get grouped into the tags used. So say I want to check out the latest headlines for a particular team. On my site people can click on my custom navbar and choose the team, division, conference and other tags (League News, NFL Draft, Injury News, Legal News, NFL Rumors, Top Stories, Transactions, Scores). If I want to check out the latest headlines for the Bills I would click on "Buffalo Bills" under the AFC/AFC East menu and it brings up all the NFL news posted for the Bills.

I am hoping that one day I can find a way to:

• Be able to view the post icons when I sort news per tag
• Be able to have a RSS feed for each pre-determined tag
• Have the story from the tag be displayed in a portal page as opposed to directly going to the forum

If anyone has any questions about my setup please feel free to ask. If you want to use this system and create your own pre-determinded tags then feel free to use the code. And if anyone can help me reach my goals of adding those three features to the current tag setup, please let me know!

I hope people found this post informative and helpful. I am greatful to the people at Zoints for their great modification. I was using a different tag mod before and if fell woefully short to the great work done with this system.