Question

I found this great jquery bubble script online – http://jqueryfordesigners.com/coda-popup-bubbles/ – and I want to apply the same script to multiple items. The only thing is the jquery script only applies to one item.

Here is the script:

$(function () {
    $('.bubbleInfo').each(function () {
        var distance = 10;
        var time = 250;
        var hideDelay = 500;

        var hideDelayTimer = null;

        var beingShown = false;
        var shown = false;
        var trigger = $('.trigger', this);
        var info = $('.popup', this).css('opacity', 0);


        $([trigger.get(0), info.get(0)]).mouseover(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                // don't trigger the animation again
                return;
            } else {
                // reset position of info box
                beingShown = true;

                info.css({
                    top: 20,
                    left: 10,
                    display: 'block'
                }).animate({
                    top: '-=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function() {
                    beingShown = false;
                    shown = true;
                });
            }

            return false;
        }).mouseout(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                info.animate({
                    top: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    info.css('display', 'none');
                });

            }, hideDelay);

            return false;
        });
    });
});

Here is the HTML:

<div class="bubbleInfo">
    <div>
        <img src="coda-bubble_files/nav-download.png" class="trigger">
    </div>
    <div class="popup">Content goes here</div>
</div>

What I would like to do is, dynamically populate a list of items with classes like “tigger1”, “trigger2”, “trigger3”, etc. Also “popup1”, “popup2”, etc. to use the script for multiple items but I don’t know how to go about changing or modifying the script.

Can anyone help and suggest a solution or an alternative?

Thanks!

Answer 1

that function will apply to any element that has the bubbleInfo class, and remember elements can have multiple classes so

<div id=div1 class="bubbleInfo divs"></div>

<span id="span1" class="spans  "></span>

 <div class="popup bubbleInfo">Content goes here</div>

will both have the action applied