Growl stacking up from left to right - hover on/off function quirk?
Hi guys,
I've built a customized growler system for my site. Basically it provides users with additional contextual info depending on what they're doing on my site:
- // Enhanced flag for external links
$('a:not([href^="http://www.ldexterldesign.co.uk/"], [href^="mailto"])').hover(function () {
$('<span class="js-growler">Leave ldexterldesign.co.uk ?</span>').appendTo(this);
// IMPORTANT!: Get all growls and wrap them in .js-growlerWrap
// Allows us to fix the growls at the top of the screen and bunch float them side by side
$('.js-growler').wrapAll('<div class="js-growlerWrap" />');
}, function () {
$(this).find('.js-growler').fadeOut('fast', function () {
$('.js-growlerWrap').remove();
});
});
// Enhanced flag for new window/tab links
$('a[target^="_blank"]').hover(function () {
$('<span class="js-growler"> ↑ opens a new tab/window</span>').appendTo(this);
// IMPORTANT!: Get all growls and wrap them in .js-growlerWrap
// Allows us to fix the growls at the top of the screen and bunch float them side by side
$('.js-growler').wrapAll('<div class="js-growlerWrap" />');
}, function () {
$(this).find('.js-growler').fadeOut('fast', function () {
$('.js-growlerWrap').remove();
});
});
I've got it working to my liking except there's one thing I'd like to improve...
For example, if you repeatedly hover the 'Twitter' link in the footer (http://www.ldexterldesign.co.uk/) - on and off quickly - you get the growl stacking up from right to left. Is there anything I could do to avoid this happening?
NB These modular chunks of code allow me to throw in another growl notification as and when I require it. All I have to do is give a selector and event. They float (stack) up upon each other - avoiding positioning conflicts. I've simply used the .js-growlerWrap class to position them fixed at the top of the screen.
Thanks in advance for your help,