Revision: 54785
Updated Code
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
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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