Simulate incoming message notification
This ones kind of tough to explain..
I am trying to notify a user that a 'message' is being 'typed'. However
it's a preset message from a parameter within a function.
Seeing as how the message(s) is/are preset I am trying to proportionally
scale the 'incoming message animation' and message delay time based on the
length of the 'message' being passed in the function to simulate a user
typing on the other end (it wouldn't make sense for a 3 sentence message
to appear instantly and it wouldn't make sense for a 3 worded message to
appear after 30 seconds)
I've included a fiddle to better illustrate what I am aiming for... right
now it only checks if the message has a length of 24 characters; the 'else
if' is currently a place holder for what I am trying to achieve.
http://jsfiddle.net/ducFh/1/
jquery
function communicate(dialog) {
if (dialog.length === 24) {
messageIcon(3);
setTimeout(function() {
callExample(dialog);
}, 2500);
} else if (dialog.length > 24) {
alert('oops');
}
}
function messageIcon(time) {
$('#infoBox').append("<span class='icon'>...</span>");
for (i=0;i<time;i++) {
$('.icon').fadeIn('fast');
$('.icon').fadeOut('slow');
if (i === time) {
$('#infoBox .icon').remove();
}
}
}
function callExample(message) {
$('#infoBox').append("<span>example > "+message+"</span>");
}
communicate("this is only an example.");
No comments:
Post a Comment