JQuery Photoshop Type Ruler
1 post
Page 1 of 1
View it in action - http://codepen.io/mikethedj4/pen/dJbvc/
Available on Github - https://github.com/mikethedj4/jquery-ruler
Here's a screenshot of the ruler in action... HTML
CSS
Available on Github - https://github.com/mikethedj4/jquery-ruler
Here's a screenshot of the ruler in action... HTML
Code: Select all
I decided to learn how to do this without the need for a plugin. So enjoy!<div class='ruler'></div>
CSS
Code: Select all
JS/JQuery
body {
background: #aaa;
}
.ruler {
position: absolute;
top:0; left:0;
width: 100%; height: 25px;
background: #eee; color: #000;
font-family: arial;
font-size: 12px; line-height: 14px;
border-bottom: 1px solid;
overflow: hidden;
}
.ruler > div {
display: inline-block;
background: #000;
}
.ruler .tickLabel {
position:relative;
top: -10px;
margin-left: 4px;
width: 1px;
height: 100%;
text-indent: 1px;
line-height: 20px;
}
.ruler .tickLabel:first-of-type {
margin-left: 0px;
}
.ruler .tickMajor {
margin-top: 19px;
margin-left: 4px;
width: 1px;
height: 6px;
}
.ruler .tickMinor {
margin-left: 4px;
width: 1px;
height: 4px;
}
Code: Select all
$(window).on('load resize', function() {
$('.ruler').empty();
createRuler();
});
function createRuler() {
var $ruler = $('.ruler');
for (var i = 0, step = 0; i < $ruler.innerWidth() / 5; i++, step++) {
var $tick = $('<div>');
if (step == 0) {
$tick.addClass('tickLabel').html(i * 5) ;
} else if ([1, 3, 5, 7, 9].indexOf(step) > -1) {
$tick.addClass('tickMinor');
if (step == 9) {
step = -1;
}
} else {
$tick.addClass('tickMajor');
}
$ruler.append($tick);
}
}
You do not have the required permissions to view the files attached to this post.
1 post
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023