OnClick And OnMouseover/onMouseout Working Together?
Apr 25, 2011
This is probably very simple but I really cant find the answer. I have a text box, and I am wanting the same mouseover and onclick functionality as Money Supermarket; [URL]... When I rollover the text box/table row then I want the area to display one colour and when I roll off then it goes back to normal. However, when I click on it I also want it to display the colour and remain that way until I click another element. How do I achieve this?
I'm working on a couple of pages that look like this: [URL] As the visitor mouses over the month name, the image to the right is supposed to change to show the cover of that month's magazine issue. The onmouseover/onmouseout code has been working fine for months, but I recently added a couple new JS elements to the page, and now when the visit stops hovering over Sep/Oct, the image doesn't change.
I'm thinking that the way to fix this is by converting this action to jQuery, which is loaded on the page anyway, but I'm struggling to get a concise expression of what I want to happen. That is, I can do it by brute force with dozens of lines of code, but there must be a better way.
How can I add an onMouseout event to this code? I have only used this script with the onClick enent. If there is a simpler way, please let me know that. Code:
I've been implementing a drop menu in javascript, and I'm finding it difficult to understand why the event bubbling system is implemented as it is. In summary, I want an event to occur when the mouse enters/exits a large div or table that contains many descendent elements.
It appears to me, from experimenting with IE6 and Moz 5, that the event is generated *only* on the lowest element, thus given a table which contains tbody, tr and tds, with an onmouseover listener assigned to the table element (as a property), the onmouseover event is generated only for the td, although the mouse actually entered all these elements.
If there is a slight gap between elements you sometimes get events for the higher element. I guess this is a side-effect of the browser's implementation - sampling the mouse position.
My understanding of event bubbling from "JavaScript the definitive guide" is that events should bubble up the heirarchy unless they are stopped by the stopPropagation() method.
I am trying to build my first interface using jQuery. I will have some icons on the page. When user hovers the mouse on an image, it should display a list of menu options (some more icons). Like:
I have a menu with a div displaying onmouseover, and hiding onmouseout, it works great except in IE if I click on the <select> tag, it triggers the mouseout event, interestingly enough the same does not happen when I click on a text field..
Code Example:
This is obviously not the real code, it's just to give you an idea, I don't think I can post the real code, cuz it's really long and complicated...
I'm using the prototype framework, and I'd like to keep it that way if possible...
how to have the onmouseout only revert an image, if the user hasn't clicked on the image. If that image has been chosen from a dropdown, then even with the rollover effects, I want the clicked choice to remain until another click. Right now, i have:
<a href="javascript:passit2('orange')" onMouseover="change1('pic11','image48')" onClick=" change1('pic11','image48'); add_content2('orange');" onMouseout="change1('pic11','image_off');">opposite</a></li> <script> function change1(picName,imgName) { if (document.images) [Code]...
Does anyone know why the onmouseout isn't working in the following? I've just started the script (tho I'm sure I've spent over 40hrs on this problem alone) and am trying to get just 2 buttons working before I add the other 4. I'm absolutely mystified by the sticky onmouseout.
I've combined a couple of scripts that I've found in the newsgroup to accomodate the mouseovers and "active" button action. Only 1 button can be active at a time. Code:
I have a webpage with addition questions for numeracy training. I am storing the sums in a table(id="sums"), with an empty textbox(id=ans1) for the user to type the answer. After the user types an answer and moves onto the next Q, I want to activate a popup dispaying if the answer is correct or not. I am tackling this with onmouseout. The script checks the answer, then displays a confirm message if correct or and alert message if wrong. The onmouseout is not working
I'm using a simple script that moves a DIV from one location to another when the user mouses over it. The problem is, I want the user to have to click the div for it to move and then click it agin to move it back. I've been trying to find a simple solution without luck. Code:
I am just starting out trying to learn javascript and I am looking for a good forum to help me get through all the roadblocks I'm sure to hit.
Right now I'm going through a tutorial series at webmonkey. Here is the lesson I am currently working on:[URL]... At the bottom of the page they give you a homework assignment which is to re-create this page using html and javascript. This page has 2 row frames. I re-created these frames and the top frame initially has a page called "navigation" loaded and the bottom page initially has a page called "explorer" loaded. If you click the monkey image at the right in the "navigation" frame, it opens a new page called "brand" in the bottom frame. This "brand" page has the same monkey image as the "navigation" page but unlike the other monkey image, this one changes when you mouseover it. If you mouseover it again, it changes to another image, and a third mouseover brings you back to the original monkey image. If you click on one of the images, it swaps the monkey image in the "navigation" frame with that image. The idea is that you have 3 images to chose from in the "brand" page that you can designate as the logo in the "navigation" page. I have no problem re-creating this effect. Here is the code I used to re-create this:
In a web page I have a div tag that has a onlick event registered through the event listener. However, that same div tag also has a onmousedown - start a drag and drop script
The problem I am having is that once the drag and drop is complete, the mouse button is released and the onclick event is firing. I've tried returning false from the function dealing with the mouse up and cancelling the event with if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true;
First off, I know very little javascript. I was wondering how to make a button (an image acting as a link instead of text) impression when the user goes over it and when the user clicks it.
I started with an Image Gallery javascript (from Jeremy Keith) in order to have an onMouseover effect for a menu, at the client's request--they wanted small moused-over pics in the menu to prompt a larger version of the photo in another column. Works great. But the href in the code, when clicked, currently links to the larger img opening in a new window. I want to add an onClick so that the user is taken to another page.
Here's the JS: function showPic(whichpic) { if (document.getElementById) { document.getElementById('placeholder').src = whichpic.href; if (whichpic.title) { document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; } else { document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; }return false; } else { return true; }}
var previousToggle=null; function toggleMe(a){ var e=document.getElementById(a); if(!e)return true; if(e.style.display=="none"){ e.style.display="block"; if(previousToggle)previousToggle.style.display="none"; previousToggle=e; } return true; }
And here's the code: <a onMouseover="toggleMe('para1'); showPic(this); return false;" href="images/commercial_600.jpg" title="abcdefg"> <img src="images/pix_smaller3.jpg" style="float:left" width="70" height="70"></a>
thinking about implementing some accordion menus. Want to use the latest code. Is this modern code on this site [URL] also, anyone have a link to any modern code for onmouseover instead of onclick navigation through accordion menus?
I use mostly PHP with my office's website as it usually requires some interaction with the server. However, i would like to do something that does not,and figured JS should be able to take care of it.What i would like to do seems rather simple:I have a calendar. I would it to do one of two things:
1. Using onclick, when the user clicks on a date, i would like it to print something underneath the calendar. Similar to an error message that shows up on a login form if you type something wrong in a field using PHP (if(isset($whatever))).
2. Or using onMouseover, if the user hovers over a date that i have something special scheduled, i want a message to either pop up (alert()) or similar to #1, show up below the calendar.
While fiddling with it this afternoon i figured i was close, but i am missing something...
I'm using code below to run a function when the user move the mousepointer from within a DIV and outside it:The idea is that that mousepointer motion shall hide the DIV.
Code:
document.getElementById(theID).onmouseout = hideDiv; if (document.getElementById(theID).captureEvents) document.getElementById(theID).captureEvents(Event.MOUSEOUT);
It kind of works, but the problem is that if I move the mousepointer to fast out of the DIV then it will not trigger.The div in question has some elements within it, and originally it was allmost fully covered by those element... and then the onmouseout did not work that good....So I had to create some padding for the div to make it detect the onmouseout better... kind of work... but sometimes failes to trigger on the onmouseout.That padding also make the div not look that good ... so would like to get rid of all the padding as well, and make it work, if possible.I have tested this in the following browsers and get pretty much same behaviour in them all:IE8, Firefox (latest), Chrome (latest), Safari for win (latest beta)...
I'm having a problem with .attr(). I will explain it whith code.I have this HTML code:
<p id="textoMarca0" onmouseover="muestraDialog('textoMarca0');"> this is an example paragraph </p>
[code]....
So now the onmouseover has again its value [the original one, copied by doing an alert($("#"+elem+i).attr('onmouseover')) when i disable the onmouseover event], but it doesn't work
currently on our site we have and expanding <div> that responds to both the onmouseover and onmouseout events. It works wonderfully.
The UX people now would like the expanding <div> to open with the onclick event and then as soon as the mouse leaves the expanded div, it would close. I have tried using the onmouseout event in conjunction the onclick event but it does not work (the div persists).
I'm looking for a jQuery plugin, which could create a flyout of a container from left or right side of a page on some event (onClick or onMouseOver).
The example can be found at [URL] when the page loads some shopping ads slide from the left side of the browser screen (it's shown automatically only once, to see it again you need to delete this website cookies and reload the page - it would be great if the plugin had this cookie-based feature).
I've bene working on this for a while and the Wordpress people think it's a jQuery issue.So... here goes:I have the following function in a file called sec_menu.js:
var speedIn = 300; var speedOut = 300; jQuery(document).ready(function() {
