Menu
A user will be able to click on 3 points on an image, and i want to display a BLACK dot at those points. Then i will save these values in my database, and regenerate the image with those 3 points later on.
This is a 2 part question:
1.) In my code, i am not able to detect the onClick event when the image is clicked. Can someone look into this. Here's my code. JSFIDDLE
$(document).ready(function () {
$('body').click(function (ev) {
alert("d");
mouseX = ev.pageX;
mouseY = ev.pageY
alert(mouseX + ' ' + mouseY);
var color = '#000000';
var size = '1px';
$("body").append(
$('<div></div>')
.css('position', 'absolute')
.css('top', mouseY + 'px')
.css('left', mouseX + 'px')
.css('width', size)
.css('height', size)
.css('background-color', color));
});
});
HTML
<body background="http://www.craigjoneswildlifephotography.co.uk/blog/wp-content/uploads/2010/07/CMJ57311.jpg">
</body>
2.) Say that i have the X and Y coordinates of the points, and how can i regenerate the image with those points ?
401
Just use document instead of body (your body element has a calculated height of 0, but document is always the full size of the window):
http://jsfiddle.net/TrueBlueAussie/95vczfve/5/
$(document).ready(function () {
$(document).click(function (ev) {
mouseX = ev.pageX;
mouseY = ev.pageY
console.log(mouseX + ' ' + mouseY);
var color = '#000000';
var size = '1px';
$("body").append(
$('<div></div>')
.css('position', 'absolute')
.css('top', mouseY + 'px')
.css('left', mouseX + 'px')
.css('width', size)
.css('height', size)
.css('background-color', color));
});
});
As a side note: Your original JSFiddle is also a great example of why you should not connect delegated events to body instead of document. The body element can be styled out of existence (also document exists before the DOM is even loaded) :)
Or, as Brian provided, a reduced version http://jsfiddle.net/BrianDillingham/95vczfve/7/:
$(document).ready(function(){
$(document).click(function (ev) {
$("body").append(
$('<div></div>').css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '10px',
height: '10px',
background: '#000000'
})
);
});
});
And Brian's final update with limit of 3 dots: http://jsfiddle.net/BrianDillingham/95vczfve/8/
143
Your body has 0 height because it has 0 content.
Try adding this to your CSS:
html, body { height: 100%; margin: 0; }
Or try adding some content.
On a side tip, a lot of things about your jQuery can be made cleaner/easier:
$(document).ready(function(){
// here I asign the event dynamically, not needed for 'body' as such tag should always be present,
// but something you should look into
// see also: http://api.jquery.com/on/
$(document).on('click', 'body', function(e) {
mouseX = e.pageX;
mouseY = e.pageY
// simply press F12 to look at your browsers console and see the results
console.log('Mouse Position:\t' + mouseX + '|' + mouseY);
// no need in JS to write var for every variable declartion,
// just seperate with a comma
var color = '#000000',
size = '5px'; // changed size to 5px from 1 just to make it easier to see what's going on for you
// No need to use $("body") since this event takes place on the body tag
// $(this), in an event, always equals the selector the event is tied to
$(this).append(
// making an element with jquery is simple
// no need to insert whole tag, all you need is tag name and a closer
// like so
$('<div />')
// easily tie all css together
.css({
// also, in jquery CSS, any css variable with a '-'
// can be renamed when assigning
// simply remove the '-' and capitilize the first letter of the second word
// like so, here in 'background-color'
backgroundColor: color,
height: size,
left: mouseX + 'px',
position: 'absolute',
top: mouseY + 'px',
width: size
})
);
})
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
