...

View Full Version : Status Tagging Help?



DJCMBear
07-14-2010, 10:42 PM
Hi i'm in need of some help with a javascript function I have been working day and night trying to get this to work and its almost there, basicly what I am trying to do is create a facebook like status update box with user tagging and member search drop down.

Currently I have the status update input where users can enter in their status update, this also has a user tagging system with it which when you type the '@' symbol the friend search displays and once a name is clicked the @ sign plus what you was writing gets replaced with that name but what I am in need of is someone who can sort this problem out, this problem is I want the user to click on the name but once clicked i need the name to show up as a blue link just like facebook do and also i need the backend of the system to check when a name is click to get the id number of that user and set the bbcode in the status area as my bbcode system uses [quote=123432]username[/quote] which is how what quotes the user now I also need to have a rich text area instead of the standard html one as I need the area to display the link and not the bbcode.

If any one can help please reply, Thank you, DJCMBear.

P.S. Here are the codes I have so far just for someone to over look to see if they can sort it out.

The Javascript Class:

<script type="text/javascript">
var SDK = {
setCursor: function(el)
{
if(el.selectionStart)
{
return el.selectionStart;
}
else if (document.selection)
{
el.focus();
var r = document.selection.createRange();
if (r == null)
{
return 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
},

displayFriends: function(cp)
{
var friendSession = document.getElementById('fsi');
var friendSelect = document.getElementById('fs');
var selectText = document.getElementById('fst');
var info = friendSession.value.split(':');
var checker = info[0];
var position = parseInt(info[1]);
if(window.event.keyCode == 192 && friendSession.value == 0)
{
friendSelect.style.display = 'block';
friendSession.value = 1+':'+this.setCursor(cp);
}
else if(friendSession.value == 0)
{
friendSelect.style.display = 'none';
}
else if(friendSession.value == 1 && window.event.keyCode == 8 && selectText.value.substr(position,1) != "@")
{
friendSession.value = 0;
friendSelect.style.display = 'none';
}
},

selectFriend: function(selection)
{
var input = document.getElementById('fst');
var info = document.getElementById('fsi').value.split(':');
var checker = info[0];
var position = parseInt(info[1]);
if(checker == 1)
{
input.focus();
input.value = input.value.substring(0,position)+selection.innerHTML+' ';
document.getElementById('fsi').value = 0;
document.getElementById('fs').style.display = 'none';
input.focus();
}
},

shrink: function(current,newid)
{
var friendSession = document.getElementById('fsi');
var old = document.getElementById(newid);
if(current.value == '' && friendSession.value.substring(0,1) != 1)
{
current.style.display = 'none';
current.value = '';
old.style.display = 'block';
}
},

grow: function(current,newid)
{
var input = document.getElementById(newid);
current.style.display = 'none';
input.style.display = 'block';
input.style.height = '70px';
input.focus();
},

StatusForm: function(info)
{
var form = "<div id=\"statusUpdater\"><div onclick=\"SDK.grow(this,\'fst\');\" id=\"dfst\">"+info.defaultTxt+"</div>";
form += "<textarea style=\"display:none;\" id=\"fst\" onclick=\"SDK.grow(this,'fst');\" onblur=\"SDK.shrink(this,'dfst');\" onkeydown=\"SDK.displayFriends(this);\" onkeyup=\"SDK.displayFriends(this);\"></textarea>";
form += "<input type=\"hidden\" id=\"fsi\" value=\"0\" /><div id=\"fs\" style=\"display:none;\">";
form += "<ul><li onclick=\"SDK.selectFriend(this);\" style=\"cursor:pointer;\">Bobby Frank</li>";
form += "<li onclick=\"SDK.selectFriend(this);\" style=\"cursor:pointer;\">Dan Dave</li>";
form += "<li onclick=\"SDK.selectFriend(this);\" style=\"cursor:pointer;\">John Doe</li></ul></div></div>";
document.write(form);
}
}
</script>

The CSS Styles:

<style type="text/css">
* {
margin: 0;
padding: 0;
}

#statusUpdater {
width: 500px;
margin: 30px auto;
}

#fst {
width: 100%;
}

#dfst {
width: 98.5%;
}

#fst, #dfst {
font-family: arial;
padding: 3px;
font-size: 14px;
resize: none;
border: 1px solid #666;
color: #666;
cursor: text;
background: #fff;
overflow-y: auto;
height: 16px;
}

#fs {
margin: 0;
width: 99.8%;
border: 1px solid #000;
border-top: 0px;
}

#fs ul {
list-style: none;
}

#fs li {
padding: 3px;
}
</style>

The Javascript Form Call:

<script type="text/javascript">SDK.StatusForm({'defaultTxt':'What\'s on your mind?','action':'http:\/\/www.example.com\/ajax\/statusPost.ax'});</script>

DJCMBear
07-16-2010, 05:21 PM
Can no one help?

Rowsdower!
07-16-2010, 10:10 PM
Can no one help?

I think your question is a bit confusing (or at least that's my problem).

Do you have a live test page we can see to get a better idea of what you're trying to do?

DJCMBear
07-17-2010, 01:11 AM
no live page as of yet but what im trying to do is a facebook style friend tag so lets say i have 5 friends on the site.

1: John Doe
2: Jonny Jr
3: Dan Dave
4: Dave Steve
5: Steven Paul

What i want to do is to be able to have a rich text area to be the input which once im typing in it if i push the '@' sign on the keyboard i want a dropdown like facebook have to display the friends of what im writing after the @ sign so if i put "@jo" then both 1 and 2 would show but if i put "@d" then 1, 3 and 4 would show, hope this is making more sense.

Once I find the person i want to tag if i click their name the "@d" or "@jo" would change to a blue link which would be that persons name but also be the bbcode so if i sent it this "Hello (@John Doe) how are you?" the persons name inside the ( and ) would be the link, after sending it this would be the string saved to the database, "Hello [ quote="1" ]John Doe[/ quote ] how are you?" << no spaces n the quote tags.

so like a bbcode generator but you see the link and not the bbcode text if that makes if any easier to understand.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum