...

View Full Version : Multiple bubbles with different locations



whereiputstuff
06-29-2010, 10:12 PM
Im trying to setup multiple instances of a popup bubble similar to Codas with different bubble positions due to their position on the page.

I have tried adding a second popup variable called popup2 to the code but it obviously didn't work or I wouldn't be posting here.

You can see the working portion of the code here: http://www.projectcoreconnect.com/phase2/

Below is the pieces i'm working with. Any help would be much appreciated.


<script type="text/javascript">
$(document).ready(function () {
$('div.state-info').bubble({
'trigger' : '.pushpin', // selector for the trigger element
'popup' : '.popup', // selector for the actual bubble (within div.bubble)
'distance' : 10, // distance in px it will travel
'hideDelay' : 100, // time before hiding
'effectTime' : 150, // total time for effect
});
});
</script>



(function ($) {
$.fn.bubble = function (options) {
var defaults = {
'trigger' : '.trigger',
'popup' : '.popup',
'distance' : 10,
'hideDelay' : 500,
'effectTime' : 250
};

var settings = $.extend({}, defaults, options);

return this.each(function () {
var hideDelayTimer = null;

var trigger = $(settings.trigger, this);
var popup = $(settings.popup, this);

$([trigger.get(0), popup.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);

if (popup.is(':animated, :visible')) {
return;
} else {
popup.css({
display: 'block',
top: -285,
left: -65
}).animate({
opacity: 1,
top: '-=' + settings.distance + 'px'
}, settings.effectTime);
}

}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);

hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
top: '-=' + settings.distance + 'px',
opacity: 0
}, settings.effectTime, 'swing', function () {
popup.css('display', 'none');
});
}, settings.hideDelay);
});
});
}
})(jQuery);



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum