jQuery.Ruler

Introduction

jQuery.Ruler is a jQuery plugin born out of sheer curiosity and on a whim. It dynamically places rulers on the x & y axes, with tick marks every 5 pixels & labels every 50 pixels. Should you wish, there are options to enable tracking of the cursor position with a crosshair and/or a box showing the coordinates within the ruler space.

Usage

Add jQuery & the Ruler plugin. jQuery.Ruler requires jQuery v1.8.0 or greater. At the time of writing jQuery v1.8.3 is the latest stable release. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.ruler.js"></script>

Script

$(function() {
  $('body').ruler();    
});

CSS

ruler.css

.ruler {
    background: rgba(255,255,255,1);
    color: #444;
    font-family: source code pro, "Arial Narrow", "Helvetica Neue", Helvetica, Arial, Veranda, sans-serif;
    font-size: 12px;
    line-height: 14px;
    overflow: hidden;
}
.ruler > div {
    background: #444;
}
.hRule {
    position: fixed;
    width: 100%;
    height: 18px;
    left: 0px;
    top: 0px;
    
    border-bottom: 1px solid;
    z-index: 9;
}
.vRule {
    position: absolute;
    
    min-height: 100%;
    width: 18px;
    left: 0px;
    top: 0px;
    
    border-right: 1px solid;
    z-index: 9;

}
.corner {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 18px;
    height: 18px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    z-index: 10;
}
.hRule .tickLabel {
    position: absolute;
    top: 0px;
    width: 1px;
    height: 100%;
    text-indent: 1px;
}
.hRule .tickMajor {
    position: absolute;
    bottom: 0px;
    width: 1px;
    height: 6px;
}
.hRule .tickMinor {
    position: absolute;
    bottom: 0px;
    width: 1px;
    height: 4px;
}
.vRule .tickLabel {
    position: absolute;
    right: 0px;
    height: 1px;
    width: 100%;
    text-indent: 1px;
}
.vRule .tickLabel span {
    display: block;
    position: absolute;
    
    top: 1px;
    right: 0px;
    margin-right: 18px;
    
    -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
    
    -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
    
}
.vRule .tickMajor {
    position: absolute;
    right: 0px;
    height: 1px;
    width: 6px;
}
.vRule .tickMinor {
    position: absolute;
    right: 0px;
    height: 1px;
    width: 4px;
}

.vMouse {
    display: block;
    position: fixed;
    width: 100%;
    height: 0px;
    
    left: 0;
    background: rgba(0,0,0,0);
    border-bottom: 1px dotted;
    z-index: 11;
}
.hMouse {
    display: block;
    position: fixed;
    height: 100%;
    width: 0px;
    top: 0;

    background: rgba(0,0,0,0);
    border-left: 1px dotted;
    z-index: 11;
}
.mousePosBox {
    height: 16px;
    background: rgba(0,0,0,0.25);
    color: #fff;
    font-family: source code pro;
    font-size: 12px;
    line-height: 16px;
    border: 1px solid rgba(0,0,0,0.5);
    position: fixed;
    left: -50%;
    top: -50%;
    padding: 0 2px;
}

Element Styling

To ensure that the element's size (width specifically) is not broken after the rulers have been inserted, you need to apply box-sizing: border-box;, appropriately prefixed, to the container element.

Fonts

Adobe Edge Web Fonts has "Source Code Pro" & "Source Sans Pro" which look awesome on the labels for the rulers. It's optional but you can add them like this. If you don't, ruler.css has a font stack that should prove adequate.

<script src="http://use.edgefonts.net/source-code-pro.js"></script>
<script src="http://use.edgefonts.net/source-sans-pro.js"></script>

Project Repository

You can find jQuery.Ruler on GitHub at github.com/hilliuse/ruler.

Licensing

jQuery.Ruler is dual licensed under the MIT & GPL licenses.

Options

Options are set with an object as an argument to the .ruler() function call. All options are optional; the plugin will use the default values.

$(function() {
  $('body').ruler({
    vRuleSize: 18,
    hRuleSize: 18,
    showCrosshair : false,
    showMousePos: true
  });    
});

vRuleSize

  • vRuleSize
  • integer
  • 18

Width in pixels of the vertial ruler. Set to 0 to disable the vertical ruler.

hRuleSize

  • hRuleSize
  • integer
  • 18

Height in pixels of the horizontal ruler. Set to 0 to disable the horizontal ruler.

showCrosshair

  • showCrosshair
  • boolean
  • false

Enables a dotted crosshair that spans the entire page and tracks the cursor position. Disabled on touchscreen devices due to lack of a .mousemove() event.

showMousePos

  • showMousePos
  • boolean
  • true

Enables an overlay box that indicates the cursor position within the rulers. Disabled on touchscreen devices due to lack of a .mousemove() event.

Fork me on GitHub