JavaScript - Onmouseover And Out Event Bubbling
have a small div above (hover) a big one.
I assign onmouseover and onmouseout events to the wrapper div. For image caption roll-over animation. The problem is when the mouse is above the caption itself, causing an unwanted result(probably event bubbling). And another problem: sometimes when you move mouse from outside to container you get a a triple debug sequence: (it should be just 2): -I am over- -I am out- -I am over- (firebug console) How to make it work? (no jquery) must work on all browsers. Demo: http://verror.netai.net/test.html The wanted result: When mouse moved over the image, only mouseover event should be raised once! When mouse moved out from the image, only the mouseout event should be raised. when mouse is over the captionm it should be treated as if the mouse is still on the image. (no flickering) Similar TutorialsI'm not really good with javascript but I seem to be able to understand it better since I was last on here. Anyway I got a script off of quirksmode and tried to add some stuff to it. I'm trying to pass an Id to the script so I don't have to copy and paste the script for each drop category. it works half the time or less. I changed the height of the div(sel) that contains span (links1). I think that the mouse out would trigger if I leave an an element inside of sel or sel it's self. it looks like this. links1 is out side of sel. if I leave links or sel mouse out should trigger. What am I doing wrong? ____________ | sel | ____________ | links1 | | | -------------- Code: function mouseEvent(id, e) { /* var element = document.getElementById(id)*/ if (!e) e = window.event; var tg = (window.event) ? e.srcElement : e.target; if (tg.nodeName != 'DIV') return; var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; while (reltg != tg && reltg.nodeName != 'BODY'){ reltg= reltg.parentNode if (reltg== tg) return; } // Mouseout took place when mouse actually left layer // Handle event /* element.style.display='block'*/ document.getElementById(id).className = 'close' } Code: <div class="sel" style="left:6%;" onclick="document.getElementById ('links1').className = 'pages'" onmouseout="mouseEvent('links1',event)"> <span class="hedderT" >Tutorials</span> <!--Page Name--> <img src="truenav.png" onclick="document.getElementById ('links1').className = 'pages'"/><!--page logo--> <span id="links1" class="close" > <!--link's span--> Here is a javascript/html code that changes a text phrase to something else on mouseover but it doesn't return to its original state before the event happened. The code is below. Thank you for your help. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script></script> <title>Javascript</title> <style type="text/css"> div { font-family: Georgia } </style> </head> <body> <script type="text/javascript"> function changetext() { var textchange2 = "~Home~" ; var id = document.getElementById("A"); id.innerHTML=textchange2; } </script> <div id="A" onmouseover="changetext();">Home</div> </body> </html> Hi all, At work I have written a form builder which is all drag and drop. The issue I have is with ending the drop, I have no problems in IE. The drag is controlled by the onmousemove and onmouseup events for the document body. The trouble is, in Firefox, if the cursor is over a form item, then the onmouseup event doesn't fire and therefore the drag doesn't end. There is no problem with other items, other HTML items, tables, list, divs, then all bubble the event to the body. Anyone ever come across this, if so how did you get round it. Do I need to manually make form elements bubble in Firefox? Maybe I should just stick a div opacity 0 over the drag objects and make that call the body's onmouseup event. Any thoughts much appreciated, Cheers, Dale Hi all, I am having trouble with an onmouseout event on a div tag. I have read about bubbling a little, and put to use some information I found on the internet, but I still can't overcome a few problems. What I am trying to achieve is that the addStyleDiv function will only call the addStyle function if the user mouses out of the 'rollover' div. As the code stands, the addStyleDiv function is called when any element within the div is moused out (this is expected--bubbling) and the addStyleDiv function handles these instances properly. However, when mousing out of the rollover div, the rollover div is never the source element that triggers the onmouseout event. There is no empty space in the rollover div, that is, it is entirely filled with elements, so that could be part of the problem, but shouldn't bubbling cause the event to be triggered twice-once for the internal element and once for the div itself? I would also be interested in knowing if the method by which I am handling the events is reliable on most browsers or if someone with more expertise can offer a suggestion to increase cross browser compatibility. Thanks a million in advance. HTML Code: <div id="rollover" onmouseout="addStyleDiv(event,'feat_main');"> <ul id="featured"> <li class="medical" onmouseover="addStyle('feat_medical');"><a href="equipment/medical">Medical</a></li> <li class="fabrication" onmouseover="addStyle('feat_fabrication');"><a href="services/metal_fabrication">Fabrication</a></li> <li class="capsnap" onmouseover="addStyle('feat_capsnap');"><a href="equipment/capsnap">CapSnap™</a></li> <li class="hurricane" onmouseover="addStyle('feat_hurricane');"><a href="equipment/parts_washing/hurricane">Hurricane</a></li> <li class="media" onmouseover="addStyle('feat_media');"><a href="video">Media</a></li> </ul> <div id="flyout" > <ul id="feat_main"> <h1>Midbrook</h1> standard page no rollover </ul> <ul id = feat_medical> <h1>Medical</h1> </ul> <ul id = feat_fabrication> <h1>Fabrication</h1> </ul> <ul id = feat_capsnap> <h1>CapSnap</h1> </ul> <ul id="feat_hurricane"> <h1>Hurricane</h1> </ul> <ul id = feat_media> <h1>Media</h1> </ul> </div> </div> JS Code: function addStyleDiv(e, x) { if (!e) var e = window.event; var tg=(window.event) ? e.srcelement : e.target; if (tg.id != 'rollover') { alert('leaving '+tg.tagName + ' '+tg.id); return; } /*These next two lines are NEVER reached no matter what*/ alert('It must have finally seen rollover'); addStyle('feat_main'); } function addStyle(x){ removeAllStyle(); document.getElementById(x).style.display="block"; } function removeAllStyle() { removeStyle('feat_main'); removeStyle('feat_hurricane'); removeStyle('feat_fabrication'); removeStyle('feat_capsnap'); removeStyle('feat_medical'); removeStyle('feat_media'); } Hi forum, I am trying to attach an event to a dynamically produced button, and then use stopPropagation and preventDefault. Code: function chapter12_nodeOne() { //create an element var element = document.createElement('input'); //set some attributes element.setAttribute('type', 'button'); element.setAttribute('value', 'submit'); element.setAttribute('id', 'myBtn'); //appendd the element into a DIV document.getElementById('myDiv').appendChild(element); //uses EventUtil to attach an event listener EventUtil.addHandler(element, 'click', function() { alert('event attached'); }); var flag = confirm('prevent default behavior of button?'); if (flag) { var el = document.getElementById('myBtn');/////////////////////////(1) var ev = el.onclick; } } var EventUtil = { addHandler: function(element, type, handler) { //check if the element and the browser support DOM Level 2 event attachment //if the user is not browsing with IE if (element.addEventListener) { element.addEventListener(type, handler, false); } //if user is browsing with IE else if (element.attachEvent) { element.attachEvent("on" + type, handler); } //if user is using a browser that only supports DOM Level 0 event attachment else { element["on" + type] = handler; } }, removeHandler: function(element, type, handler) { //check if the element and the browser support DOM Level 2 event attachment //if the user is not browsing with IE if (element.removeEventListener) { element.removeEventListener(type, handler, false); } //if user is browsing with IE else if (element.detachEvent) { element.detachEvent("on" + type, handler); } //if user is using a browser that only supports DOM Level 0 event attachment else { element["on" + type] = null; } } }; But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?! PS:the event is attached, when I click on the button I get an alert message is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event. for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked. thanks I have a ondrag event handler and in that I am trying to retrieve e.ClientX but it always return 0 in Mozilla. Works fine in IE though. How can retrieve the clientX and clientY in ondrag event? Alright I know about the problems IE has, but I'm testing out an id that is titled "slideRecord1" and trying to move it. The functions work with Firefox for the onmouseover and onmouseout attributes. But IE doesn't support that. So I'm trying to do it manually in the Javascript, but it's still not reading it. Any help? Code: /* <![CDATA[ */ document.getElementById('slideRecord1').onmouseover = function(){slideRecord(1);} function slideRecord(disc) { var record = "disc"+disc; var y = 20; document.getElementById(record).style.top = y + 'px'; } function unSlideRecord(disc) { record = "disc"+disc; var y = 0; document.getElementById(record).style.top = y + 'px'; } /* ]]> */ I have been googling this for two days and am coming to the conclusion that the answer is no. Am I correct?
Hi Guys im new to javascript but i have got this code so far to work Code: <script type="text/javascript"> function do_something(e) { document.getElementById('imgholder') .style.background="transparent url('images/img2.jpg') no-repeat"; } </script> and it works with this Code: <div id="flash"> <div id="imgholder"> </div> <div id="myController2"> <span class="jFlowControl2">No 1 </span> <span class="jFlowControl2">No 2 </span> </div> <div id="mySlides2"> <div> <a onmouseover="do_something(this)" class="vm" href="#" title="Vulnerability Management"></a> <a class="grc" href="#" title="grc"></a> <a class="pci" href="#" title="pci"></a> <a class="gcs" href="#" title="gcs"></a> <a class="pt" href="#" title="Penetration Testing"> </a> <span class="jFlowNext2 NextFlash"> </span> </div> <div> <span class="jFlowPrev2 BackFlash"> </span> </div> </div> </div> Currently the background changes on the 1st link hover. is it possible to have different images load on the hover of different a's? any help would be appricated Hi I have a script that runs fine in FF, Chrome But in IE it does not work at all...(mouse over/mouseout) Would you please help me fix the problem... here is the code: Code: <script type="text/javascript"> var c=0; var t; var timer_is_on=0; function timedCount() { document.getElementById('txt').value=c; c=c+1; t=setTimeout("timedCount()",1000); } window.onmouseout=doTimer; function doTimer() { if (!timer_is_on) { timer_is_on=1; timedCount(); } } function stopCount() { clearTimeout(t); timer_is_on=0; } function descriptionKeyUp() { if (timer === null) { startTimer(); } else { clearTimeout(timestop); } timestop = setTimeout(stopTimer, 6000); } </script> ----------------------- <form> <textarea name="taskdesc" id="taskdesc" cols="45" rows="5"onmouseover="stopCount()" onkeyup="descriptionKeyUp()"></textarea> <p>Time Spent on Other tasks: <input type="text" name ="txt" id="txt" /> </p> <p>Time Spent on Documenting: <input type="input" name="seconds" id="timer" /> </form> basically what it does is when user takes the mouse away from the form it counts the time...when user put the cursor in side the form...it stops counting...... Hi all, This is my first post, Self Learned new programmer here :o) Here's what I am having problem with: 1) OnMouseOver is working well on Chrome, but does not do anything on IE. What am I doing wrong? 2) I want to put sound on OnMouseOver. I tried using different examples, but no luck. Can you help me with the code? Here's the full code just in case: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0014)about:internet --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">td img {display: block;}</style> <!--Fireworks CS5 Dreamweaver CS5 target. Created Fri Nov 19 23:13:18 GMT-0500 (Eastern Standard Time) 2010--> <script language="JavaScript"> <!-- Hide from old browsers if (navigator.appVersion.indexOf("2.") != -1){ check = false; } if ((navigator.appVersion.indexOf("3.") != -1) && (navigator.appName.indexOf("Explorer") != -1)){ check = false; } else { check = true; } image1= new Image(); image1.src = "img/index_r8_c4.gif"; image1on = new Image(); image1on.src = "img/index_r8_c4_RED.gif"; image2= new Image(); image2.src = "img/index_r4_c14.gif"; image2on = new Image(); image2on.src = "img/index_r4_c14_RED.gif"; function imageon(name) { document[name].src = eval(name + "on.src"); } function imageoff(name) { document[name].src = eval(name + ".src"); } function on(name) { if (check == true){ imageon(name); } } function off(name) { if (check == true){ imageoff(name); } } // --> </script> </head> <body background="img/background.jpg"> <table border="0" cellpadding="0" cellspacing="0" width="1025" align="center"> <!-- fwtable fwsrc="main v1.png" fwpage="Page 1" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "154491994" fwnested="0" --> <tr> <td><a href="OurPastWork.htm" onmouseover="on('image1');" onmouseout="off('image1')"> <img name="image1" src="img/index_r8_c4.gif" width="279" height="45" border="0" id="index_r8_c4" alt="" /></a></td> <td><a href="OurExperience.htm" onmouseover="on('image2');" onmouseout="off('image2')"> <img name="image2" src="img/index_r4_c14.gif" width="186" height="50" border="0" id="index_r4_c14" alt="" /></a></td> </tr> </table> </body> </html> Thanks in advance Alright, I'm trying to get this website finished within the next 5 hours. I was designing it in such a way that I have some rollover buttons that take me to various parts of the site. Then, I have a gallery page, where I have a simple rollover galley. Adding the rollover gallery has stopped my buttons at the top from working. First, my .js file Code: function swap_image(name,source) { document.images[name].src=source; var argv=swap_image.arguments; if(argv[2] && argv[3] && document.getElementById) { element=document.getElementById(argv[2]); element.innerHTML=argv[3]; } } if (document.images) { image0 = new Image; image1 = new Image; image2 = new Image; image0.src = '/images/male_fem.jpg'; image1.src = '/images/moon_wmn.jpg'; image2.src = '/images/mobydick.jpg'; } else { image0 = ''; image1 = ''; image2 = ''; document.rollimg = ''; } var cap = ['Picture One', 'Second Picture', 'Three']; function rollover(n) { document.rollimg.src = window['image'+n].src; document.getElementById('caption').innerHTML = cap[n]; } Now a portion of my html.. Code: <a onmouseover="swap_image('gallery','/images/galleryro.jpg')" onmouseout="swap_image('gallery','/images/galleryhl.jpg')"> <img style = "top:150px; left:160px;" border="0" id="gallery" src="/images/galleryhl.jpg"/> </a> <a href="timeline.htm" onmouseover="swap_image('timeline','/images/timelinero.jpg')" onmouseout="swap_image('timeline','/images/timeline.jpg')"> <img style = "top:150px; left:175px;" border="0" id="timeline" src="/images/timeline.jpg"/> </a> <a href="biography.htm"onmouseover="swap_image('biography','/images/biographyro.jpg')" onmouseout="swap_image('biography','/images/biography.jpg')"> <img style = "top:150px; left:190px;" border="0" id="biography" src="/images/biography.jpg"/> </a> <a href="contact.htm" onmouseover="swap_image('contact','/images/contactro.jpg')" onmouseout="swap_image('contact','/images/contact.jpg')"> <img style = "top:150px; left:205px;" border="0" id="contact" src="/images/contact.jpg"/> </a> <div class = "lrgimg"> <p align = "center"> <img style = "top:150px" src="images/male_fem.jpg" width="auto" height="auto" border="0" alt="large" name="rollimg" /> </p> </div> <div class = "imgbar"> <p align = "center"><span onmouseover="document.rollimg.src=image0.src;"> <img style = "top:250px" src="images/male_fem_sm.jpg" width="32" height="32" border="0"alt="malefem"/> </span> <span onmouseover="document.rollimg.src=image1.src;"> <img style = "top:250px" src="images/moon_wmn_sm.jpg" width="32" height="32" border="0" alt="moonwmn"/></span> <span onmouseover="document.rollimg.src=image2.src;"> <img style = "top:250px" src="images/mobydick_sm.jpg" width="32" height="32" border="0" alt="mobydick"/></span> </p> </div> </div> Any help to quickly resolve the conflict, would be greatly appreciated. I don't have a lot of time. I have created a scroll script that, when you mouse over the page, the scrolling stops, and it resumes when you mouseout. For some reason, my script messes up slightly when you have <p>, <a>, <span>, and <div> tags inside the main div. On that page, even if you are moused over the page, it will still try to scroll a tiny bit. This is because it thinks you have moved your mouse out of the page. I have tried adding mouseover and mouseout events to these tags to remedy the problem, but that didn't work. Here's a link to an example with nothing but text, and it works fine: http://www.myfsjournal.com/scroll2.php Here's the same page, but with stuff inside of <p> and <a> tags. However, it doesn't work quite right. http://www.myfsjournal.com/scroll1.php You can view all the code on my page, but here's the relevant part: Code: var timerIsOn = 1; window.onload = function() { startScroll(); var marqueeDiv = document.getElementById("marqueeDiv") if(navigator.appName != "Microsoft Internet Explorer") { if(marqueeDiv != null) { marqueeDiv.addEventListener("mouseout",function () {resumeScroll();},false); marqueeDiv.addEventListener("mouseover",function () {stopScroll();},false); } } else { if(marqueeDiv != null) { marqueeDiv.attachEvent("onmouseout",function () {resumeScroll();},false); marqueeDiv.attachEvent("onmouseover",function () {stopScroll();},false); } } } function startScroll() { if(timerIsOn == 1) { //if we have scrolled to the bottom if(getScrollY() >= document.documentElement.scrollHeight - document.documentElement.clientHeight) { window.scroll(0,0); } window.scrollBy(0,1); // horizontal and vertical scroll increments scrolldelay = setTimeout('startScroll()',50); // scrolls every 100 milliseconds } } function stopScroll() { clearTimeout(scrolldelay); timerIsOn = 0; } function resumeScroll() { timerIsOn = 1; startScroll(); } function getScrollY() { var scrOfY = 0; if( typeof( window.pageYOffset ) == 'number' ) { //Netscape compliant scrOfY = window.pageYOffset; } else if( document.body && document.body.scrollTop ) { //DOM compliant scrOfY = document.body.scrollTop; } else if( document.documentElement && document.documentElement.scrollTop ) { //IE6 standards compliant mode scrOfY = document.documentElement.scrollTop; } return scrOfY; } hi ! i have a div which some how i make when mouseover it become cursor and link to other page i wants to, and it has also some text inside of it which is also linked to other page and when mouseover on text it change colors too, but the problem is if mouse come on div it will not change the color of text inside of div, so what i wants is it will change the color of text too when mouseover on the div, here is code i am using: Code: <-- THIS IS IN CSS file --> div.test{ position:relative; font-family:Arial; font-size: 12px; padding-left: 82px; padding-top: 47px; width: 162px; padding-bottom: 15px; cursor:pointer; cursor:hand; } div.test a{ color:#000; text-decoration: none; } div.test a:hover{ color:#4E6D00; text-decoration: none; } <-- THIS IS IN HTML file --> <div onClick="document.location='otherpage.html';" class="test"> <a href="otherpage.html">here is all content,This is content hyperlinked</a> </div> you notice i am using cursor in css so when mouseover it becomes hand, what i wants is when it will become hand the text inside of it will also change the color, for now it change only if i mouseover to that text, thanks for any quick help please I have a img tag but I also added <img src="panada.jpg" onmouseover="alert('$info')"> can you tell me what I'm doing wrong?
Hi I am new here and also to java Any help you can give me would be gratefuly appreciated as I feel I am being very dumb over what should be a simple fix. The following code is working accept for the part where the original image (Main Image) is replaced with either Image1/Image2 when mouse over occurs but wont revert back to its original image (MainImage) once onmouseout? There-in lies my problem: Code: <body> <tr> <!-- <td><table width="100%" bgcolor="#b0b0b0" border="0" cellpadding="10" cellspacing="1"> --> <tbody><tr> <td bgcolor="#ffffff"> <table width="86%" border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <script language="JavaScript" type="text/javascript"> function fda(pic){ document.getElementById("PicViewer").src=pic; } </script> </table> <div align="center"> <table border="0" cellPadding="0" width="950" height="650" style="border-collapse: collapse" bordercolor="#111111"> <tr> <td width="15" bgcolor="#111111" height="542" rowspan="3"> <p align="center"> </td> <td bgcolor="#405E76" height="650" colspan="9" background="http://www.mypersonalpage.talktalk.net/ebay/Webpage/polaroid.jpg" valign="top"> <p align="center"> <img src="http://i99.photobucket.com/albums/l290/big_poppa_duke/mainimg.png" class="biankuang2" id="PicViewer" border="0" width="640" height="480" vspace="55" hspace="0"></td> <td width="15" bgcolor="#111111" height="542" rowspan="3"> </td> </tr> <tr> <td width="15" bgcolor="#405E76" height="80"> </td> <td width="121" bgcolor="#405E76" align="center"> </td> <td width="145" bgcolor="#405E76" align="center"> </td> <td width="145" bgcolor="#405E76" align="center"> <img border="2" src="http://i99.photobucket.com/albums/l290/big_poppa_duke/img2.png"class="biankuang2" onmouseover="fda(this.src)" width="125" height="93" vspace="2"></td> <td bgcolor="#405E76" align="center" width="145"> </td> <td width="145" bgcolor="#405E76" align="center"> <img border="2" src="http://i99.photobucket.com/albums/l290/big_poppa_duke/img3.png"class="biankuang2" onmouseover="fda(this.src)" width="125" height="93" vspace="2"></td> <td width="145" bgcolor="#405E76" align="center"> </td> <td width="121" bgcolor="#405E76" align="center"> </td> <td width="14" bgcolor="#405E76"> </td> </tr> </table> P.s something I found strange when loading my page it seems to load twice with a defining click. Very annoying and wonder if it's possible to remove that bit too. Thank you very much for any help. I have a dropdown list working, but I want the dropdown list to be initiated when the mouse goes over the first link in the list. Once it is visible, I want it to remain visible so long as the mouse is over any of the links. Right now I have it working for being visible only when the mouse is over the first link, but it does not remain visible moving the mouse over the first link, down the drop down menu. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <style type="text/css"> div.ff { border:2px solid white; display:none; width:200px; background-color:red; margin-top:5px; } a { width: 200px; text-align:center; background-color:red; color:white; font-size:16px; display:block; } </style> <script type="text/javascript"> function ab(a) { document.getElementById(a).style.display="block"; document.getElementById(a).parentNode.onmouseover="ab(a)"; document.getElementById(a).parentNode.onmouseout="ab1(a)"; } function ab1(a) { document.getElementById(a).style.display="none"; } </script> </head> <body style="background-color:black;"> <div> <a href="kkjklj.com" onmouseover="ab('dg')" onmouseout="ab1('dg')">kjlj</a> <div id="dg" class="ff"> <a href="kjlj.com">lkjefee</a> <a href="ehfueh.com">fheufheuih</a> </div> </div> </body> </html> Hi, 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. I just can't get my head around it and would like to ask for some guidance...not the answer per say, just helping me get on the right path would be great! 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... Code: <td><a href="#" onclick="document.getElementById("27").innerHTML='President's Day'; return false;">27</a></td> But this seems to be pulling information from an element whose id = 27...which is not what i'd like.. Thanks in advance, Tsiqueira |