css - Can I dynamically add text next to the mouse cursor via javascript?

Right now I changed the cursor image if any ajax is in a process using this javascript code

$(function(){  
  $("html").bind("ajaxStart", function(){  
     $(this).addClass('busy');  
   }).bind("ajaxStop", function(){  
     $(this).removeClass('busy');  
   });  
});

and below css

    html.busy, html.busy * {  
        cursor: wait !important;  
    }

Now I want to add some text next to the cursor too. And remove it when the ajax finishes. How is that possible without using any jQuery plugin?

Right now I changed the cursor image if any ajax is in a process using this javascript code

$(function(){  
  $("html").bind("ajaxStart", function(){  
     $(this).addClass('busy');  
   }).bind("ajaxStop", function(){  
     $(this).removeClass('busy');  
   });  
});

and below css

    html.busy, html.busy * {  
        cursor: wait !important;  
    }

Now I want to add some text next to the cursor too. And remove it when the ajax finishes. How is that possible without using any jQuery plugin?

Share Improve this question edited Aug 14, 2012 at 2:17 asked Aug 14, 2012 at 2:10 Radek 11.1k56 gold badges169 silver badges270 bronze badges

5 "Is that possible?" - yes, because a piece of JS code to do that does not have to be a jQuery plugin. – Joseph Commented Aug 14, 2012 at 2:11
ok ok :-) , 'how' can it be done? – Radek Commented Aug 14, 2012 at 2:19

Add a ment |

3 Answers 3

Sorted by: Reset to default 6

Try this:

Demo with start / stop functions and changing text

http://jsfiddle/SY4mv/18/

See http://jsfiddle/PbAjt/show/:

CSS:

#cursorText{
    position:absolute;
    border:1px solid blue; /* You can remove it*/
}

JavaScript:

document.body.onmousemove=moveCursor;
var curTxt=document.createElement('div');
curTxt.id="cursorText";
curTxt.innerHTML="Hello!"; /* Or whatever you want */
document.body.appendChild(curTxt);
var curTxtLen=[curTxt.offsetWidth,curTxt.offsetHeight];
function moveCursor(e){
    if(!e){e=window.event;}
    curTxt.style.left=e.clientX-curTxtLen[0]+'px';
    curTxt.style.top=e.clientY-curTxtLen[1]+'px';
}

Depending on what you want you can change

curTxt.style.left=e.clientX-curTxtLen[0]+'px';

into

curTxt.style.left=e.clientX+'px';

and

curTxt.style.top=e.clientY-curTxtLen[1]+'px';

curTxt.style.top=e.clientY+'px';

CSS:

#tooltip {
    position: fixed;
    background-color: black;
    color: white;
    padding: 2px;
    opacity: 0;
    -webkit-border-radius: 3px;    
    border-radius: 3px;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

html.busy #tooltip { opacity: 1 }

html.busy, html.busy * {  
        cursor: wait !important;  
    }

HTML:

<div id="tooltip">Message</div>

JS:

$(function() {
    $("html").bind("ajaxStart", function() {
        $(this).addClass('busy');
        $(this).bind('mousemove', function(event) {
            $('#tooltip').css({
                top: event.pageY - $('#tooltip').height() - 5,
                left: event.pageX
            });
        });
    }).bind("ajaxStop", function() {
        $(this).removeClass('busy');
        $(this).unbind('mousemove');
    });
});

Event DOC: http://api.jquery./mousemove/

DEMO: http://jsfiddle/RGNCq/1/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

css - Can I dynamically add text next to the mouse cursor via javascript? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)