Advanced Search

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.

Expand | Embed | Plain Text

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.