Sync Scrollbar (Horizontal) | Rex's Personal Site

HTML

<div class="flex-content">
    <div class="sync_scroll_top" target="#mousewheel_example">
        <div></div>
    </div>

    <div id="mousewheel_example">
        <input type="hidden" name="type" value="<?=$vital_type;?>">
        <input type="hidden" id="pid" name="pid" value="<?=$patient_id;?>">
        <input type="hidden" name="__method" value="edit">

        <table id="itable" class="table">
            <?php 
            foreach ($layouts as $field_index => $layout): 
            ?>
            <tr style="height:inherit;">
                <th class="stick1">
                    <?=$this->upload_his_layout_m->get_title($layout)?>
                </th>

                <?php
                if($layout->id == 39){
                    $html = '<td class="data-column" data-column-id="0">';
                    $html .= '<button type="button" class="btn btn-success btn-xs action_button" id="manual_upload" tabindex="">上傳至HIS</button>';
                    $html .= '</td>';
                    echo $html;
                }else{
                    echo $this->upload_his_layout_m->display($layout, 0, 0);
                }
                ?>
            </tr>
            <?php endforeach; ?>
        </table>
    </div>
</div>

</div>

<?php

foreach ($layouts as $field_index => $layout):

<?=$this->upload_his_layout_m->get_title($layout)?>

</th>

<?php

if($layout->id == 39){

$html = '<td class="data-column" data-column-id="0">';

$html .= '<button type="button" class="btn btn-success btn-xs action_button" id="manual_upload" tabindex="">上傳至HIS</button>';

$html .= '</td>';

echo $html;

}else{

echo $this->upload_his_layout_m->display($layout, 0, 0);

}

</tr>

<?php endforeach; ?>

</table>

</div>

Javascript

var syncscroll_app = function(){
 
    function init(){
        var $sync = $(".sync_scroll_top");
        var $target = $($sync.attr('target'));
        $sync.scroll(function(){
            $target.scrollLeft($sync.scrollLeft());
        });

        $target.scroll(function(){
            $sync.scrollLeft($target.scrollLeft());
        });

        refresh_sync_scroll();
    }

    function refresh_sync_scroll(){
        var $sync = $(".sync_scroll_top");
        if($sync.length > 0){
            var $target = $($sync.attr('target'));
            var $table = $target.find('table');
            $sync.find('div').css('width', $table.width());
        }
    }

    return {
        init: init, 
        refresh: refresh_sync_scroll
    }
}();

var syncscroll_app = function(){

function init(){

var $sync = $(".sync_scroll_top");

var $target = $($sync.attr('target'));

$sync.scroll(function(){

$target.scrollLeft($sync.scrollLeft());

});

$target.scroll(function(){

$sync.scrollLeft($target.scrollLeft());

});

refresh_sync_scroll();

}

function refresh_sync_scroll(){

var $sync = $(".sync_scroll_top");

if($sync.length > 0){

var $target = $($sync.attr('target'));

var $table = $target.find('table');

$sync.find('div').css('width', $table.width());

}

return {

init: init,

refresh: refresh_sync_scroll

}

}();

M	T	W	T	F	S	S
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29