Grow your CSS skills. Land your dream job.

Explain this Javascript?

  • # December 14, 2012 at 7:55 pm

    Can someone explain what this javascript is doing?

    $(function() {

    $replybox = $(‘#reply textarea’);

    console.log($replybox);

    if($replybox.length) {

    $.contextMenu({
    selector: ‘a.with-context’,
    build : function($trigger, e) {

    console.log($trigger);

    return {
    callback : function() {},
    items: {
    twitter: {
    name : ‘View Twitter Profile…’,
    callback : function() {
    window.location.href = $trigger.attr(‘href’);
    }
    },
    separator: ‘


    ‘,
    reply : {
    name : ‘@ Reply…’,
    callback : function() {
    insertAtCursor(‘@’ + $trigger.attr(‘data-username’));
    window.location.href=’#reply’;
    }
    }
    }
    };

    },
    trigger: ‘left’,
    animation: {duration: 0, show: ‘show’, hide: ‘hide’}
    });

    }

    function insertAtCursor(text) {

    var area = $replybox[0];

    // IE
    if(document.selection && !window.opera) {

    area.focus();
    selection = document.selection.createRange();
    selection.text = text;

    // Moz + Webkit
    } else if (area.selectionStart || area.selectionStart == ’0′) {

    var start = area.selectionStart;
    var end = area.selectionEnd;
    var value = area.value;

    area.value = value.substring(0, start) + text + value.substring(end, value.length);
    area.focus();

    } else {

    area.value += text;
    area.focus();

    }

    };

    });

    # December 14, 2012 at 8:42 pm

    All of it?

    Looks like some sort of ability to reply to something with Twitter?

    # December 14, 2012 at 9:01 pm

    I just need someone to explain to me step-by-step what it is doing but it isn’t necessary.

    If that code indeed does allow the ability to post comments with Twitter, it might be just what I’m looking for.

    # December 15, 2012 at 9:58 am

    To me it looks like the top function runs a “contextMenu” script to interact with a textarea inside of a reply (#reply textarea). I don’t know exactly what that script does, but it looks like you can set which mouse button to click to open the menu (left in this case) to reply. It adds two custom functions:

    * “twitter” which allows you to view someone’s twitter profile
    * “reply” which just adds the person’s @name at the cursor in the textarea.

    The second part of the script `insertAtCursor` does just that. It finds the cursor location in the textarea with special treatment for IE and Opera and inserts a text string.

    # December 15, 2012 at 10:41 am

    The way i read it is,
    locates a text area used for sending tweet stores it in var,
    $.contextMenu (non standard jquery function not in the api, third party plugin prolly) builds a popup menu when left mouse is used on a an element, with two options View Profile and Reply it then pulls the data required from the attributes of the element clicked.

    View Profile just opens the twitter profile
    Reply moves to an anchor down the page and inserts and selects the twitter username into a textarea to be used for the reply tweet (done by insertAtCursor)

    # December 15, 2012 at 10:44 am

    For me this looks like some part of a wysiwyg editor or something. It detects the current cursor position and inserts some text in there. (maybe insert the latest tweet from a person?)

    # December 15, 2012 at 11:12 am

    Thanks guys. Basically it’s not what I need.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".