JS Tutorial
- Overview
- Documents
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.
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.
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.
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.
You can find jQuery.Ruler on GitHub at github.com/hilliuse/ruler.
jQuery.Ruler is dual licensed under the MIT & GPL licenses.
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.
Width in pixels of the vertial ruler. Set to 0 to disable the vertical ruler.
Height in pixels of the horizontal ruler. Set to 0 to disable the horizontal ruler.
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.
Enables an overlay box that indicates the cursor position within the rulers. Disabled on touchscreen devices due to lack of a.mousemove() event.
Usage
<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
Fonts
<script src="http://use.edgefonts.net/source-code-pro.js"></script>
<script src="http://use.edgefonts.net/source-sans-pro.js"></script>
Project Repository
Licensing
Options
$(function() {
$('body').ruler({
vRuleSize: 18,
hRuleSize: 18,
showCrosshair : false,
showMousePos: true
});
});
vRuleSize
hRuleSize
showCrosshair
showMousePos
