Like getting X and Y points on a Div?

Asked

Viewed 422 times

2

I’m trying to create the following picture Div

And I want to draw a line between each of them inserir a descrição da imagem aqui

I believe it’s taking the X and Y axis, how do I do it?

javascript jquery
  • 1

    You can play with Canvas.

  • The lower left point is (div3.pageX, div3.pageY + div3.height); the upper right is (div2.pageX + div2.width, div2.pageY).

  • 1

    It’s not quite what you want, but here is a CSS3 solution. Based in that reply soen

  • 1

    How about this, based on what Anthony put up, is what you want? http://jsfiddle.net/s4bNw/

  • Might be, but would it look better with div or take a look at canvas as @dxhj commented

  • The two solutions are acceptable, I believe.

Show 1 more comment

1 answer

3


I have prepared a more flexible solution for you, based on the comments and without the need for any Javascript.

HTML:

<div id="wrapper">
  <div id="elements">
    <div class="negate"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

CSS:

#elements {
  width: 420px;
  height: 220px;
  border: 2px solid black;
}

.element {
  width: 200px;
  height: 100px;
  margin: 5px;
  float: left;
  border: 2px solid black;
  box-sizing: border-box;
}

.negate {
  background: 
    linear-gradient(to top left,
      rgba(255, 0, 0, 0) 0%, 
      rgba(255, 0, 0, 0) calc(50% - 3px), 
      rgba(255, 0, 0, 1) 50%, 
      rgba(255, 0, 0, 0) calc(50% + 3px), 
      rgba(255, 0, 0, 0) 100%);
  width: inherit;
  height: inherit;
  position: absolute;
}

To play and test, I prepared this jsFiddle. For a closer look to that presented by you, see the update 1.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.