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!
March 2024
Search
Similar topics
Who is online?
In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest
None
Most users ever online was 140 on July 4th 2021, 2:03 pm
None
Most users ever online was 140 on July 4th 2021, 2:03 pm
Most Viewed Topics
Top posting users this week
No user |
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]
STEP 2: JavaScript
[hc=JavaScript]
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.
PRESETS
[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:
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!
[/hc]
More features for this will be added.
[You must be registered and logged in to see this link.]
STEP 1: CSS
[hc = CSS]
- Code:
#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);
float:left;
width:100%;
}
#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;
}
#tagging{border:none;
background:transparent;
width:100%;
height:35px;
position:relative;
min-width:50px;
}
.innerTags {
height: 30px;
line-height: 30px;
}
#tagging:focus{outline:none}
#tag_editor{
background:#fff;
border:1px solid #000;
overflow:hidden;
white-space:nowrap;
}
#tagger{
float:left;
width:0px;
position:relative;
line-height:30px;
height:35px;
}
.tagged {
padding: 0px 12px 0px 5px;
margin: 2px 2px;
border-radius: 3px;
float: left;
cursor: pointer;
}
.tag{
border:1px solid #000;
padding:3px 5px;
background:#c3c3c3;
margin:0px 3px;
}
.silver{
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
[hc=JavaScript]
- Code:
$(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'),
width,
padding,
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)",
//DO NOT EDIT ANYTHING UNDER THIS STATEMENT
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(input.is(':hidden')){input.show();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="http://code.jquery.com/ui/1.10.3/jquery-ui.js";sort.type="text/javascript";sort.id="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') ;
PRESETS
[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!
[/hc]
More features for this will be added.
[You must be registered and logged in to see this link.]
Similar topics
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!
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!
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
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.
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!
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.
Number one: To fix the CSS issue of tags find this CSS class name and replace the current style you have with this:
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!
- Code:
.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!
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?
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.
Liked
@ 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..
Thank you, carry on..
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.
Nope it doesn't even show up on the full editor only on the quick replies, so it's useless for blog articles.
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.
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.
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!
|
|