CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Suhail Purkar
Suhail Purkar

Reputation: 104

Leave dot onclick on image

I would like to leave a dot on my grid image based on wherever I click. I've got the general concept down but unfortunately my dot keeps appearing slightly higher than where I click. How would I go about adjusting this?

https://jsfiddle.net/dr0emvkr/

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <style>
        #imageholder:hover {
            cursor: crosshair;
        }
    </style>

    <style>
        article,
        aside,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            display: block;
        }

        #imageholder div {
            display: none;
            background-color: black;
            position: absolute;
        }

        #imageholder {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

        #vertical {
            width: 2.5px;
            height: 100%;
        }

        #horizontal {
            width: 100%;
            height: 2.5px;
        }
    </style>
</head>

<body>

    <h1>Some Text</h1>
    <h2>Some other text</h2>
    <div id="imageholder">
        <div id="horizontal"></div>
        <div id="vertical"></div>
        <img src="http://i.imgur.com/dRUn4ip.png">
    </div>

    <script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


    </div>
    <script type="text/javascript">
        $('#imageholder img').on('click', null, [$('#horizontal'), $('#vertical')], function(e) {
            e.data[1].css('left', e.offsetX == undefined ? e.originalEvent.layerX : e.offsetX);
            e.data[0].css('top', e.offsetY == undefined ? e.originalEvent.layerY : e.offsetY);

            $('#imageholder').click(function(event) {
                var hor = event.offsetX + 4.15,
                    ver = event.offsetY + 4;

                $(".marker").remove();
                $("body").append(
                    $('<div class="marker" style="border-radius: 25px;"></div>').css({
                        position: 'absolute',
                        top: ver + 'px',
                        left: hor + 'px',
                        width: '10px',
                        height: '10px',
                        background: '#5b5e5f'

                    })
                );
            });

            e.data[0].show();
            e.data[1].show();

            $(document).ready(function() {
                $('#imageholder').mouseover(function() {
                    $(".marker").css("box-shadow", "0 0 0 3px rgba(0, 0, 0, 0.5)");
                });
                $('#imageholder').mouseout(function() {
                    $(".marker").css("box-shadow", "none");
                });
            });

        });
    </script>
</body>

</html>

Upvotes: 3

Views: 1420

Answers (2)

Michael Coker
Michael Coker

Reputation: 53674

You can append .marker to #imageholder instead. And use transform: translate() to put the vertical/horizontal/.marker lines in the dead center of where you clicked.

$('#imageholder img').on('click', null, [$('#horizontal'), $('#vertical')], function(e) {
  e.data[1].css('left', e.offsetX == undefined ? e.originalEvent.layerX : e.offsetX);
  e.data[0].css('top', e.offsetY == undefined ? e.originalEvent.layerY : e.offsetY);

  $('#imageholder').click(function(event) {
    var hor = event.offsetX,
      ver = event.offsetY;

    $(".marker").remove();
    $("#imageholder").append(
      $('<div class="marker" style="border-radius: 25px;"></div>').css({
        position: 'absolute',
        top: ver + 'px',
        left: hor + 'px',
        width: '10px',
        height: '10px',
        background: '#5b5e5f',
        display: 'block',
        transform: 'translate(-50%,-50%)'

      })
    );
  });

  e.data[0].show();
  e.data[1].show();

  $(document).ready(function() {
    $('#imageholder').mouseover(function() {
      $(".marker").css("box-shadow", "0 0 0 3px rgba(0, 0, 0, 0.5)");
    });
    $('#imageholder').mouseout(function() {
      $(".marker").css("box-shadow", "none");
    });
  });

});
#imageholder:hover {
  cursor: crosshair;
}

article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

#imageholder div {
  display: none;
  background-color: black;
  position: absolute;
}

#imageholder {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#vertical {
  width: 2.5px;
  height: 100%;
  transform: translateX(-50%)
}

#horizontal {
  width: 100%;
  height: 2.5px;
  transform: translateY(-50%)
}

* {
box-sizing:border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <h1>Some Text</h1>
  <h2>Some other text</h2>
  <div id="imageholder">
    <div id="horizontal"></div>
    <div id="vertical"></div>
    <img src="http://i.imgur.com/dRUn4ip.png">
  </div>

  <script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>

Upvotes: 2

user94559
user94559

Reputation: 60143

The issue is that you're using the x and y coordinates from within the grid but then positioning relative to the page.

The fix is to position relative to the grid by appending the marker to the imagegrid element instead.

I gave #horizontal and #vertical a common class so I could make the #imagegrid div style rules more specific.

Then I changed $('body').append to $('#imagegrid').append, and I ended up subtracting 8 pixels in both dimensions to center the dot.

Updated JavaScript:

$("#imageholder").append(
  $('<div class="marker" style="border-radius: 25px;"></div>').css({
    position: 'absolute',
    top: ver - 8 + 'px',
    left: hor - 8 + 'px',
    width: '10px',
    height: '10px',
    background: '#5b5e5f'

  })
);

Full Fiddle (including the earlier mentioned HTML/CSS changes): https://jsfiddle.net/dr0emvkr/2/.

Upvotes: 4

Related Questions