Custom Cursor Message


/ Published in: jQuery
Save to your folder(s)

With this plugin you can create a custom cursor message e.g. Call this plugin before your jquery function to show the user a message like 'Loading...' and then simply remove the message after the function is done loading. You can expand this easily by adding more options like: border-radius or even give it a background image.


Copy this code and paste it in your HTML
  1. <script type="text/javascript">
  2. (function($) {
  3.  
  4. $.fn.cursorMessage = function(options) {
  5.  
  6. //Gives the users the abilty to overwrite a value for one of the options
  7. options = $.extend({
  8. text : 'Loading',
  9. textcolor : '#333333',
  10. background : '#f9f9f9',
  11. top : '',
  12. left : '',
  13. remove : false
  14. }, options);
  15.  
  16. return this.each(function() {
  17. //Create the message and add some CSS to it
  18. $('<div id="cursormessage"></div>').css({
  19. color : options.textcolor,
  20. backgroundColor : options.background
  21. }).text(options.text).appendTo('body');
  22.  
  23. var message = $('#cursormessage');
  24.  
  25. //make the message stick to the cursor
  26. $(window).mousemove(function(e) {
  27. message.css({
  28. display : 'block',
  29. top : e.pageY-5,
  30. left : e.pageX+15
  31. });
  32. });
  33.  
  34. });
  35.  
  36. };
  37.  
  38. }(jQuery));
  39. </script>
  40.  
  41. //Call the plugin like so
  42.  
  43. <script type="text/javascript">
  44. $(window).click(function() {
  45. $('body').cursorMessage({
  46. text : 'Loading this...'
  47. });
  48.  
  49. //execute your own jquery function
  50.  
  51. //and delete the message afterwards
  52. $('#cursormessage').remove();
  53. });
  54. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.