CODEWITHSUNDEEP
javascriptjquery
Dvorak
Dvorak

Reputation: 169

Changing text with position change of mouse pointer?

I am trying to write a script which I want to put in my html website. What this script does is that it changes text with change in mouse cursor position. For eg. if user is on (x,y)=(1,1) then some text will be displayed while if on (x,y)=(2,2) some other random text will be displayed. 

var text = [ 'I am human.']

I am not sure about how to connect this to a mouse event. Like if pointer moves, display any random text from list of text. Can anyone provide the code? Will really help me. Thank You!

Upvotes: 0

Views: 3796

Answers (3)

nhydock
nhydock

Reputation: 2416

Since you're using JQuery, you can just use the mouse move function and if you want effects, you can use JQuery's animate.

Javascript:

$(document).mousemove(function(){
   var randText = text[Math.floor(Math.random()*text.length)];
   var div = $("#textDiv");
   div.stop().animate({"opacity": "0"}, 100, function(){
       $(this).html(randText);
       $(this).stop().animate({"opacity": "1.0"}, 100);
   });
});

HTML:

<div id="textDiv"></div>

Upvotes: 1

Manish Jangir
Manish Jangir

Reputation: 505

var text = [ 'I am human.'
            , 'Some text here.'
            , 'I love technology.'
            , 'You are a good person'
            ]
$(document).mousemove(function(event) {
   var randomItem = text[Math.floor(Math.random()*text.length)];
    alert(randomItem);
});

See at http://jsfiddle.net/2raaa/

Upvotes: 0

Dogbert
Dogbert

Reputation: 222288

Bind mousemove on window or something, then use the screenX / screenY / clientX / clientY / etc on the event object.

A simple demo:

var $message = $('#message');

$(window).on('mousemove', function(e) {
    if(e.clientX > e.clientY) {
        $message.text('top right triangle');
    } else {
        $message.text('bottom left triangle');
    }
});

HTML:

<div id="message">Move the mouse.</div>

http://jsfiddle.net/qjtnd/

Upvotes: 2

Related Questions