Im trying to setup multiple instances of a popup bubble similar to Codas (http://www.panic.com/coda/ (Download Button)) 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 are the pieces i'm working with. Any help would be much appreciated.
Code:<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>Code:(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);


Reply With Quote
Bookmarks