Jquery Mouse Tracker

Jquery Mouse Tracker

Jquery mouse tacker, as the name specifies, is the jquery plugin that lets you put a text at the tail of mouse and it will track the mouse wherever it goes.

Basic Demos

Before I go into the detail of plugin, have a look at the following quick demos:

• Sticky text tracker with string

  $.trackMouse("I am going to exhaust myself by tracking that little mouse.");

  
  

• Autohide text tracker with string

  $.trackMouse({
    text : "I am going to exhaust that little fella for a while.",
    autoHide : 2000
  });

  
  

• Sticky text tracker with array

  $.trackMouse([
    "Step 1 : Checkout the demo.",
    "Step 2 : Like it? Go through the readme for how-to instructions",
    "Step 3 : Star the repository, if you like it"
  ]);

  
  

• Autohide text tracker with array

  $.trackMouse({
    text: [
      "Step 1 : Checkout the demo.",
      "Step 2 : Like it? Go through the readme for how-to instructions",
      "Step 3 : Star the repository, if you like it"
    ],
    autoHide: 2000
  });

  
  

• Sticky text tracker with HTML

  $.trackMouse("Don't forget to <strong>star</strong> the <em>repository</em>.");

  
  

• Autohide text tracker with HTML

  $.trackMouse({
    text : "Don't forget to <strong>star</strong> the <em>repository</em>.",
    autoHide: 2000
  });

  
  

• Blinking tracker (Will work for array, html and simple string)

  $.trackMouse({
    text : "Don't forget to <strong>star</strong> the <em>repository</em>.",
    blink : 600 // In miliseconds
  });

  
  

• Blinking tracker with autohide (Will work for array, html and simple string)

  $.trackMouse({
    text : "Don't forget to <strong>star</strong> the <em>repository</em>.",
    blink : 800, // In miliseconds
    autoHide : 5000 // Destroy after 3 seconds
  });

  
  

• Tracker upon some specific target only
  (Click the above link to activate the tracker and it will only be visible upon the reddish area given below)

  $.trackMouse({
    text : "Woahhh! Is it blood? Go away. Don't force this little mouse over it!",
    target : '#showtracker'
  });

  
  

• Blinking tracker upon some specific target only
  (Click the above link to activate the tracker and it will only be visible upon the yellow area given below)

  $.trackMouse({
    text : "That mouse will go blind, how much light can it's little eyes handle. Put it away!!!!",
    target : '#showblinkingtracker',
    blink : 600
  });

  
  

To reset/remove any toast you can do the following:

var tracker = $.trackMouse("Track that little fella.");
tracker.reset(); // reset the tracker"

or alternatively, if you don't have the reference

$.trackMouse().reset();

Features

• You can easily put some text to the tail of the mouse that will follow it wherever it would go. This text can be in the form of:
  • String - Simple text that will attach it self to the tail of the mouse
  • An array - the content of it will make an unordered list
  • HTML - HTML will be rendered at the tale of the mouse
• You can make this the tracker blink and it will blink at the rate specified
• You can reset the tracker whenever you want
• You can reset the tracker whenever you want
• A target can be specified so that the tracker may appear over that target element only. Also, the blinking tracker may be used for this purpose.

Ideas to use it

You can use it however and wherever you want. Some possibilies, when using the tracker over whole page i.e. when target is not specified, are:

• That tracking text can act as a constant reminder to the user for something. For example let's say if there is some necessary action pending for the user, you can put this tracker to the mouse and it will keep reminding the user about that pending action
• In case of some step by step action, you can put the tracker at mouse demonstrating the details of each of the step
• After a user logs in, you can show a list of TODO items at the tail of mouse and hide it after some time.

Some possibilities, when target is specified are:

• Show tracker text upon any element, lets say an image, describing about that element.

For further details, please visit the repository and consider going through the readme. For your feedback and critqiue, please consider sending me an email at kamranahmed.se@gmail.com