Back To Top
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
  • UpdatesUpdates  
  • SearchSearch  
  • RegisterRegister  
  • Log inLog in  
  • April 2019

    Calendar Calendar


    Display results as :

    Rechercher Advanced Search


    Adding a Tagging System for post! Empty
    Who is online?
    In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest


    Most users ever online was 22 on June 26th 2013, 6:10 am
    RSS feeds

    Top posting users this week

    View previous topic View next topic Go down  Message [Page 1 of 1]


    Adding a Tagging System for post!

    Hey guys, Mr.EasyBB here with an EASY tagging system. All you have to do is follow step by step on what to do here! Check out all the variables and exactly how you can customize this awesome script!

    STEP 1: CSS
    [hc = CSS]

    #errorMess:before {
    content: '';
    float: left;
    border-left: 10px solid transparent;
    border-bottom: 15px solid rgb(167, 63, 63);
    margin-top: -15px;
    #errorMess:after {
    border-right: 80px solid transparent;
    border-top: 14px solid #a73f3f;
    content: '';
    float: right;
    margin-top: 10px;
    .tag {
    background: rgb(182, 182, 182);
    border: 1px solid rgb(133, 133, 133);
    color: #000!important;
    box-shadow: inset 0px 4px 6px rgb(224, 224, 224);
    text-decoration: none;
    margin: 0 3px;
    border-radius: 3px;
    padding: 3px 9px;
    float: left;
    #errorMess {
    background: #c04848;
    bottom: -45px;
    box-shadow: 0 4px 7px rgba(0,0,0,0.44);
    display: none;
    height: 50px;
    left: -5px;
    position: absolute;
    width: 61%;
    #errorMess span {
    font-weight: bold;
    font-size: 14px;
    line-height: 40px;
    padding: 0 28px;
    color: rgb(255, 255, 255);
    #errClose {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fcb2b1 !important;
    font-family: Arial,sans-serif;
    top: 2px;
    right: 5px;
    cursor: pointer;
    padding: 4px 8px;
    .innerTags {
    height: 30px;
    line-height: 30px;
    border:1px solid #000;
    .tagged {
    padding: 0px 12px 0px 5px;
    margin: 2px 2px;
    border-radius: 3px;
    float: left;
    cursor: pointer;
    border:1px solid #000;
    padding:3px 5px;
    margin:0px 3px;
    background: rgb(226, 226, 226);
    border: 1px solid rgb(170, 170, 170);
    box-shadow: inset 0px 5px 5px rgb(247, 247, 247);
    .red {
    background: rgb(255, 0, 0);
    border: 1px solid rgb(189, 0, 0);
    box-shadow: inset 0px 5px 5px rgb(255, 128, 128);
    .blue {
    background: rgb(68, 161, 223);
    border: 1px solid rgb(25, 116, 177);
    box-shadow: inset 0px 5px 5px rgb(106, 192, 250);
    .black {
    background: rgb(41, 41, 41);
    border: 1px solid rgb(0, 0, 0);
    box-shadow: inset 0px 5px 5px rgb(102, 102, 102);
    color: #FFF;
    .green {
    background: rgb(23, 146, 0);
    border: 1px solid rgb(13, 82, 0);
    box-shadow: inset 0px 5px 5px rgb(16, 202, 0);
    .yellow {
    background: rgb(225, 235, 0);
    border: 1px solid rgb(0, 0, 0);
    box-shadow: inset 0px 5px 5px rgb(255, 255, 0);

    STEP 2: JavaScript


    $(function() {
    var addArea = $('dd.dd-textarea') || $('dd.frm-textarea') ;
    if(addArea) {
    $('#text_editor_textarea').parent().after('<dt><label for="tagg_container">Tags :</label></dt><dd class="dd-textarea" style="position:relative"><div id="tagg_container"><div id="tag_editor"><span id="tagger"></span><input type="text" id="tagging" placeholder=""></div></div><div id="errorMess"><div id="errClose">X</div></div></dd>');
    var  input = $('#tagging'),
             tagged = $('#tagger'),
             taggs = $('.tagged'),
             editor = $('#tag_editor'),
        textarea = $('textarea'),
        send = $('.frm-buttons input[type="submit"]'),
             post = $('.post'),
        limitTags = true,
        limited = 10,
        tagAllowed = true,
        sortable = true,
             colorize = "black",
        triggers = {space:32,enter:13,tab:9},
        triggerKeys = ["space"],
             allowedTags= ["Hello","This","Is","Test"],
             errorProcess ="This Tag is Not Allowed. Please See our List of Tags",
             errorMess=  $('#errorMess'),
             errorMessText = "You need to fill out the rest of the Form!",
        placeholder= "Add up to 5 tags(seperate tags with spaces)",
    tagSize=taggs.length;var a=parseInt(tagged.outerWidth(),10),b=parseInt(input.outerWidth(),10),c=parseInt(editor.outerWidth(),10),d=a+b;$('#tagging').attr('placeholder',placeholder);input.on('keypress',function(event){var arr=$.map(triggerKeys,function(el,i){return triggers[el];});if($.inArray(event.which,arr)!=-1){event.preventDefault();var inputVal=input.val();if(inputVal===""){errorMess.children('span').remove();errorMess.prepend('<span>No Spaces Allowed In Tags<span>');errorMess.slideDown();}else{if(tagAllowed===true){var isAllowedTag=false;for(var i=0;i<allowedTags.length;i++){var aTags=allowedTags[i];if(input.val().toLowerCase()===aTags.toLowerCase()){isAllowedTag=true;break;}}if(isAllowedTag){tagged.append('<span unselectable="on" class="tagged '+colorize+'" title="Click To Delete">'+inputVal.trim()+'</span>');tagSize=$('.tagged').length;var ele=$('.tagged').last(),subtract=parseInt(ele.outerWidth(true),10);input.width(input.width()-subtract);tagged.width(tagged.width()+subtract);input.val("");input.css({color:'#000',marginLeft:'5px'});}else{errorMess.children('span').remove();errorMess.prepend('<span>'+errorProcess+'<span>');errorMess.slideDown();}}else{tagged.append('<span unselectable="on" class="tagged '+colorize+'" title="Click To Delete">'+inputVal.trim()+'</span>');tagSize=$('.tagged').length;var ele=$('.tagged').last(),subtract=parseInt(ele.outerWidth(true),10);input.width(input.width()-subtract);tagged.width(tagged.width()+subtract);input.css('marginLeft','5px');input.val("");input.css('color','#000');}if(limitTags===true){if(tagSize===limited){input.hide();}}}}else{if(input.width()<=50){input.css('width','+=4px');}}});input.on('keyup',function(){if(tagAllowed===true){for(var i=0;i<allowedTags.length;i++){var aTags=allowedTags[i];if(input.val().toLowerCase()===aTags.toLowerCase()){input.css('color','#0000FF');}}}ui=false;if(ui===true){ui=false;}if(sortable===true){ui=true;if(ui=true){$('#tagger').sortable();}}});$(document).on('dblclick','.tagged',function(){var addWidth=parseInt($(this).outerWidth(true),10);$(this).remove();input.width(input.width()+addWidth);tagged.width(tagged.width()-addWidth);input.css('marginLeft','0px');if(':hidden')){;tagSize=taggs.length;}});var click=false;$('.frm-buttons input[type="submit"]').click(function(event){var tags=$('.tagged');if(click===true){click=false;return;}event.preventDefault();if(textarea.val()<1){click=false;errorMess.children('span').remove();errorMess.prepend("<span>"+errorMessText+"</span>");errorMess.slideDown();}else{if(tags){click=false;for(var i=0;i<tags.length;i++){textarea.val(textarea.val()+"[tag]"+$(tags[i]).text()+"[/tag]");}input.val("");tags.remove();click=true;}else{if(textarea.val()<1){click=false;}else{click=true;}}}if(click===true){$(this).trigger('click');}});post.append('<div class="tagEle">Related Tags: <div class="innerTags"></div></div>');$('.post').html(function(){return $(this).html().replace(/\[tag\]/g,'<a href="/search?mode=searchbox&search_keywords={CONTENT}&show_results=posts" class="tag">').replace(/\[\/tag\]/g,'</a>');});var tag=$('.tag');tag.attr('href',function(){return $(this).attr('href').replace(/{CONTENT}/g,$(this).text());});$('#errClose').click(function(){errorMess.fadeOut();errorMess.children('span').remove();});var post=$('.post');for(var i=0;i<post.length;i++){var a=$(post[i]).find('.tag');for(var j=0;j<a.length;j++){$(a[j]).appendTo($(post[i]).find('.innerTags'));}}if(sortable===true){var sort=document.createElement('script');sort.src="";sort.type="text/javascript";"sortable";$('body').append(sort);}

    Now to the presets and changes you can/have to make:

    First to make this all work for your Forum-

    var addArea = $('dd.dd-textarea') || $('dd.frm-textarea') ;

    This must be changed per your forum. 

    • phpBB2: ????
    • punBB: var addArea = $('dd.dd-textarea') || $('dd.frm-textarea') ;
    • phpBB3: var addArea = $('dd.dd-textarea') || $('#textarea_content') ;
    • invision: var addArea = $('dd.dd-textarea') || $('#textarea_content.posting-block') ;

    [hc=Preset Options]
    limitTags: boolean (true or false) 
    If true limitTags is on, making the next options important

    limited: integer (how many tags you want users to have. If limitTags is false don't worry about this)

    tagAllowed = boolean (true or false)
    if true please see allowedTags

    sortable = boolean (true or false)
    If true, jQuery UI will be added and you can sort the tags in any order!

    colorize: Color codes
    Allowed Colors are:
    • Red
    • Blue
    • Green
    • Black
    • Silver

    You can make your own and add the class name to this inside quotes

    triggers = object
    Triggers are available keys to make your tags selected. triggerKeys is what you can play with! Don't change this at all!

    triggerKeys = array
    Space is the triggerKey, meaning it will add the word after hitting space. You can add more than one.

    EX: ["space","enter","tab"];

    allowedTags= array
    Array of Allowed words, add as many as you want. 

    EX: ["EasyBB","AvacWeb","HTML","CSS","JavaScript","CSS"];

    errorProcess ="This Tag is Not Allowed. Please See our List of Tags",
    Text String- Change the text of the alert box if you want to for Tags Limited!

    errorMessText = "You need to fill out the rest of the Form!",
    Text String- Change the text of the alert box, appears if the form isn't filled out completely.

    placeholder= "Add up to 5 tags(seperate tags with spaces)",
    text String- The Placeholder for the input, change this to whatever you'd like your input to say!


    More features for this will be added.

    [You must be registered and logged in to see this link.]
    Share this post on: diggdeliciousredditstumbleuponslashdotyahoogooglelive

    Can this be added to full text editor as well? It works but also I have one little problem. It seems to give me this when posting a tag on my post [You must be registered and logged in to see this image.]

    The thing is... The tag system works it's just that this popup comes up and when you click ok it puts the tag on the post. This works perfectly other then that!

    Post on June 10th 2013, 12:27 am by Puppycheese889

    Well firstly I don't think its my code really. Next I know you have phpbb2 so that may be it. Ill have to look into it

    Post on June 10th 2013, 2:35 am by Mr.EasyBB

    update on my last post I found out how to put it in the full text editor. Also It only gives me that error on quick reply.

    Post on June 10th 2013, 2:53 am by Puppycheese889

    Sorry I just saw your post and I have punbb not phpbb2 your getting me confused with someone else. Your code works perfectly. Just the quick reply gives me an error when I post and tags are their which is strange. Only in quick reply it does it! But it still works even though the error thing pops up!

    Post on June 10th 2013, 2:55 am by Puppycheese889

    Oh my bad, I thought you had phpBB2. I'll try to look at it if you want me to, I had this on a punBB test forum and never gave me an error/alert so maybe we can figure out what is going on.

    Post on June 10th 2013, 1:18 pm by Mr.EasyBB

    Number one: To fix the CSS issue of tags find this CSS class name and replace the current style you have with this:

    .innerTags {
    height: 30px;
    line-height: 18px;

    Also change your CSS for #errorMess width to 81% 

    Now to the Error- Do you have a WAX javaScript code? 

    There are a few problems, firefox displays your site differently, and you have the Extended Editor (switch mode) active. Most of my codes you should have this DEACTIVATED! 

    Post on June 10th 2013, 1:33 pm by Mr.EasyBB

    How can I get this to appear in the standard text editor instead of the quick reply and only allow this feature on the first post of a topic?

    Post on June 10th 2013, 2:51 pm by Rukiafan

    @Rukiafan activate javasrcript in all pages that worked for me. @Mr.Easybb I will change this.

    Post on June 10th 2013, 3:24 pm by Puppycheese889

    I'm not sure what WAX javascript is please explain this? also I have notice since I changed the css it looks better on my website and I don't have any trouble on safari anymore. Firefox and chrome both work but give me the error please try again pop up! If you would like to see what I mean try a test on the admin talk topic. Chrome and firefox are the only ones giving me the pop up. 

    Post on June 10th 2013, 4:04 pm by Puppycheese889

    Nothing happens when it's set to all pages, no errors either. Neutral

    Post on June 10th 2013, 4:45 pm by Rukiafan

    The extended editor was removed a long time ago by forumotion. Tongue

    Post on June 10th 2013, 4:47 pm by Rukiafan

    @ Rukiafan: Please try and make your comments all in one post if you can, your 2 posts above and minutes apart. As a general rule of thumb we don't mind double postings, but minutes apart we would like to keep down to a dull roar so people don't get in a habit of doing it. It makes the threads longer than they need to be and will eventually create unnecessary extra pages. You all been real good about that I'm just posting a reminder.

    Thank you, carry on.. Smile

    Post on June 10th 2013, 5:06 pm by runawayhorses

    Well people still have the Extended Editor so I'm not sure what you are talking about Rukia, the Button still exist for a lot of people too. So I believe you may be thinking of something completely different. And the code adds it automatically to the Regular and Quick Reply post.

    Post on June 10th 2013, 6:28 pm by Mr.EasyBB

    Nope it doesn't even show up on the full editor only on the quick replies, so it's useless for blog articles. Sad

    Post on June 11th 2013, 1:50 pm by Rukiafan

    How is it useless for blog articles? Blogs have quick reply as well you know? There may be a conflicting javascript or you don't have the code correct. I need to know if the input isn't showing up or if the tags aren't showing up. 

    Post on June 11th 2013, 6:51 pm by Mr.EasyBB

    Yoah, but the quick reply isn't available when starting a topic and I wanted to use it to tag the articles not allow every post to be tagged. Neutral

    Post on June 11th 2013, 9:44 pm by Rukiafan

    Mr. easybb I am still having issues with the error message popping up after adding tags. 

    Post on June 12th 2013, 3:13 am by Puppycheese889

    Also there is a new issue after I changed the code. It seems the text is copied onto the poll field when posting a topic and I have to delete the text inside it or else it won't let me post it says I hit the poll option limit. This is urgent! I'm not sure why it interferes with the polls so much!

    Post on June 12th 2013, 4:27 am by Puppycheese889

    Post  by Sponsored content

    View previous topic View next topic Back to top  Message [Page 1 of 1]