Location hScroll (jQuery plugin)

by amindunited

HTML

<!--<div class="outerWrap">
    <div class="scrollBackTrigger"></div>
    <div class="listWrap">-->
        <div class="list">
            <div class="listElement">One</div>
            <div class="listElement">Two</div>
            <div class="listElement">Three</div>
            <div class="listElement">Four</div>
            <div class="listElement">Five</div>
        </div>
    <!--</div>
    <div class="scrollForwardTrigger"></div>
</div>-->

CSS

.outerWrap {
    /*
    position: relative;
    width: 200px;
    padding-left: 10px;
    padding-right: 10px;
    */
}
.listWrap {
    /*
    width: 200px;
    height: 25px;
    overflow:hidden;
    */
}
.scrollBackTrigger {
    /*
    position: absolute;
    top:0px;
    left:0px;
    width: 10px;
    height: 20px;
    border: solid 1px blue;
    */
}
.scrollForwardTrigger {
    /*
    position: absolute;
    top:0px;
    right:0px;
    width: 10px;
    height: 20px;
    border: solid 1px blue;
    */
}
.list {
    width: 150px;
    overflow: hidden;
    height: 25px;
    white-space: nowrap;
}
.listElement {
    width: 50px;
    display: inline-block;
}

JavaScript

/*
$(function(){
    var listWidth = 0;
    $('.listElement').each(function(i, obj){
        listWidth += $(this).outerWidth();
    })
    $('.list').css({'min-width':listWidth});
    var maxScroll = $('.list').outerWidth();
    $('.listWrap').scrollLeft(maxScroll);
    
});
*/
////////////////////////////////////////////////////////////////////////////////////
(function ($){
    
    var wrap = '<div class="amuHorizontalHoverScroll-outerWrap">'+
            '<div class="amuHorizontalHoverScroll-listWrap">'+
            '</div>'+
            '<div class="amuHorizontalHoverScroll-scrollBackTrigger"></div>\n'+
            '<div class="amuHorizontalHoverScroll-scrollForwardTrigger"></div>\n'+
        '</div>';
    
    //An object to hold the default values
    var defaults = {
        triggerWidth: 10,
        innerPadding: 10,//the amount of padding should be the same as triggerWidth
    };
    
    //An Object to hold the combined defaults and user defined options 
    var settings = {};
    
    //An object to hold the functions of the plugin
    var methods = {
        //Handle many objects indavidually:
        init: function(options){
            return this.each(function(){
                var $this = $(this);
                
                //
                settings = $.extend({}, defaults, options);
                $(this).data('amuHorizontalHoverScroll', settings);
                
                var data = $(this).data('amuHorizontalHoverScroll');
                
                $($this).wrap(wrap);
                
                methods.setWrapperStyles.apply(this);
                methods.setListeners.apply(this);
                $(this).scrollLeft(75)
            });
        },
        setWrapperStyles: function(){
            //set styles
            var $this = $(this);
            var data = $(this).data('amuHorizontalHoverScroll');
            var outerWrap = $(this).closest('.amuHorizontalHoverScroll-outerWrap');
            
           ...