All geek questions in one place

JQuery: display img next to the line that was clicked

I am trying to create a bookmark function for my site, so when someone clicks “set bookmark”, they click on a line of text, it places a bookmark image to the left of this line. (I will save coor in a cookie, but I can do this without any help)

One of the ways that I thought about doing this was when a person clicked on a line of text in a paragraph, take it by the Y coordinate of the place that the person clicked on, and then round it to the nearest number divisible by 20 Height the line for each paragraph is 20 pixels, so if you round the Y coordinates down, you will get the top position for this separate line inside the paragraph that they clicked.

So, I think it will look like this: when someone clicks on a line of text in a paragraph, he will get the index of that paragraph, so if he is fourth P down, the index will be 3, then he will get the Y coordinates, in which the user clicked, then round this number to the nearest number divisible by 20, then place the image to the left of this paragraph, the top position of the image will be the rounded Y coordinate.

Can anyone help me with this? I'm kinda lost, as you can see:

$('p').click(function(e) {
    var myIndex = $(this).index()
    var myIndexTop = myIndex.top()
    var myIndexLeft = myIndex.left()

    var offset = $(this).offset();
    var y = e.pageY - this.offsetTop;

    $('.bookMarkImg')
        .left(myIndexLeft)
        .top('round down to nearest num thats divisible by 20)
OR?     
    $('.bookMarkImg')
        .css({'left': myIndexLeft, 'top' 'round down to nearest num thats divisible by 20'})
})
+3
source share
1 answer

To round to the nearest 20:

y = Math.floor(y / 20) * 20;

In addition, .top()it .left()does not exist: you need:

  • $(this).offset().topand $(this).offset().leftto get positions
  • .css({left: ..., top: ...}) to configure them

, , , , , , , <img> <body> ( ), , . y.

:

$('p').click(function (e) {
    var offset = $(this).offset();
    var top = Math.floor(e.pageY / 20) * 20;

    $('.bookMarkImg').css({
        left: offset.left,
        top: top
    }).show();
});

. : http://jsfiddle.net/upgBa/

. , //, , ( "" ).

+3

Source: https://habr.com/ru/post/1787256/

More articles:


All Articles