Menu trượt cho mod_poll

    <a name="sondage"></a>
    <form name="CFvpoll" method="POST" action="{S_POLL_ACTION}">
    <table id="mytable" width="100%" cellpadding="0" cellspacing="1" border="0" class="forumline">
        <tr>
   
          <td class="check" height="25" style="border-width: 0 0 0
    1px;background: #0a0b06
    url(http://s913.photobucket.com/albums/ac332/battuvuong/cfviet/tcatbg.gif)
    repeat top left;
        color: #ff7500; height:29px; padding: 2px 3px;
        font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;">
                <span class="genmed module-title">{POLL_QUESTION}</span>
            </td>
        </tr>
        <tr>
            <td>
                {POLL_DISPLAY}
            </td>
        </tr>
    </table>
   
    </form>
   
   
   
          <style type="text/css">.actionsBox{
        font-size:13px;
        font-family: Arial,Verdana;
        font-style:normal;
        left:50%;
        position:absolute;
        top:-50px;
        opacity:0;
        cursor:move;
    }
    .actionsBox .menu{
        color:#47708F;
        width:240px;
        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;
        cursor:pointer;
        background:#e8f4fa;
        background:
            -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.38, rgb(230,243,249)),
            color-stop(0.88, rgb(245,249,250))
            );
        background:
            -moz-linear-gradient(
            center bottom,
            rgb(230,243,249) 38%,
            rgb(245,249,250) 88%
            );
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        -moz-box-shadow:0px 1px 0px #f9f9f9;
        -webkit-box-shadow:0px 1px 0px #f9f9f9;
        box-shadow:0px 1px 0px #f9f9f9;
    }
    .actionsBox .menu .button:hover{
        background:#fff;
    }
    .actionsBox .menu span{
        padding:0px 10px;
    }
    .actionsBox .submenu{
        display:none;
        width:120px;
        margin-left:100px;
        top:46px;
        right:10px;
        background:#fff;
        border:1px solid #D9EAF2;
        border-top:none;
        -moz-border-radius:0px 0px 10px 10px;
        -webkit-border-bottom-left-radius:10px;
        -webkit-border-bottom-right-radius:10px;
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
        -moz-box-shadow:0px 1px 4px #ddd;
        -webkit-box-shadow:0px 1px 4px #ddd;
        box-shadow:0px 1px 4px #ddd;
    }
    .actionsBox .submenu a{
        display:block;
        cursor:pointer;
        padding:10px 15px;
        border-top:1px solid #D9EAF2;
    }
    .actionsBox .submenu a.last{
        -moz-border-radius:0px 0px 10px 10px;
        -webkit-border-bottom-left-radius:10px;
        -webkit-border-bottom-right-radius:10px;
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
    }
    .actionsBox .submenu a.first{
        border-top:none;
    }
    .actionsBox .submenu a:hover{
        background-color:#f9f9f9;
    }
    .actionsBox .menu a.open,
    .actionsBox .menu a.closed{
        border:1px solid #D9EAF2;
        padding:4px 17px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        -moz-box-shadow:0px 1px 0px #f9f9f9;
        -webkit-box-shadow:0px 1px 0px #f9f9f9;
        box-shadow:0px 1px 0px #f9f9f9;
        cursor:pointer;
        opacity:0.6;
        margin-right:5px;
    }
    .actionsBox .menu a.open{
        background:#fff url(http://tympanus.net/Tutorials/CheckboxActions/open.png) no-repeat center center;
    }
    .actionsBox .menu a.closed{
        background:#fff url(http://tympanus.net/Tutorials/CheckboxActions/closed.png) no-repeat center center;
    }
    .actionsBox .menu a.open:hover,
    .actionsBox .menu a.closed:hover{
        opacity:1.0;
    }
   
   
    </style>
   
    <script type="text/javascript">
    //<![CDATA[
    var agt = navigator.userAgent.toLowerCase();
    var originalFirstChild;
    var display = false;
   
    function createPagination(which, string, x, y)
    {
        if ( display == true )
        {
            destroyPagination();
            display = false;
        }
        else
        {
            display = true;
   
            if (typeof(originalFirstChild) == "undefined")
            {
                originalFirstChild = document.body.firstChild;
            }
   
            x = document.all ? (event.clientX + document.body.scrollLeft) : x;
            y = document.all ? (event.clientY + document.body.scrollTop) : y;
   
            element = document.createElement("div");
            element.style.position = "absolute";
            element.style.zIndex = 1000;
            element.style.visibility = "hidden";
            excessWidth = 0;
   
            excessHeight = 20;
   
          element.innerHTML = '<table cellspacing="0" cellpadding="0"
    border="0" style="width:auto;"><tr><td><span
    class="gen">' + string +
    "</span></td></tr></table>";
            renderedElement = document.body.insertBefore(element, document.body.firstChild);
            renderedWidth = renderedElement.offsetWidth;
            renderedHeight = renderedElement.offsetHeight;
   
            overFlowX = x + renderedWidth + excessWidth - document.body.offsetWidth;
            x = overFlowX > 0 ? x - overFlowX : x;
   
            overFlowY = y + renderedHeight + excessHeight - window.innerHeight - window.pageYOffset;
            y = overFlowY > 0 ? y - overFlowY : y;
   
            renderedElement.style.top = (y + 15) + "px";
            renderedElement.style.left = (x + 15) + "px";
   
            if (agt.indexOf("gecko") != -1 && agt.indexOf("win") != -1)
            {
                setTimeout('renderedElement.style.visibility = "visible"', 1);
            }
            else
            {
                renderedElement.style.visibility = "visible";
            }
        }
    }
   
    function Pagination()
    {
    }
   
   
    function destroyPagination()
    {
        if (document.body.firstChild != originalFirstChild)
        {
            document.body.removeChild(document.body.firstChild);
        }
    }
    //]]>
   
    </script>
   
   
   
          <div id="actionsBox" class="actionsBox">
                <div id="actionsBoxMenu" class="menu">
                    <span id="cntBoxMenu">0</span>
   
                  <a class="button box_action"
    onclick="this.value=check('select','CFvpoll');return false;">Check
    All</a>
                    <a
    onclick="this.value=check('unselect','CFvpoll');return false;"
    class="button box_action">Uncheck</a>
   
                    <a id="toggleBoxMenu" class="open"></a>
                    <a id="closeBoxMenu" class="button">X</a>
                </div>
                <div class="submenu">
                    <a href="/index.htm">Trang chủ</a>
                    <a href="/html-h125.htm">Cửa hàng</a>
                    <a href="/html-h182.htm">Sơ đồ</a>
                    <a id="lnkSendPersonal" class='bvdangky' href="#">Dịch vụ</a>
                </div>
            </div>
   
     
            <script type="text/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 Menu
                        otherwise hide it
                        */
                        var $actionsBox = $('#actionsBox');
                        if(BoxesChecked > 0){
                            /*
                            if we didn't drag, then the box stays where it is
                            we know that that position is the document current top
                            plus the previous distance that the box had relative to the window top (distanceTop)
                            */
                            if(!dragged)
   
                              $actionsBox.stop(true).animate({'top':
    parseInt(15 + $(document).scrollTop()) + 'px','opacity':'1'},500);
                            else
   
                              $actionsBox.stop(true).animate({'top':
    parseInt($(document).scrollTop() + $actionsBox.data('distanceTop')) +
    'px','opacity':'1'},500);
                        }
                        else{
   
                          $actionsBox.stop(true).animate({'top':
    parseInt($(document).scrollTop() - 50) +
    'px','opacity':'0'},500,function(){
                                $(this).css('left','50%');
                                dragged = false;
                                /* if the submenu was open we hide it again */
                                var $toggleBoxMenu = $('#toggleBoxMenu');
                                if($toggleBoxMenu.hasClass('closed')){
                                    $toggleBoxMenu.click();
                                }
                            });
                        }
                    }
                 
                    /*
                    when scrolling, move the box to the right place
                    */
                    $(window).scroll(function(){
                        clearTimeout(moveBoxTimeout);
                        moveBoxTimeout = setTimeout(showActionsBox,500);
                    });
                 
                    /* open sub box menu for other actions */
                    $('#toggleBoxMenu').toggle(
                    function(e){
                        $(this).addClass('closed').removeClass('open');
                        $('#actionsBox .submenu').stop(true,true).slideDown();
                    },
                    function(e){
                        $(this).addClass('open').removeClass('closed');
                        $('#actionsBox .submenu').stop(true,true).slideUp();
                    }
                );
                 
                    /*
                    close the actions box menu:
                    hides it, and then removes the element from the DOM,
                    meaning that it will no longer appear
                    */
                    $('#closeBoxMenu').bind('click',function(e){
                        $('#actionsBox').animate({'top':'-50px','opacity':'0'},1000,function(){
                            $(this).remove();
                        });
                    });
                 
                    /*
                    as an example, for all the actions (className:box_action)
                    alert the values of the checked inputs
                    */
                    $('#actionsBox .box_action').bind('click',function(e){
                        var ids = '';
                        $('#mytable input:checked').each(function(e,i){
                            var $this = $(this);
                            ids += 'id : ' + $this.attr('id') + ' , value : ' + $this.val() + '\n';
                        });
                        alert('checked inputs:\n'+ids);
                    });
                });
            </script>