Created
September 27, 2010 14:43
-
-
Save davejlong/599143 to your computer and use it in GitHub Desktop.
A simple jQuery script that will create a popup bubble that fixes the issue of disappearing when the mouse hovers over the bubble. Tested with jQuery 1.2.3 and 1.4.2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.popupBubble{ | |
position:relative; | |
display:inline; | |
} | |
.popupBubble .popup{ | |
position:absolute; | |
display:none; | |
border:1px solid #AAA; | |
background:#FFF; | |
padding:5px; | |
width:300px; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="popupBubble" rel="top-85"> | |
<img src="/assets/system-images/icons/comment_10.png" class="trigger" /> | |
<div class="popup"> | |
<p>Wildcards are acceptable when searching for products:</p> | |
<ul> | |
<li><strong>% - Any set of characters.</strong> (e.g. Product SKU's 123SKU, 234SKU, and 345SKU can call be found with %SKU)</li> | |
</ul> | |
</div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function(){ | |
$('.popupBubble').each(function(){ | |
// Options | |
var distance = 10; | |
var time = 100; | |
var hideDelay = 500; | |
var hideDelayTimer = null; | |
// Tracker | |
var beingShown = false; | |
var shown = false; | |
var trigger = $('.trigger', this); | |
var popup = $('.popup', this).css('opacity',0); | |
// Each popupBubble div contains a class that specifies the top distance for that element | |
var top = $(this).attr('rel').replace('top-',''); | |
top = '-' + top; | |
// Set the mouseover and mouseout on both element | |
$([trigger.get(0), popup.get(0)]).mouseover(function(){ | |
// Stops the hide event if we move from the trigger to the popup element | |
if(hideDelayTimer) clearTimeout(hideDelayTimer); | |
// don't trigger the animation again if we're being shown, or already visible | |
if(beingShown || shown) return; | |
else{ | |
beingShown = true; | |
console.log(top); | |
// reset position of popup box | |
popup.css({ | |
top:parseInt(top), | |
left:-20, | |
display:'block' // brings the popup back into view | |
}) | |
// (We're using chaining on the popup) now animate it's opacity and position | |
.animate({ | |
top: '-=' + distance + 'px', | |
opacity:1 | |
},time,'swing',function(){ | |
// once the animation is complete, set the tracker variables | |
beingShown = false; | |
shown = true; | |
}); | |
} | |
}).mouseout(function(){ | |
// reset the timer if we get fired again - avoids double animations | |
if(hideDelayTimer)clearTimeout(hideDelayTimer); | |
// Store the timer so that it can be cleared in the mouseover if required | |
hideDelayTimer = setTimeout(function(){ | |
hideDelayTimer = null; | |
popup.animate({ | |
top: '-=' + distance + 'px', | |
opacity: 0 | |
}, time, 'swing', function(){ | |
// once the animate is complete, set the tracker variables | |
shown = false; | |
// hide the popup entirelet after the effect (opacity alone doesn't do the job) | |
popup.css('display','none'); | |
}); | |
}, hideDelay); | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment