on selected drop menu

by secretgspot

HTML

<table id="mytable">
                <thead>
                    <tr>
                        <th colspan="2"></th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th colspan="2"></th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td class="check"><input id="check_1" name="check_1" type="checkbox" value="1" AUTOCOMPLETE=OFF /></td>
                        <td>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                            <span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="check"><input id="check_2" name="check_2" type="checkbox" value="2" AUTOCOMPLETE=OFF /></td>
                        <td>
                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
                            <span>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="check"><input id="check_3" name="check_3" type="checkbox" value="3" AUTOCOMPLETE=OFF /></td>
                        <td>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                            <span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="check"><input id="check_4" name="check_4" type="checkbox" value="4" AUTOCOMPLETE=OFF /></td>
                        <td>
                            Duis aute irure dolor in reprehenderit in voluptate...

CSS

table{
    border-collapse:collapse;
    width:100%;
    margin:0px auto;
    line-height:18px;
    border:1px solid #ddd;
    font-weight:bold;
    color:#444;
    font-size:13px;
    font-family:Helvetica,Arial,Verdana;
    font-style:normal;
    float:left;
}
table thead tr,
table tfoot tr{
    height:20px;
    background-color:#ddd;
}

table span{
    color:#999;
    display:block;
    font-weight:normal;
}
table td{
    padding:7px;
    border-bottom:1px solid #ddd;
    background-color:#f9f9f9;
    cursor:pointer;
}
table td input{
    margin-left:20px;
}
table td.check{
    width:40px;
    cursor:default;
}
table tbody tr:hover td{
    background-color:#F0F0F0;
}
table tbody tr.selected td{
    background-color:#FFFFEF;
}
table tbody tr.selected:hover td{
    background-color:#FFFFEF;
}
.actionsBox{
    font-size:13px;
    font-family:Helvetica,Arial,Verdana;
    font-style:normal;
    left:50%;
    position:absolute;
    top:-50px;
    opacity:0;
    cursor:move;
}
.actionsBox .menu{
    width:240px;
    color:#47708F;
    line-height:30px;
    text-shadow:1px 1px 0px #fff;
    padding:7px; 
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    font-weight:bold;
    border:1px solid #D9EAF2;
    background:#e8f4fa;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.58, rgb(217,234,242)),
        color-stop(0.93, rgb(232,244,250))
        );
    background:
        -moz-linear-gradient(
        center bottom,
        rgb(217,234,242) 58%,
        rgb(232,244,250) 93%
        );
    -moz-box-shadow:1px 1px 3px #999;
    -webkit-box-shadow:1px 1px 3px #999;
    box-shadow:1px 1px 3px #999;    

}
.actionsBox .menu .button{
    padding:4px 7px;
    border:1px solid #D9EAF2;
    background:#e8f4fa;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.38, rgb(230,243,249)),
        color-stop(0.88,...

JavaScript

$(function() {
                /* tells us if we dragged the box */
                var dragged = false;
                
                /* timeout for moving the mox when scrolling the window */
                var moveBoxTimeout;
                
                /* make the actionsBox draggable */
                $('#actionsBox').draggable({
                    start: function(event, ui) {
                        dragged = true;
                    },
                    stop: function(event, ui) {
                        var $actionsBox = $('#actionsBox');
                        /*
                        calculate the current distance from the window's top until the element
                        this value is going to be used further, to move the box after we scroll
                         */
                        $actionsBox.data('distanceTop',parseFloat($actionsBox.css('top'),10) - $(document).scrollTop());
                    }
                });
                
                /*
                when clicking on an input (checkbox),
                change the class of the table row,
                and show the actions box (if any checked)
                 */
                $('#mytable input[type="checkbox"]').bind('click',function(e) {
                    var $this = $(this);
                    if($this.is(':checked'))
                        $this.parents('tr:first').addClass('selected');
                    else
                        $this.parents('tr:first').removeClass('selected');
                    showActionsBox();
                });
                
                function showActionsBox(){
                    /* number of checked inputs */
                    var BoxesChecked = $('#mytable input:checked').length;
                    /* update the number of checked inputs */
                    $('#cntBoxMenu').html(BoxesChecked);
                    /*
                    if there is at least one selected, show the BoxActions...