Sunday, July 19, 2015

horinzontal scrolling content using jScrollPane and content mousemove event

var scrollbarWidth = 16;
    var scrollHeight = $('.site-container').get(0).scrollHeight;
    var sw = $(window).width();
    var sh = $(window).height();
    var padleftStr = $('.site-container').css('padding-left');
    var padleftInt = padleftStr.substring(0, padleftStr.length - 2);

    var tnavWidth = sw - (scrollHeight > 0 ? scrollbarWidth : 0) - padleftInt;
    var lnavHeight = sh - $('.logo-wrap').height();

    $(window).on('resize', function () {
        checkScrolling($('.cd-tabs nav'));
        tabContentWrapper.css('height', 'auto');

        sw = $(window).width();
        sh = $(window).height();

        padleftStr = $('.site-container').css('padding-left');
        padleftInt = padleftStr.substring(0, padleftStr.length - 2);

        tnavWidth = sw - scrollbarWidth - padleftInt;
        lnavHeight = sh - $('.logo-wrap').height();
        $('.menu-3 span').html('sw: ' + sw + ' , padleft: ' + padleftInt);

        var toppadleftStr = $('.top-container').css('padding-left');
        var toppadleftInt = toppadleftStr.substring(0, toppadleftStr.length - 2);
        $('.top-container').width(tnavWidth - toppadleftInt - 1);
        $('.top-container #top-navbar-container').width(tnavWidth - toppadleftInt - 1);

        $('.scroll-bar-left').height(lnavHeight - 1);

        $('.scroll-bar-left, #top-navbar-container, .zar-wrapper').each(function () {
            var api = $(this).data('jsp');
            if (typeof api === 'object') {
                api.reinitialise();
            } else {
                $(this).jScrollPane();
            }
        });

        var jspPane = $('#top-navbar-container').find('.jspPane');
        var jspContainer = $('#top-navbar-container').find('.jspContainer');
        if (jspContainer.find('.jspHorizontalBar').size() === 0) {
            jspPane.css('left', '0px');
        }

    }).trigger('resize');

    var toppadleftStr = $('.top-container').css('padding-left');
    var toppadleftInt = toppadleftStr.substring(0, toppadleftStr.length - 2);
    $('.top-container').width(tnavWidth - toppadleftInt - 1);
    $('.top-container #top-navbar-container').width(tnavWidth - toppadleftInt - 1);
    $('.scroll-bar-left').height(lnavHeight - 1);

    $('#top-navbar-container').mousedown(function (event) {
        event.preventDefault();
       
        improvejScrollPane.downx = event.pageX;
        improvejScrollPane.moving = false;
    }).mousemove(function (event) {
        event.preventDefault();

        var jspPane = $(this).find('.jspPane');
        var navfullw = jspPane.find('#navbar').width();
        var jspw = $(this).find('.jspContainer').width();
        var panel = jspPane.position().left;
        var trackw = $(this).find('.jspTrack').width();
        var jspDrag = $(this).find('.jspDrag');
        var dragw = jspDrag.width();
        var dragl = jspDrag.position().left;
        var currx = event.pageX;
        var diffx = improvejScrollPane.downx - currx;
        var clicked = parseInt(event.which + '' + event.button);

        if (improvejScrollPane.downx > 0 && Math.abs(diffx) > 0 && clicked === 10) {
            improvejScrollPane.moving = true;
            improvejScrollPane.downx = currx;

            var ddiffx = diffx * -1;
            var diffw = jspw - navfullw;
            var ddiffw = dragw - trackw;
            var perw = Math.abs(ddiffw / diffw) * diffx;
            var cleft = panel + ddiffx;
            var dleft = dragl + perw;
            if (ddiffx > 0) {
                if (cleft > 0)
                    cleft = 0;
                if (dleft < 0)
                    dleft = 0;
            } else {
                if (cleft < diffw)
                    cleft = diffw;
                if (trackw < dleft + dragw)
                    dleft = trackw - dragw;
            }
            //$('.test').html(diffw + '=>' + ddiffw);
            jspPane.css('left', cleft + 'px');
            jspDrag.css('left', dleft + 'px');
        }
    }).mouseup(function (event) {
        event.preventDefault();
        improvejScrollPane.downx = 0;
    }).click(function (event) {
        if (improvejScrollPane.moving)
            event.preventDefault();
    });