Placing A Dot On An Image - Onclick

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

Solution 1:

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.pageYconsole.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/

Solution 2:

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.

jsFiddle

---

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 resultsconsole.log('Mouse Position:\t' + mouseX + '|' + mouseY);
        //  no need in JS to write var for every variable declartion,//  just seperate with a commavar 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
                })
        );
    })
});

Solution 3:

Regarding part 2 of your question, my first thought is to include query params in the image URL, so that instead of http://www.example.com/thingies/someimage.jpg you get something like http://www.example.com/thingies/someimage.jpg?x0=10&y0=25&x1=30&y1=5. From there you would simply check if that string has query params with names matching what you're looking for (x0, y0, x1, etc...) and place points according to those.

Alternatively, you could also store the parameters in the URL for that web page, but that might lead to noisy URLs depending on what you're doing.

This depends on the server storing the coordinates, though.

My second thought is Local Storage, would store the points with the client, but that means that the points are not necessarily sent to the server, and are being read only from the client's browser. It also depends on the browser supporting that, and allowing that. Of course, since 3 coordinates is a rather small set of data, it could be stored in a browser cookie.