Using Jquery to Find an Element at a Particular Position

Using jQuery to find an element at a particular position?

You are looking for the .elementFromPoint() JavaScript/DOM method.

var elem = document.elementFromPoint(100, 100) // x, y

That returns a DOM node, which of course then can be wrapped into a jQuery object:

$(elem).remove(); // for instance

I'm not that aware about the cross-browser compatibility and I would like some guys who know better to edit this post or write a comment about it.

Reference: .elementFromPoint()

Example Link: http://www.jsfiddle.net/YjC6y/22/

Find elements by offset position with jQuery

Call document.elementFromPoint.

Jquery , get position().right of an element?

what about this

drag: function(event, ui) {
       if (ui.position.left >= 200 || ui.position.left <= -300) {
               ui.position.left = 0;
       }
},

http://jsfiddle.net/nk7wc/10/

$(function() {
     $(".headerimage").css('cursor', 's-resize');
     var y1 = $('.picturecontainer').height();
     var y2 = $('.headerimage').height();
     $(".headerimage").draggable({
          scroll: false,
          drag: function(event, ui) {
                if (ui.position.left >= 200 || ui.position.left <= -300) {
                      ui.position.left = 0;
                }
          },
          stop: function(event, ui) {
              //####
          }
     });
});

checking against negative value of position.left

Find the value in a particular position in a url using jQuery

The simplest method, assuming the path doesn't change, is to split the URL string by the / character then get the 6th item:

let url = 'https://XXXXX.com/message/message_media/image/230a9117-64d7-419e-b564-ecb1af3085a1';
let targetFolder = url.length >= 6 && url.split('/')[5];

console.log(targetFolder);

Javascript. Get node from a specific location

You can use the Javascript method .elementFromPoint() which returns a DOM element.

According to documentation,

this method returns the element from the document whose elementFromPoint method is being called which is the topmost element which lies under the given point. To get an element, specify the point via coordinates, in CSS pixels, relative to the upper-left-most point in the window or frame containing the document.

See this article for more information: Using jQuery to find an element at a particular position? and also this fiddle.

Jquery: find element position from top + element height to activate addClass

You can use offset from jQuery to get the position of an element from the top of the document.

So your line that has

if (windowpos >= (pos.top + 1000)) { ...

May look something like:

if (windowpos >= (div.offset().top)) { ...

Get an element by index in jQuery

$(...)[index]      // gives you the DOM element at index
$(...).get(index)  // gives you the DOM element at index
$(...).eq(index)   // gives you the jQuery object of element at index

DOM objects don't have css function, use the last...

$('ul li').eq(index).css({'background-color':'#343434'});

docs:

.get(index) Returns: Element

• Description: Retrieve the DOM elements matched by the jQuery object.
• See: https://api.jquery.com/get/

.eq(index) Returns: jQuery

• Description: Reduce the set of matched elements to the one at the specified index.
• See: https://api.jquery.com/eq/

jQuery get the location of an element relative to window

Initially, Grab the .offset position of the element and calculate its relative position with respect to window

Refer :

1. offset

2. scroll

3. scrollTop

You can give it a try at this fiddle

Following few lines of code explains how this can be solved

when .scroll event is performed, we calculate the relative position of the element with respect to window object

$(window).scroll(function () {
    console.log(eTop - $(window).scrollTop());
});

when scroll is performed in browser, we call the above event handler function

code snippet

---

function log(txt) {  $("#log").html("location : <b>" + txt + "</b> px")}
$(function() {  var eTop = $('#element').offset().top; //get the offset top of the element  log(eTop - $(window).scrollTop()); //position of the ele w.r.t window
  $(window).scroll(function() { //when window is scrolled    log(eTop - $(window).scrollTop());  });});

#element {  margin: 140px;  text-align: center;  padding: 5px;  width: 200px;  height: 200px;  border: 1px solid #0099f9;  border-radius: 3px;  background: #444;  color: #0099d9;  opacity: 0.6;}#log {  position: fixed;  top: 40px;  left: 40px;  color: #333;}#scroll {  position: fixed;  bottom: 10px;  right: 10px;  border: 1px solid #000;  border-radius: 2px;  padding: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="log"></div>
<div id="element">Hello  <hr>World</div><div id="scroll">Scroll Down</div>

How do I find the absolute position of an element using jQuery?

.offset() will return the offset position of an element as a simple object, eg:

var position = $(element).offset(); // position = { left: 42, top: 567 }

You can use this return value to position other elements at the same spot:

$(anotherElement).css(position)

JQuery find next element after Y coordinate?

This should about do it for you. Code is commented below.

$(window).on('scroll', function(){  // with '.my-class'  $('.my-class').removeClass('active')  // who's beginning Y position is greater than current Y position  .filter(function(){    return $(this).offset().top > $(window).scrollTop();  }).first()  // find the next div  .next()  // do stuff  .addClass('active');}).trigger('scroll');

body {background: #fff;}.my-class {  padding: 2em;  border: 1px solid #eee;  margin: 1em;  border-radius: 1em;}.my-class.active {  border-color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div><div class="my-class">Test</div>

---

Related Topics