Return to Snippet

Revision: 54785
at January 12, 2012 00:32 by RobertHegeraad


Updated Code
<script type="text/javascript">
(function($) {
  
  $.fn.cursorMessage = function(options) {

    //Gives the users the abilty to overwrite a value for one of the options
    options = $.extend({
        text : 'Loading',
        textcolor   : '#333333',
        background   : '#f9f9f9',
        top : '',
        left : '',
        remove : false
    }, options);

    return this.each(function() {
         //Create the message and add some CSS to it
         $('<div id="cursormessage"></div>').css({
             color : options.textcolor,
             backgroundColor : options.background
         }).text(options.text).appendTo('body');

         var message = $('#cursormessage');

         //make the message stick to the cursor 
         $(window).mousemove(function(e) {
              message.css({
                  display : 'block',
                  top : e.pageY-5,
                  left : e.pageX+15
              });
         });

    });

  };

}(jQuery));
</script>

//Call the plugin like so

<script type="text/javascript">
$(window).click(function() {
  $('body').cursorMessage({
      text : 'Loading this...'
  });
  
  //execute your own jquery function

  //and delete the message afterwards
  $('#cursormessage').remove();
});
</script>

Revision: 54784
at January 12, 2012 00:27 by RobertHegeraad


Initial Code
<script type="text/javascript">
(function($) {
  
  $.fn.cursorMessage = function(options) {

    //Gives the users the abilty to overwrite a value for one of the options
    options = $.extend({
        text : 'Loading',
        textcolor   : '#333333',
        background   : '#f9f9f9',
        top : '',
        left : '',
        remove : false
    }, options);

    return this.each(function() {
         //Create the message and add some CSS to it
         $('<div id="cursormessage"></div>').css({
             color : options.textcolor,
             backgroundColor : options.background
         }).text(options.text).appendTo('body');

         var message = $('#cursormessage');

         $(window).mousemove(function(e) {
              message.css({
                  display : 'block',
                  top : e.pageY-5,
                  left : e.pageX+15
              });
         });

    });

  };

}(jQuery));
</script>

//Call the plugin like so

<script type="text/javascript">
$(window).click(function() {
  $('body').cursorMessage({
      text : 'tookar'
  });
  
  //execute your own jquery function

  $('#cursormessage').remove();
});
</script>

Initial URL


Initial Description
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.

Initial Title
Custom Cursor Message

Initial Tags
plugin

Initial Language
jQuery