Is there a way to drag bookmarks on a line and have the text above them change to show the percentage from the right edge? Here is a quick snippet that achieves this, along with a demonstration in this fiddle.
Check out the code below:
HTML
<div id='wrapper'>
<div id="container"></div>
</div>
CSS
#wrapper {
width:500px;
height:100px;
margin:40px 0px;
border:1px solid white;
}
#container {
background: green;
width: 500px;
height: 20px;
position: relative;
margin-top:40px;
}
#wrapper img {
position: absolute;
}
span{font-size:62.5%;}
JQuery
$(document).ready(function() {
$("#container").click(function(e) {
e.preventDefault();
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var z = x - 5;
var txt = $('<span></span>');
txt.css('top', '50px').css('left', z).css('position', 'absolute');
txt.text( (Math.round((x.toFixed(0) / 5) * 1) / 1) + "%");
txt.appendTo('#wrapper');
var img = $('<img>');
img.css('top', '65px').css('left', x).css('position', 'absolute').css('z-index', '999');
img.attr('src', 'http://www.appmalt.info/htmlplay/img/arrowup.png');
img.appendTo('#wrapper');
})
$('img').draggable();
});
I'm having trouble dragging the image in the fiddle. Can anyone help me figure it out?
Here's the fiddle link again.
.