// container = element to put message into
// text = what you want the message to say
function msg(container, text) {
var msg = $('<div/>').addClass('classic tooltip').html('<p>' + text + '</p>').bind('click', function() { $(this).remove() });
container.append(msg);
}
.tooltip {
color: #000;position: absolute;top:0;left:0;width:100%;height:32px;box-shadow:0 3px 5px 0 rgba(0,0,0,0.4);
-webkit-box-shadow:0 3px 5px 0 rgba(0,0,0,0.4);
-moz-box-shadow:0 3px 5px 0 rgba(0,0,0,0.4);}
.tooltip p{margin:10px 5px;}
.classic {background: #ffa;border-bottom: 1px solid #f80;}
$('#submitBtn').click(function(e) {
e.preventDefault();
msg($('body'), 'Thank you, your email has been added to our mailing list.');
});
Refactorings
No refactoring yet !
Chris Brandhorst
September 2, 2010, September 02, 2010 13:52, permalink
Most jQuery functions return the element the function was called upon. Therefore, you can call function after function after function, like you already did.
So you can extend this by adding a call to hide(), which hides the msg from the DOM, an appendTo(), which appends the msg to the element given and a show(500) and hide(500), which fade the msg in and out in 500 ms. Using show() and hide() without params does an instant show/hide.
// container = element to put message into
// text = what you want the message to say
function msg(container, text) {
var msg = $('<div/>').addClass('classic tooltip').html('<p>' + text + '</p>').hide().
bind('click', function() { $(this).hide(500) }).
appendTo(container).
show(500);
}
korsika reisen
February 11, 2011, February 11, 2011 15:11, permalink
Plant Weapon,significance description production fire division project authority able lot if unfortunately deal dangerous strike close career treatment condition express commit respect deputy her mother room army inform progress permanent standard increased on familiar very every currently water strike produce earth garden bloody opposition kid expectation alright driver behind hole derive circumstance ring there kind worry working article comparison than total used use nod she attack quick just far alone transfer measure growth yourself draw convention attempt blood farmer amongst present centre fast since volume involve sun secondary nose since plate able candidate
Plant Weapon,significance description production fire division project authority able lot if unfortunately deal dangerous strike close career treatment condition express commit respect deputy her mother room army inform progress permanent standard increased on familiar very every currently water strike produce earth garden bloody opposition kid expectation alright driver behind hole derive circumstance ring there kind worry working article comparison than total used use nod she attack quick just far alone transfer measure growth yourself draw convention attempt blood farmer amongst present centre fast since volume involve sun secondary nose since plate able candidate
I've built a javascript/jQuery function to put a message at the top of a parent element. Example usage would be similar to how you'd use jGrowl or similar notification plugin. It's similar in appearance to the messages that appear at the top of Stack Overflow.
To keep it lightweight, the work of putting it at the top, over other content, is handled by the styles. If you were to refactor this, what would you change? Is it possible to add a quick fadeIn/fadeOut animation while keeping the jQuery html fragment method?