JQuery :: Mouse Hover Event On DIV Inside Another With Higher Z-Index
Oct 5, 2009
I have a div A that when I mouse hover creates and appends in run time another div B inside with an higher z-index. This new div B is a info div that I want to show within the limits of the div A. When I mouse out div A, the div B is removed. The problem is that when I mouse hover the B div, it runs the mouse out event of the div A, and cleans the div B, and I want to maintain it while the mouse is still on the boundaries of the div A! Is there a way to avoid the mouse out event of the div A when the mouse is on top of the div B? IS is necessary to calculate the coordinates of the mouse and check if it is in the boundaries of the div A? By the way, I am using live("mouseover",fn) and live("mouseout",fn) to handle the mouse hover events.
Let me explain what is going on. Inside of a div with the id = navContain, are a few images. These images are used as navigation links. These images have the class = imgPos. When you roll over one of these images, the css top property adds 92 pixels.
The image contains two different colored variations of the word "HOME." When the image is in its off state, the word home is white. When you roll over the image, jQuery animates it so that the white text of the word "HOME" slides down, and then a colored version of the word "HOME" slides down and takes its place. This is the same image, just its top property is being changed. jQuery does nothing more than change the top property.
The problem: Sometimes when you roll your mouse over it for the first time, it properly animates to the over state, but then gets stuck in that state even when you mouse off of it. Still in its over state, if you mouse over it again, the over state jumps up and down violently. It never goes back to the state where the text should be white - its original state.
I've tried the stop() function, as you can see in my code. Still, this problem persists and I can't seem to figure it out alone.
I 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..
When I use two divs one above the other using z-index then hover (using the mouse pointer) on the two divs quickly their z-index is lost and they appear one above the other ?! I face this problems in different ways when making JQuery on divs which are one above the other then move the mouse pointer above them quickly.
i tried using mouseout and mouse over in full calendar .But i am able to get mouseover but then after mouseout is not working . Try this code in firefox For any other necessary plugins visit : [URL]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head>
I am finishing up my website, right now I am using Flexcroll for the scrollbar in my main content window. Problem is, I want people to be able to use the mouse wheel to scroll that content window regardless of the mouse position.
My website is www. paulfenton .tk/wordpress if you want to see it.
I was wondering if anyone knew a way I can keep the mouse wheel focus on that internal div so I can scroll up and down at all times.
I'm trying to find the currently clicked index of .accordion_trigger from within another element.
When inside the .accordion_trigger click event I can simply do the below to get the current clicked index:
Code: $('.accordion_trigger').click(function(){ var index = $('.accordion_trigger').index(this); } return false; });
Obviously this doesn't work when called from within another element. I understand that 'this' is part of the problem but can't seem to find a way to form the code in such a way for it to produce a valid result. Thus far I only get -1 or 0.
When .accordion_trigger is clicked it has an "$(this).toggleClass('active').next().slideDown();" applied so in theory I shold be able to search for which of the .accordion_trigger's are "active".
I've also tried doing this via the below method but to no avail:
Code: var current = $('.accordion_trigger'); current.each(function() { if ($(this).hasClass('active')) {
I want to create a webpage that has a grid of 8 images displayed on the left side of the page. All the images are "dimmed" by default and when the user moves their mouse over an image, it lightens to its normal state. What I want to do is when they hover the mouse over an image, display a chunk of text in thearea to theright of the image grid. Essentially, the images act as a kind of menu and when the mouse hovers I want some details to be displayed. Ideally, I want to format the text to make it look good - so am not sure if it would be better to create an image containing my text and display this image when the mouse hovers.
I have problem about mouse hover in JQuery, the problem is that the main image not change when I move from additional image 1 to additional image 2. My site sample : [URL]. It work when I move to other additional with move mouse slowly.
This my code : $(document).ready(function(){ $('#thumbs a').hover( function() { var currentBigImage = $('#image img').attr('src'); var newBigImage = $(this).attr('href'); var currentThumbSrc = $(this).attr('rel'); switchImage(newBigImage, currentBigImage, currentThumbSrc); }, function() { var currentBigImage = $('#image img').attr('src'); var newBigImage = '[URL]'; var currentThumbSrc = $(this).attr('rel'); switchImage(newBigImage, currentThumbSrc, currentBigImage); } ); function switchImage(imageHref, currentBigImage, currentThumbSrc) { var theBigImage = $('#image'); if (imageHref != currentBigImage) { theBigImage.fadeOut(250, function(){ theBigImage.attr('src', imageHref).fadeIn(250); var newImageDesc = $("#thumbs a img[src='"+currentThumbSrc+"']").attr('alt'); }); } } });
I'd like to launch an effect only if the mouse pointer was on element more than xx ms.
Is there other solution, than something like : delaying the effect with 200 ms and running effect only if the element the mouse pointer is currently on, is the same as the element that has triggered the event
I created an html page and wrote javascript which uses jquery's hover() method. It converts a textfield into a span when mouse leaves the textfield and converts the span back to textfield when mouse enters the span. Also,I created a button, which when clicked executes a function that takes the val() of element with id='title' and shows it in an alert. I encountered two problems:
1. This works fine as long as the text field contains default text. But if I leave the textfield blank by default, the hover method can't detect the span and will not convert it to textfield. Is there some way I can create the textfield blank and yet make hover() work? 2. After I place mouse over the span and enters some value in the textfield, I move the mouse cursor onto the button and clicks it. At this moment, the span has a an id='title' and so $("#title").val() should get the entered text.
However ,the alert shows empty string of length=0. I tried this ,without moving the mouse cursor out of textfield and clicked the button using TAB-Enter.This time the alert shows the correct entered text. Why is this happening? Shouldn't the $("#title") be able to get the span element with id=title and .val() retrieve its text?
The html is <html xmlns="[URL]" xml:lang="en" lang="en"> <head> ... <script type="text/javascript" src="../includes/jquery-1.4.2.js" </script> <script type="text/javascript" src= "../includes/sample.js" </script> .....
I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code I created is the following it's not working for some reason.
I would like to display a div on a different z-index, when user click and hold the mouse.
1. how can i do that ?
this step should be the base, for my next question. while holding button clicked and moving mouse, i would like to move also (with the same amount of pixels) the div (previously mentioned)
2. how can i detect how many pixel (and in which directions / axes) the mouse moved ?
Would like to say right away that I'm a massive newbie on this and the project below is something I'm creating for others but also to help me learn at the same time. First of all I have my Index file. This contains 3 divs (MainDiv TopDiv and BottomDiv) in which I load iframes onto using innerhtml using this code.
function loadPageX(pageAddress,containerID { var el=document.getElementById(containerID) el.innerHTML="<iframe src="" + pageAddress + ""height="100%" frameborder="0" width="100%" ALLOWTRANSPARENCY="true"></iframe>"
How do i make it so that when there is an event insidean iframe on the page, it affects and can call a function from the outerpage? (that houses the iframe
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.
I'm using the following code to fade my thumbnails on mouseover, and it works, but if you run your mouse back and forth several times, they will keep fading on and off and on and off and so on until they catch up with however many times you swiped your mouse pointer over them. It can get ridiculous. Does anybody know a way to make it not do that?
The website is [URL]. When you bring your mouse on "Home" at the menu on top, the appearing menu is not visible behind the amazon widget there. This works fine in FF but as for IE, there is the problem.
I have a text (sentence) in a textbox. How do I select a word under the mouse pointer/cursor? That textarea may not have focus in it. My plan is to find the index of the cursor position on the textarea. then go left and right from that index. Stop on getting space on both side. Find both the indexes and select that range. But I am not able to do it. I am stuck in the first step.
1- I want the audio files to play on the same page where the images are, without opening a new page. 2- I don't want the users to be asked to accept any kind of plugins (such as Windows Media Player). Which means everything needed to run the script should already exist on that page. 3- I want it to be played on the 3 major browsers (IE, Firefox, Chrome)
Is this possible? I'm not good at Javascript, but I will understand to do my best to understand your instructions. I spent a long time looking online, but most of what I found is only compatible in one browser or the other.