I need create a function that queries a link or an input text according to the x,y location using ementFromPoint(x,y).As as result I need to know:- Type.- URL.- Text.- Tittle.I have been trying to do this with elem.innerHTML however I get a lot of information and not what I need.
View 1 RepliesI recently had need for the method document.elementFromPoint() found in Internet Explorer (http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/elementfrompoint.asp).
My immediate method for implementing this was artificially creating an arbitrary mouse event (decided on mousemove) at the specified coordinates, setting up an event listener on the document, firing the event, record the target, and remove the listener.
However, I apparently didn't pay close enough attention to this (http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget-dispatchEvent):
The target of the event is the EventTarget on which dispatchEvent is called.
However, I had a hunch that Mozilla was merely redirecting the event to the document to be correct, and actually stored somewhere the "correct" target. After dumping the event object, I found a property which must have been recently introduced (Mozilla 1.4 branch apparently) called "explicitOriginalTarget" which is like originalTarget, but apparently never targets anonymous content, and in this case, also differs by referring to the element where the coordinates of the mouse event were.
Anyhoo, here's some code. I've tested it in various Mozilla 1.4 builds successfully (and double checked explicitOriginalTarget in < 1.4 builds to find that it doesn't exist). Firebird 0.6 is also based on 1.4, so it works in that too. By using the browser's box object and mouse events, instead of hacking my own, I don't think there should be any issues with it picking up elements that can't be seen.
// Program: document.elementFromPoint(int clientX, int clientY) in Gecko
// Author: Jason Karl Davis (www.jasonkarldavis.com)
// Date: 15 June 2003
// Purpose: Emulate Internet Explorer's document.elementFromPoint method as described here:
// http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/elementfrompoint.asp
// Requirements: A browser built off of the 1.4 branch of Mozilla (or better)
// Distribution: You may freely distribute and use this script as long as these comments remain intact
if (navigator.product == "Gecko") {
Document.prototype.elementFromPoint = function(x, y) {
this.addEventListener("mousemove", this.elementFromPoint__handler, false);
var event = this.createEvent("MouseEvents");
var box = this.getBoxObjectFor(this.documentElement);
var screenDelta = { x: box.screenX, y: box.screenY };
event.initMouseEvent("mousemove", true, false, this.defaultView, 0,
x + screenDelta.x, y + screenDelta.y, x, y,
false, false, false, false, 0, null);
this.dispatchEvent(event);
this.removeEventListener("mousemove", this.elementFromPoint__handler, false);
return this.elementFromPoint__target;
}
Document.prototype.elementFromPoint__handler = function (event) {
this.elementFromPoint__target = event.explicitOriginalTarget;
// reparent target if it is a text node to emulate IE's behavior
if (this.elementFromPoint__target.nodeType == Node.TEXT_NODE)
this.elementFromPoint__target = this.elementFromPoint__target.parentNode;
// change an HTML target to a BODY target to emulate IE's behavior (if we are in an HTML document)
if (this.elementFromPoint__target.nodeName.toUpperCase() == "HTML" && this.documentElement.nodeName.toUpperCase() == "HTML")
this.elementFromPoint__target = this.getElementsByTagName("BODY").item(0);
event.preventDefault();
event.stopPropagation();
}
Document.prototype.elementFromPoint__target = null;
}
And the reason I prototyped Document instead of adding it to document directly is that any extra documents you may have loaded on the same page inherit those methods. For example, an iframe or something. And it /should/ be usable in other, non-HTML documents as well, such as MathML, SVG, XUL, etc. :)
What is meant by "element"?
When mouse is moved over "element" at x,y, is that "element" the entire
image or something else?
My thought would be to simply retrieve the thumbnail name or other ID and
use that to identify which large image to show.
Any reasons why NOT to use this property?
i have a menu generated by a list with nested lists. i want the parent link to stay highlighted when the mouse hovers over the sub menus. because those sub menus are also generated by jquery (qtip), CSS alone won't do it (triedul.topnav li:hover a {background-color: #F00;}).is there a way to do this using jquery?
View 15 Replies View RelatedI'm having some problems understanding the append() function. What I'd like to do is select an element using it's ID and add a row to the table with a HTML form element. The table is dynamically generated using a Django template ( form.as_table() ) so I'm not able to alter the original HTML markup too much.
If I had a table like this...
I have created a form with malsup's Form Plugin wherein it submits on change of the inputs. I have set up my jQuery script to index drop down menus and visible inputs, and uses that index to determine whether keydown of tab should move focus to the next element or the first element, and likewise with shift+tab keydown. However, instead of moving focus to the first element from the last element on tab keydown like I would like it to, it moves focus to the second element. How can I change it to cycle focus to the actual first and last elements? Here is a live link to my form: [URL]. Here is my script:
$(document).ready(function() {
var options = {
target: '#c_main',
success: setFocus
[Code]....
i have got about 50 definition lists on one html-page witch all look linke this:
<dl>
<dt class="title">aaa</dt>
<dd class="subtitle">bbb</dd>
<dd class="city">ccc</dd>
<dd class="email">ddd</dd>
<dd class="website">eee</dd>
<dd class="description">fff</dd>
</dl>
if the dt-element in one of the definition lists has a specific css-property (e.g. length > 100px) then the dd-element with the css-class "subtitle" in the same definition list should be removed.
I'm doing a very simple expand/collapse function using 'slideToggle'. The button that triggers this event simply says 'Expand/collapse'. I want this text to change depending on whether an element is visible or hidden.
[Code]...
The bit of code in bold in the code below is giving me this error in IE: Error: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB)Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
[Code]....
If I generate a new element via AJAX, jQuery don't listen to events at this element. I read that live() how to use this function together with post().
That's what I have:
$(document).ready(function() {
$.post('products.php', $('#products_form').serialize(), function(returnData) {
$('.target').html(returnData);
});
[Code].....
Is this possible with JQuery? I have the following code which I think Should do this, but it's not working :/These are two different functions which I've been testing, and the html element is supposed to create a dropdown list via some PHP which will have the option "Other" within it. Unfortunately, I have no idea exactly how to turn "Other" into a text box when the user clicks, and I've been spending a lot of time on this already.
[Code]...
I`m trying to make selecting an select list option (as it become when we click on it)by clicking on a special pseudo element.I`m trying to do it in this way:
<script>
$(document).ready(function(){
$(".psevdo-checkbox").each(function(){
$(this).click(function(){
[Code].....
fadeout an element then insert someting in that same element then fading it in again all this without using setTimeouts.. i simply dont want to append, before the fadeout animation is done, i cant seem to achieve this unless i use setTimeout. im doing this atm but its often out of sync :/
[Code]...
I'm using the Microsoft Virtual Earth Version 1 Commercial Control.
I want to make it so you can click on a pinpoint that's plotted on the
map and all mouse events are passed to the map so that the user can
click anywhere on the map (including the pin points) and drag/zoom the
map around.
For those of you who haven't used Virtual Earth:
Basically, there are a bunch on absolutely positioned Div elements. I
basically want to pass all mouse events from one absolutely positioned
div element to the absolutely positioned div element directly beneath
it.
I would like to change all img tags with a certain class on the page as follows [code]...
I do not know how to "copy" the value of the img tag src attribute to the background url attribute of the div.
Below is HTML
<DIV class=info-box>
<DIV class=info-list>
<UL>
<LI>Author <SPAN></SPAN></LI>
[Code]....
I want hidecurrent LI element if SPAN doesnot contain anytext, Author doesnot having value so that will be hidden.
My DOM structure in HTML page have some elements 'IMG'. One of 'img' element have attribute 'src' = 'lolo1.jpg'. How can i find the 'DIV' element with this specific 'img' element inside? I have to find nearest 'DIV'.
[Code]...
I wanna write function like a GetNearestDivID('lolo2.jpg') which would give me result 'mix2'
I'm trying to unselect element or not allow select element to prevent this:
How can i do this? This only happens on FF, on IE8 its fine..
My html:
Let say I have this DOM:
<div id="foo">
<div class="bar"></div>
<div class="bar"></div>
[code]....
I made a website in which I -for the first time- included some jquery code. I am totally new at this. I managed to have a menu, whose elements can be clicked, which triggers the apparition of a different "bubbles" with text inside. So far so good. But I would like to make a bubble disappear when I click on another element than the one that triggered its apparition. Explanation :
My menu is for example like: menu element 1 | menu element 2 It should do this
>> click on menu element 1 = bubble1 (it works) >> click on menu element 1 = bubble 1 disappears (it works) OR >> click on menu element 2 = bubble 1 disappears, bubble2 appears (doesn't work! there I have 2 bubbles at the same time)
It is possible to make a script that hides the element clicked and this way hide the items I want.
View 1 Replies View RelatedAlright, this is going to sound strange, but bear with me here...
<input type="text" name="_F0827U" size="015" maxlength="015"> <input type="submit" class="cmdkey" name="_K040827" value="...">
Say I have multiple isntances that look similar to the above. However, I have no possible way of identifying them uniquely (because I don't know the name prior to generation).Is it posable,using JS, to snag the previous element and strip it of it's tags then rewrite a new element isntead of the two originals,say using an onClick() event on either of the elements?
I have a javascript here for adding my div element to my registration form,Adding the div element is easy, but it shows on the bottom of my form. I cant make it as the first child element of my form...This is my code
var _form = document.getElementById('registration_form');
var errorDiv = document.createElement('div');
errorDiv.setAttribute('class', 'confBox');
[code]....
the code i have works in ff, chrome, opera, safari. but not ie7.in the callback function i append to the dom and after it exists in the dom i attach an event to it. this works in other browsers but does nothing in ie.. what could be causing this?
Code JavaScript:
$.get('/ajax/itemqty.aspx', {'product':product}, function(data){
// this is just a snippet of code. in my project i loop through rows and insert links based
[code]....
hi everybody, didn't find this using the search :( this is my problem:
i create a dom element dynamically (<span>) and want to assign a class
attribute to it such that it has some css style, this works in ie, but
not in firefox :( here's the simple code:
<div id="somediv"></div>
var div = window.document.getElementById("somediv");
var span = window.document.createElement("span");
span.innerHTML = "span";
span.attributes.getNamedItem("class").nodeValue = "span_class";
div.appendChild(span);
so this works well in ie6, but firefox gives this error:
Error: span.attributes.getNamedItem("class") has no properties
if i run this code on a statically defined span (in the html file),
where a class attribute already is set:
<div id="somediv">
<span id="spanspan" class="">
</span>
</div>
changing the class to "span_class" works both in ie and firefox.
how can i fix my above code such that it works in both browsers? it
seems that on newly created dom elements the class attribute isn't even
there (to change it), how can i create it, and then change it?
catch an element and add another element in run-time using jQuery. The HTML looks like this -
<td class="fieldCell"><input class="inputbox" id="password" type="password"><span class="cbFieldIcons">lots of HTML codes</span>....
</td>
I want to add some more element in .... place. That is, just after the <span class="cbFieldIcons"> ends. note that there is actually no .... in actual code.
I personally wrote a code using jQuery, but some reason, it is not working in IE6 and IE7.