Last active
October 10, 2015 19:07
-
-
Save al3xandr3/3736933 to your computer and use it in GitHub Desktop.
Javascript Growl Type Alerts
This file contains 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
// used here: https://gist.github.com/3665292 | |
// loadJS('https://raw.github.com/gist/3736933/jgrowl.js', function(){ createGrowl("title", "content", false); }); | |
// Loads javascript | |
// note that callback function needs be before calling loadJS(or inline) | |
// loadJS("http://code.jquery.com/jquery-latest.js", function() { $('my_element').hide(); }); | |
var loadJS = function (url, callback) { | |
var head = document.getElementsByTagName("head")[0]; | |
var script = document.createElement("script"); | |
script.src = url; | |
// Attach handlers for all browsers | |
var done = false; | |
script.onload = script.onreadystatechange = function() { | |
if( !done && ( !this.readyState || | |
this.readyState == "loaded" || | |
this.readyState == "complete")) { | |
done = true; | |
// Continue your code | |
callback(); | |
// Handle memory leak in IE | |
script.onload = script.onreadystatechange = null; | |
head.removeChild( script ); | |
} | |
}; | |
head.appendChild(script); | |
} | |
// from http://jsfiddle.net/craga89/NYc4Q/ | |
// Assumes jQuery & jquery.qtip.js is loaded | |
// Usage: | |
// createGrowl("title", "text", false); | |
// Table CSS | |
var table_css = "table { width: auto; box-shadow: 0 0 4px #CCCCCC; border-collapse: collapse; border-spacing: 0; border-color:#CCCCCC; border-style:solid; border-width:1px; } th, td, caption { padding: 0px 10px 4px 5px; font-weight: 300; } ul { margin-bottom: 3em; } thead tr, thead th { background: none repeat scroll 0 0 #F0F0F0; } tbody tr:nth-child(2n) td, tbody tr.odd td { background: none repeat scroll 0 0 #F0F0F0; }"; | |
$("<style type='text/css'>" + table_css + "</style>").appendTo("head"); | |
// Qtip CSS Include | |
$('head').append('<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css" type="text/css" />'); | |
// Qtip jGrowl CSS | |
var qtip_css = ".jgrowl { font-size: 13px; max-width: 320px !important; width: 320px !important;}"; | |
$("<style type='text/css'>" + qtip_css + "</style>").appendTo("head"); | |
window.createGrowl = function(title, message, persistent) { | |
// Use the last visible jGrowl qtip as our positioning target | |
var target = $('.qtip.jgrowl:visible:last'); | |
// Create your jGrowl qTip... | |
$(document.body).qtip({ | |
// Any content config you want here really.... go wild! | |
content: { | |
text: message, | |
title: { | |
text: title, | |
button: true | |
} | |
}, | |
position: { | |
my: 'top right', | |
// Not really important... | |
at: (target.length ? 'bottom' : 'top') + ' right', | |
// If target is window use 'top right' instead of 'bottom right' | |
target: target.length ? target : $(window), | |
// Use our target declared above | |
adjust: { y: 5 }, | |
effect: function(api, newPos) { | |
// Animate as usual if the window element is the target | |
$(this).animate(newPos, { | |
duration: 200, | |
queue: false | |
}); | |
// Store the final animate position | |
api.cache.finalPos = newPos; | |
} | |
}, | |
show: { | |
event: false, | |
// Don't show it on a regular event | |
ready: true, | |
// Show it when ready (rendered) | |
effect: function() { | |
$(this).stop(0, 1).fadeIn(400); | |
}, | |
// Matches the hide effect | |
delay: 0, | |
// Needed to prevent positioning issues | |
// Custom option for use with the .get()/.set() API, awesome! | |
persistent: persistent | |
}, | |
hide: { | |
event: false, | |
// Don't hide it on a regular event | |
effect: function(api) { | |
// Do a regular fadeOut, but add some spice! | |
$(this).stop(0, 1).fadeOut(400).queue(function() { | |
// Destroy this tooltip after fading out | |
api.destroy(); | |
// Update positions | |
updateGrowls(); | |
}); | |
} | |
}, | |
style: { | |
classes: 'jgrowl ui-tooltip-light ui-tooltip-rounded', | |
// Some nice visual classes | |
tip: false // No tips for this one (optional ofcourse) | |
}, | |
events: { | |
render: function(event, api) { | |
// Trigger the timer (below) on render | |
timer.call(api.elements.tooltip, event); | |
} | |
} | |
}).removeData('qtip'); | |
}; | |
// Make it a window property see we can call it outside via updateGrowls() at any point | |
window.updateGrowls = function() { | |
// Loop over each jGrowl qTip | |
var each = $('.qtip.jgrowl'), | |
width = each.outerWidth(), | |
height = each.outerHeight(), | |
gap = each.eq(0).qtip('option', 'position.adjust.y'), | |
pos; | |
each.each(function(i) { | |
var api = $(this).data('qtip'); | |
// Set target to window for first or calculate manually for subsequent growls | |
api.options.position.target = !i ? $(window) : [ | |
pos.left + width, pos.top + (height * i) + Math.abs(gap * (i-1)) | |
]; | |
api.set('position.at', 'top right'); | |
// If this is the first element, store its finak animation position | |
// so we can calculate the position of subsequent growls above | |
if(!i) { pos = api.cache.finalPos; } | |
}); | |
}; | |
// Setup our timer function | |
function timer(event) { | |
var api = $(this).data('qtip'), | |
lifespan = 5000; // 5 second lifespan | |
// If persistent is set to true, don't do anything. | |
if (api.get('show.persistent') === true) { return; } | |
// Otherwise, start/clear the timer depending on event type | |
clearTimeout(api.timer); | |
if (event.type !== 'mouseover') { | |
api.timer = setTimeout(api.hide, lifespan); | |
} | |
} | |
// Utilise delegate so we don't have to rebind for every qTip! | |
$(document).delegate('.qtip.jgrowl', 'mouseover mouseout', timer); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment