Is there a way to determine which element is beneath a given element on a page? I have a tool that I would like to use over several elements which are visible only one at a time. I'd like to be able to determine which element is visible under that given element. Can this be done?
There is no way to reliably do this natively in JavaScript. CSS can effect the layout in ways that you can not predict.
I can think of one solution where you find all the elements on the page and their offsets and then try to work back from that, but that wont perform very well I suspect.
You can get the immediately following sibling (in a set of matched elements) with the jQuery .next() function:
http://api.jquery.com/next/
Depending on the use case I can think of several options.
One option would be triggering a click event onto the container and then selecting the event.target in the event handler. It should be the element on top.
like this:
http://jsfiddle.net/sm7gH/
My question was about finding the element closet to a point or an element. This plug-in does this:
jquery nearest.
Related
It is simply possible to find all truly visible and clickable elements in the page using the document.elementFromPoint function. However, it returns null for elements outside of the viewport.
So, how to find all clickable and visible elements in the full page? The visible elements are not just limited to the styles. Just consider a container <div> which is now hidden behind all children elements. So, the parent <div> is not longer visible.
So, do you have any idea how it is possible to find all really visible elements in the page? In the example above, obviously “Parent <div>” is not visible practically. There are some other unpredictable situations where those elements may not be visible and the styles (display,visibility, etc.) may not indicate it.
My final intention: I want to check if an element is really visible and clickable for the end-user or not. As an example use case I want to find all possible zones a user may click on.
I think you've misunderstand the basics behind events in domApi.
there will be bubbles and captures in any event happened at the client.
you must have seen code like this document.addEventListener('click',function(){},false),that means to use bubble instead of capture to handle event.
so actually clickable dom element is related with whether or not DOMJs uses bubble or capture
The link I want is always here first link of <tbody>. But maybe called something different.
If you could maybe explain what the code is doing that would be cool too. The simpler the code the better because I have to wrap it into an Applescript.
You could accomplish this with the following code based on your comments in your question and my answer.
document.querySelector('.odd').querySelector('a').click();
To provide a more permanent solution, more of the pages layout will need to be exposed.
What this does
document.querySelector and document.querySelectorAll queries the element nodes on the DOM. The first option will pull the first instance it finds for the search value, while the second will return all in a nodelist.
Running the click() function will simulate a click on that element you have queried for.
Knowing this, you can now take this example and potentially make a working script for yourself.
Let me know if this helps you out. Since you state the layout always stays the same, this should get you started.
This seems like an excellent situation to use find() since you'll always know the parent. Alternately adding a class to the anchor element would let you address it without crawling around the DOM.
$('.odd').find('a');
I have a testbed with four simple content DIVS which I would like to change the position of when each of them is clicked. Link below.
http://christopherwynne.com/tattoo/
I have performed similar functions with other sites in the past, and I feel like I am missing something fundamental. I am still new to Java, and have always had issues getting anything to work initially.
Any help with this issue would be greatly appreciated.
Your jQuery click handlers are not quite right. You're using:
$("galleryWrap")
but it should actually be
$("#galleryWrap")
to select the element by its id.
Once you've selected them properly you can do something like add a class which will attach the left margin of 205 you want.
Likewise you have a few other places where you're not selecting the elements properly. If you try selecting elements with these commands in the console you'll see jQuery can't find them.
An example: a command like $('div') selects all <div>s on the page, whereas if you wrote $('#div') you would select all elements with id="div".
I am creating a site that allows viewing and editing the contents of the 'src-div' contents within the 'edit-div.' I am not editing the src-div directly, because its thumbnailed using css zoom property.
I have considered using knockout.js to bind both elements to an observable. Currently, I have implemented the feature with jquery .html() function: simply set edit-div innerhtml to src-div innerhtml on 'select', and reverse the process after changes are made to edit-div to update the src-div.
I am wondering if I really need 2 divs here, or if there is some way to actually view the same element twice on a page, and any changes made will automatically reflect in both 'views,' elimiating the need to copy innerhtml property back and forth between two elements.
essentially, this is like a mirror effect, without the flip.
the closest thing I found so far is:
http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Reflections/Reflections.html
Any recommended practices for performing this task are appreciated.
(Almost) everything you see on a page has a counterpart in the DOM. Everything in the DOM gets exactly rendered one time (apart from pseudo-classes). And every node in the DOM can only have one parent (no exclusions).
Unfortunately you'll have to clone the specific node and add changes to both, as there is no copy & translate mechanism in the current CSS documentation.
If you're using jquery you can use one div and "clone" it. You can read this for more information.
http://api.jquery.com/clone/
If you set the class of the div to the same thing, you can have changes propagated to both. Then you can apply .addClass to the second div to apply a "reflected" affect (if that's your final goal).
I'm working on a project that approximates the functionality of Firebug's inspector tool. That is, when mousing over elements on the page, I'd like to highlight them (by changing their background color), and when they're clicked, I'd like to execute a function that builds a CSS selector that can be used to identify them.
However, I've been running into problems related to event bubbling, and have thoroughly confused myself. Rather than walk you down that path, it might make sense just to explain what I'm trying to do and ask for some help getting started. Here are some specs:
I'm only interested in elements that contain a text node (or any descendant elements with text nodes).
When the mouse enters such an element, change its background color.
When the mouse leaves that element, change its background color back to what it was originally.
When an element is clicked, execute a function that builds a CSS selector for that element.
I don't want a mouseover on an element's margin area to count as a mouseover for that element, but for the element beneath (I think that's default browser behavior anyway?).
I can handle the code that highlights/unhighlights, and builds the CSS selector. What I'm primarily having trouble with is efficiently binding event handlers to the elements that I want to be highlightable/clickable, and avoiding/stopping bubbling so that mousing over a (<p>) element doesn't also execute the handler function on the <body>, for example. I think the right way to do this is to bind event handlers to the document element, then somehow use bubbling to only execute the bound function on the topmost element, but I don't have any idea what that code looks like, and that's really where I could use help.
I'm using jQuery, and would like to rely on that as much as possible.
You can add an event listeners to document.body. The handler function can inspect the event to figure out which element was originally targeted. If you were using the Prototype library, you would use this:
http://prototypejs.org/api/event/element
I know you're using jQuery, but I'm sure it has equivalent functionality; I'm just not as familiar with it.
This is going to be fairly problematic, because you can't directly style the text nodes in your document. That means that if you've got something like this:
<div>
Hello world how are you
<ul>
<li>First of all, it is a lovely day outside</li>
<li>Second, it's important that you
<a href='http://somewhere.else'>click here</a>
</li>
</ul>
</div>
Well when you try to restyle the text block at the head of that <div>, you'll need to do it in such a way that the rest of the <div> doesn't also get a new background color. (At least, I think that's what you're asking for.)
There's a "highlight" plugin for jQuery that you might look at as a guide to how you can replace simple text nodes with <span> tags that have some given class. The plugin is intended to let you style words/phrases that you search for, but it's not terribly complicated and you might be able to adapt it. The plugin is here: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html