-2

Also please view the attached image for clarification. I have a div container what I want to to find a position somewhere in that div container using jquery or javascript or both. The attached image shows everything. Please help.

Update

The reason I want to find this position is that I want to animate container towards that point and eventually disappear. Secondly I would like to find position on the opposite side too so that I could animate container from that position.

Second update

In other words how can we find the point of intersection of two lines?

enter image description here

Om3ga
  • 30,465
  • 43
  • 141
  • 221
  • 2
    how about http://api.jquery.com/position/ – Zathrus Writer Sep 11 '12 at 11:50
  • And what do you want to do with that position? – Viktor S. Sep 11 '12 at 11:50
  • 1
    What do you mean "find a position"? As far as I know position is the combination of two parameters named "X" and "Y" and you can make any position you want by having those parameters. What do you wanna find? – Rikki Sep 11 '12 at 11:50
  • 1
    Is it to be located via the mouse x,y position? – Mr. Mr. Sep 11 '12 at 11:50
  • 1
    There isnt enough information in the question. Position relative to its parent from which it is offset or the whole document ? depending on that jquery position/offset can be used. – Alok Swain Sep 11 '12 at 11:51
  • The reason I want to find this position is that I want to animate container towards that point and eventually disappear. Secondly I would like to find position on the opposite side too so that I could animate container from that position. – Om3ga Sep 11 '12 at 11:52
  • 1
    How is the position specified? – Jørgen Sep 11 '12 at 11:54
  • 1
    How do you know that the position is exactly where you have put it in your drawing? Is it in percent in relation to the parent? Is it exact pixels? You need to explain what "this position" is supposed to be. – Jørgen Sep 11 '12 at 11:56
  • Well I am using percentage layout for this so it will be percentage. but I need this position in pixels but doesnt matter if it is also in percentage. – Om3ga Sep 11 '12 at 11:59
  • So you simply need to convert the value from percent to pixels? Is the height of the container fixed or do you need to find the pixel size of it? – Jørgen Sep 11 '12 at 12:00
  • Is there an object at the position? You need something to work out what the position is exactly (is it where the mouse is for example?) I'm afraid your question is a bit unclear to me. – Roger Walsh Sep 11 '12 at 11:51

4 Answers4

1

Given you need to find the intersection between two lines inside a div, your markup could look like this:

<div id="container" style="position:absolute; width: 100%; height: 200px;">
  <div style="width: 2px; height: 100%; left: 20%; position:absolute; background-color: red; top: 0;"></div>
  <div style="height: 2px; width: 100%; left: 0; position:absolute; background-color: blue; top: 25%;"></div>
</div>​

Using jQuery, you can find the coordinates for the intersection like this:

var x = $('#container div:first').position().left;
var y = $('#container div:last').position().top;
console.log(x,y);

x and y would be the coordinates in pixels relative to the container element.

http://jsfiddle.net/sAsmj/

Jørgen
  • 8,820
  • 9
  • 47
  • 67
  • I have only one container there is only p tags inside that. – Om3ga Sep 11 '12 at 12:31
  • This is just an example showing one way to solve your problem. How are you lines marked up? – Jørgen Sep 11 '12 at 12:33
  • its like take the width and height of the container. And I think these height and width needs some calculation to find this position. My mind gets block after this. – Om3ga Sep 11 '12 at 12:40
  • The height and width of the container can be whatever you want here, and the x,y will always be at the intersection. You find the height and width of the container by `$('#container').height()` and `$('#container').width();` – Jørgen Sep 11 '12 at 12:45
  • +1 This is a novel way of attempting to solve his problem, another (maybe possible) way is to specify the percentage from the left and from the right and from the top and the bottom percentages and get the x, y based upon the cross sections there for both sides of the div. – Mr. Mr. Sep 11 '12 at 14:00
0

I dont see the image, however if you are looking at getting the position, which is ideally caret position, you can use the jquery plugin http://plugins.jquery.com/project/jCaret

Chandra Sekhar Walajapet
  • 2,534
  • 17
  • 24
0

If you want the X, Y of the mouse you can read this question:

getting the X/Y coordinates of a mouse click on an image with jQuery

Here is an excerpt from the question which is based upon an img but you can change it for your container:

$(document).ready(function() {
  $('img').click(function(e) {
    var offset = $(this).offset();
    alert(e.clientX - offset.left);
    alert(e.clientY - offset.top);
  });
});
Community
  • 1
  • 1
Mr. Mr.
  • 4,257
  • 3
  • 27
  • 42
  • The reason I want to find this position is that I want to animate container towards that point and eventually disappear. Secondly I would like to find position on the opposite side too so that I could animate container from that position. – Om3ga Sep 11 '12 at 11:53
  • You have still yet not specified how the position is to be discovered. – Mr. Mr. Sep 11 '12 at 11:55
  • is the position supposed to be a percentage or is it an absolute value, specified some other way? – Mr. Mr. Sep 11 '12 at 11:59
0

You can find the poiter position by using this, try it

$(document).ready(function(){

    $("div#container").on("mousemove", function(e){
    var self = $(this);
    var dx = e.pageX;
    var dy = e.pageY;

    var x = dx - self.offset().left ;
    var y = dy - self.offset().top ;

    console.log(x);
    console.log(y);
    });
});
Yograj Gupta
  • 9,811
  • 3
  • 29
  • 48