jquery.slidingmessage.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. (function() {
  2. jQuery.showMessage = function(message, options){
  3. if (typeof(message) == 'undefined' || message == '') {
  4. return;
  5. }
  6. // defaults
  7. settings = jQuery.extend({
  8. id: 'sliding_message_box',
  9. position: 'bottom',
  10. size: '90',
  11. backgroundColor: 'rgb(143, 177, 240)',
  12. delay: 1500,
  13. speed: 500,
  14. fontSize: '30px'
  15. }, options);
  16. var elem = $('#' + settings.id);
  17. var delayed;
  18. // generate message div if it doesn't exist
  19. if(elem.length == 0){
  20. elem = $('<div></div>').attr('id', settings.id);
  21. elem.css({'z-index': '999',
  22. 'background-color': settings.backgroundColor,
  23. 'text-align': 'center',
  24. 'position': 'absolute',
  25. 'position': 'fixed',
  26. 'left': '0',
  27. 'width': '100%',
  28. 'line-height': settings.size + 'px',
  29. 'height': setting.size + 'px',
  30. 'font-size': settings.fontSize
  31. });
  32. $('body').append(elem);
  33. }
  34. elem.html(message);
  35. if(settings.position == 'bottom'){
  36. elem.css('bottom', '-' + settings.size + 'px');
  37. elem.animate({bottom:'0'}, settings.speed);
  38. delayed = '$("#' + settings.id + '").animate({bottom:"-' + settings.size + 'px"}, ' + settings.speed + ');';
  39. setTimeout(delayed, settings.delay);
  40. }
  41. else if(settings.position == 'top'){
  42. elem.css('top', '-' + settings.size + 'px');
  43. elem.animate({top:'0'}, settings.speed);
  44. delayed = '$("#' + settings.id + '").animate({top:"-' + settings.size + 'px"}, ' + settings.speed + ');';
  45. setTimeout(delayed, settings.delay);
  46. }
  47. }
  48. })(jQuery);