PDA

View Full Version : Status Tagging Help?



DJCMBear
07-14-2010, 09: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, 04:21 PM
Can no one help?

Rowsdower!
07-16-2010, 09: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, 12: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.