I want something like top and left ruler as we have in word that depicts mouse position on ruler, do we have anything in-build on jquery/is there any way to achieve this??

Any UI pro please respond for the same

I want something like top and left ruler as we have in word that depicts mouse position on ruler, do we have anything in-build on jquery/is there any way to achieve this??

Any UI pro please respond for the same

• javascript
• jquery
• html

3 Answers 3

Ignoring the creation of the ruler elements, say you had a little div inside each ruler that showed the position of the mouse on the relevant axis, with IDs of mouse-x-pos and mouse-y-pos, respectively, you could do:

$(document).ready(function() {
    $('body').mousemove(function(event) {
        $('#mouse-x-pos').css('left', event.pageX + 'px');
        $('#mouse-y-pos').css('top', event.pageY + 'px');
    });
});

I'll leave the CSS to you, the main thing is to use the mousemove function with jQuery.

Heres I plugin I wrote which doesn't require Jquery or anything else. https://github./MrFrankel/ruler

You can try jquery-ui.ruler. It is a jquery-ui plugin that creates a top and left ruler.

Features:

• units (px, mm, cm, in)
• rules in sub-div's
• ticks spacing/visibility is customizable
• mouse track

Example:

// simple initialization
$('.selector').ruler();

// or use different unit and tick values
$('.selector').ruler({
    unit: 'mm',
    tickMajor: 10,
    tickMinor: 5,
    tickMicro: 1,
    showLabel: true
});