I attach a mouseover event to a ul. Within the function I can use $(this) or this to refer to the ul.How can I refer to the li element over which the mouse is? And therefore make use of event delegation in jQuery.
View 8 Repliesi 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 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.
Is there a way to get the element under mouse?
View 1 Replies View Related1). Get the number of pixels from the left side of the hovered-element that the mouse cursor is located, and
2). Set *part* of a CSS attribute to this value
My design involves two "layers". On the first layer, I have a circle, with some links in the middle. This is just a div with a background image, and some text in the center. Then I have another circle, same size and shape, on top of the first one, covering it up. This circle just has a one or two word title on it. When a user hovers over the title with their mouse, I want that div to disappear, showing the links underneath it. When you mouse out, the circle with the title should show back up.
Here is the basic HTML:
[Code]...
So what happens, is if you mouse over, the circle fades away just fine. But if you move your mouse at all again, even the slightest bit, the event is triggered again. So the title fades in and then out again real quick. Even if you actually mouse completely out of the CircleTitle div, it still triggers one last time instead of just fading in.
Because mouseenter keeps track of the mouse being over that element, and then that div disappears, it's probably causing some problems. But I don't know any other way to get this to work! If someone has some ideas,
I would like to change cursor to pointer when mouse is over li element and it works until mouse gets over input or label element. I want to have pointer alse when mouse is over label or input in li elment.
View 3 Replies View RelatedI'm developing an image slider. I'd like to be able to trigger functions when the mouse leaves an area, sort of like
$('#someDiv').mouseout or $('#someDiv').mouseleave
except instead of passing the div to the function I have a dimension I'd like to pass to it.
I have box like so[code]...
I have calculated the dimensions from the left of the box to 25% of the width of the box to the right (or 100px from the left of the box) and also calculated the height of the box and top offset. I want to be able to say if the mouse leaves those dimensions, run a function.
Can I pass the dimensions and use mouseout or mouseleave? is this possible without using an HTML element?
function JGallery(){
this.name="defaultGallery";
this.images=[{//some JSON here}]
this.render=function(){
[Code].....
I've tried to debug it in firebug, but I guess there is a problem with the scope of the 'this'. The 'this' in
//i want append div with id of the name property of jgallery class
$("<div></div>").appendTo("#container").attr("id",this.name);
seems to refer to the iterator in the $.each().
I've tried to do this.this.name but it still doesn't work. Is there any way to allow me access the property of the Jgallery class?
I'm passing the id of a div as a parameter. I'm not sure how to refer to it with Jquery. The following does not work:
Code:
function updatemail(param1, param2) {
$("#param2").animate({ opacity: "show" }, 300);
}
I also tried $(param2) but it did not work.
I'm using getJSON to retrieve information from a header record and the corresponding detail records and display the detail records in a table. The PHP script that is called returns a JSON string (via json_encode) that looks like this:
{
"srn":"1",
"invNo":"1",
"custNo":"39750",
"purchOrd":"PO12345",
"shipVia":"our truck",
"jobNo":"E001-11",
"invDate":"8/3/2011",
"taxCode":"1000000",
"shpName":"testName", .....
Here is the html table:
<table><thead><tr>
<th colspan="2" >Item Description</th>
<th>Quantity</th>
<th>U/M</th>
<th>Item Price</th>
<th>Item Amount</th>
</tr></thead><tbody>
<tr class="p_row_1"> .....
And here is the $.getJSON:
$.getJSON("GET_INV_INFO.php",{srn:'<?php echo $srn; ?>'},function(s){
// Get Header Info
$('#ip_invNo').html(s.jobNo);
$('#ip_invDate').html(s.invDate);
$('#ip_custNo').html(s.custNo);
$('#ip_purchOrd').html(s.purchOrd);
$('#ip_custName').html(s.custName); .....
My problem comes in the getJSON section where I'm trying to populate the table with a record. I don't know how to refer to the different fields in array 's'. I've tried the following and many variations, but to no avail:
$('.p_row_'+i+':nth-child(1)').html(s.row.i.itemNo);
$('.p_row_'+i+':nth-child(1)').html(s.row[i].itemNo);
How do I refer to a nested field in a multidimensional array like this?
Here's something I'm working on: for a click on a given element, I want to be able capture the x/y coordinates of the mouse -- that is, the mouse coordinates relative to the top left corner of said
element.
So far, here's what I've got:
If a div is positioned block or relative, events fire over the entire area
of the div. If the div is positioned absolute they don't--they only fire
over the div's text or image child elements, if any. This isn't true in FF
or Opera, nor was it true in IE 5. If there is any logic in this behavior.
I have a web page that renders a table with about 300 rows in it, which means vertical scrolling. At the end of the page there's a hidden div element sitting. Each row in the table contains a button which needs to call a javascript which should position the hidden div right next to the clicked button. I've tried a lot of different approaches that I've found on google, but all of them only position the div around the top area of the page. If I scroll down a ways and click the button, I have to scroll back up to the top of the page to find the div.
The primary target is users using IE8, but of course, if there's a cross-browser solution for this problem, that would be super!
The following code nicely gets the element ID for the element under the mouse on the mouse down event. It ignores a disabled element though I am assuming there is some way to get this done!
// IE is retarded and doesn't pass the event object
if (e == null)
e = window.event;
[code].....
I'm trying to figure out a way to make only one element on a page receive key and mouse events. I have a grid in a <div>-container with "overflow:auto" which makes the grid scrollable. If course I can set event handlers to the "document" to catch key strokes and mouse clicks and execute navigation functions which make the grid scroll (e.g. pressing down arrow) etc. This of course effects the whole page and not just the div.
The problem is: as far as I know only window and form elements can receive events such as focus(), blur(), keypress() etc. and I have to make sure only this one element is affected.
Is there thus a way to make these events affect only the <div> container?
The best way to do this would be with an event listener as this would make development much easier.
Has someone done this before?
The following code nicely gets the element ID for the element under the mouse on the mouse down event.It ignores a disabled element though I am assuming there is some way to get this done![code]
View 10 Replies View RelatedWhen a user pushes their mouse down on a DOM element I want to allow them to move it, so I would like to setup an on mouse move function. The code i have is:
var newHeader = document.createElement("div");
newHeader.id = "header" + tabID;
newHeader.className = "windowHeader";[code].....
There are three variations of code below, the desired effect is to have the function fired when the mouse if held down on an element. The first two fire as soon as the page is loaded, and the third one never fires at all
[Code]...
How can I access the text of an url via javascript, ie. get 'foo' (and
send it as parameter in goto(), in example:
<a href="javascript:goto([foo])">foo</a>
Or refer to it globally?
document.links.href.text.value ?
this.href.text ?
I have to add a selection box in my assignment, but I don't know how to refer to it in the javascript.
Here is the javascript code I am trying to refer to the selection box with that doesn't work [code]...
How to solve the trouble? The element with id of "tmpContainer" is the div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript"></script>
</head>
[Code]...
How do you refer to an object such as a drop down <select> box before the <select> box appears in the code....
View 1 Replies View RelatedI have a TD element, with a SPAN element inside. I use td-s onmouseover and onmouseout events for a small animation. My problem is, that, when I move the cursor over the SPAN element, the onmouseout event for TD element is fired. I want to prevent this. With other words, I want onmouseout fired, just when the cursor is moved outside the td area. See the code..
[Code]...
I have a function that sets a value of this.name. If I call a function of that function (is there a better term for that?), I can get the value of that name with this.name. However, if I save that function's function as a variable, and THEN call it, this.name is undefined.
I don't think my vocabulary is clear enough, so here's my example:
function Ninja(name){
this._name = name;
this.getName = function(){
return "ninja "+this._name
}}
sam = new Ninja("sam");
assert( sam.getName() == "ninja sam", "Ninja's name is ninja sam" );
sam2 = new Ninja("sam2");
sam2getName = sam2.getName;
assert( sam2getName() == "ninja sam2", "Ninja 2's name is ninja sam2" ); //fails
log("Ninja 2's name is actually "+sam2getName()) // actually "ninja undefined"
(Note: Use of "ninja" and assertions are because I was playing with the code in John Resig's java runner thingie: [URL]). The reason I want to be able to refer to a function by a variable is because I want to pass the function to something else that requires a function to be passed in, such as an ajax callback or something. Anyway... why is this.name undefined in the second example?
I am trying to concatenate text to refer to a variable:
It give me undefined instead of 17. How should this be done without using eval() ?