Use a JQuery script on multiple elements

Question

I have written a script to make a div scroll when the user hovers over a button, but I would like to modify this code to allow multiple instances of this to take effect on one page.

I'm new to JQuery, so i can't figure out the way to do it

http://jsfiddle.net/9GcM3/7/

To clarify I would like multiple copies of the "container" div, all to work the same way, with their own buttons, using ths same script.

HTML:

<div class="container">
<div class="content">
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
</div>

<a href="#" id="left">left</a>

<a href="#" id="right">right</a>

JQuery:

$(document).ready(function () {


var products = $('.product').length;
var width = products * 100;
$('.content').css('width', width + 'px');    


if ($('.content').width() > $('.container').width()) {
    $("#left").hover(function () {

        animateContent("left");

    }, function () {
        $('.content').stop();

    });

    $("#right").hover(function () {
        animateContent("right");

    }, function () {
        $('.content').stop();
    });
}
});

function animateContent(direction) {
var animationOffset = $('.container').width() - $('.content').width();
if (direction == 'left') {
    animationOffset = 0;
}

$('.content').animate({
    "marginLeft": animationOffset + "px"
}, "fast");
}

Answer 1

try this, can be used in similar situations (like a pattern):

In action: jsfiddle

$.extend({
    worker: new function () {
        var _self = this;
        var _container = null;

        _self.initialize = function (container) {
            _container = container;
            _attachBehavior(container);
        };

        var _attachBehavior = function (container) {

            var products = $('.product', container).length;
            var width = products * 100;
            $('.content', container).css('width', width + 'px');    

            if ($('.content', container).width() > $('.container').width()) {
                $("#left", container).hover(function () {
                    animateContent("left", container);
                }, function () {
                    $('.content', container).stop();
                });

                $("#right", container).hover(function () {
                    animateContent("right", container);

                }, function () {
                    $('.content', container).stop();
                });
            }

            var animateContent = function (direction, container) {
                var animationOffset = $(container).width() - $('.content', container).width();
                if (direction == 'left') {
                    animationOffset = 0;
                }
                $('.content', container).animate({ "marginLeft": animationOffset + "px" }, "fast");
            };

        };
    }
});

$(document).ready(function () {
    $('.container').each(function () {
        $.worker.initialize($(this));
    });
});

Answer 2

You need to scope this a little to make it work with multiple items:

$('.content').each(function(){
   //this now refers to the specific content div
   var products = $(this).find('.product').length;
   var width = products * 100;
   $(this).css('width', width + 'px');    
   //I think you get the rest from here, just adapt everything to find and $(this)
});

Answer 3

here's the code. I had add 2 instances and change some css too. See here Fiddle

JS

var Scroll = function( data ){
    var tis     = this;
    this.data = data;

    this.init = function(){
        this.left               = $(this.data.left);
        this.right              = $(this.data.right);
        this.container  = $(this.data.container);
        this.content        = $(this.data.content);

        this.left.hover(function(){tis.animateContent("left")}, function(){tis.content.stop()});
        this.right.hover(function(){tis.animateContent("right")}, function(){tis.content.stop()});  
    }
    this.animateContent = function(direction){

        var containerWidth      = this.container.width();
        var contentWidth            = this.content.width();

        if ( contentWidth > containerWidth ){
            var animationOffset = containerWidth - contentWidth;        
            if (direction == 'left') animationOffset = 0;
            this.content.animate({marginLeft : animationOffset + "px"}, "fast")
        }
    }   
}
var a = new Scroll( { left: '#left', right: '#right', container: '#container', content: '#content' } );
var b = new Scroll( { left: '#left2', right: '#right2', container: '#container2', content: '#content2' } );
$(function(){
    a.init();
    b.init();
});

CSS

.container {
    position: relative;
    height:100px;
    width:400px;
    background:red;
    padding:0 10px;
    overflow: hidden;
}
.content {
        position: absolute;
    background:#eee;
    height:70px;
        white-space:nowrap;
}
.product {
    height:80px;
    width:100px;
    display: inline-block;
}

HTML

<div class="container" id="container">
    <div class="content" id="content">
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
    </div>
</div>
<a href="#" id="left">left</a>
<a href="#" id="right">right</a>

<div class="container" id="container2">
    <div class="content" id="content2">
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
    </div>
</div>
<a href="#" id="left2">left</a>
<a href="#" id="right2">right</a>