Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts

    Status Tagging Help?

    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:
    Code:
    <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:
    Code:
    <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:
    Code:
    <script type="text/javascript">SDK.StatusForm({'defaultTxt':'What\'s on your mind?','action':'http:\/\/www.example.com\/ajax\/statusPost.ax'});</script>
    Last edited by DJCMBear; 07-14-2010 at 09:47 PM.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #2
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Can no one help?
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by DJCMBear View Post
    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?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    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.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •