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!
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