|
JavaScript - Delayed Mouseout()
So after a great deal of work I finally get my code working...
Main hurdle was clearing the setTimeOut... A simple example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>
<script type="text/javascript" src="js1.3.js"></script>
<style>
.windowcht {
position:absolute;
top:30%;
width:150px;
height:150px;
right:50%;
background:yellow;
}
</style>
<script>
$(function() {
//mouse hover effects
$('.windowcht').fadeTo('slow', 0.1);
$('.windowcht').mouseenter(function() {
$(this).fadeTo('fast', 1);
});
$('.windowcht').mouseleave(function() {
var hov = this;
var timeout;
timeout = setTimeout(function() {
$(hov).fadeTo('slow', 0.1);
}, 2000);
$('.windowcht').mouseenter(function() {
clearTimeout(timeout);
});
});
});
</script>
</head>
<body>
<div class="windowcht">
This is my text
</div>
</body>
</html>
I would love any suggestions for my code to be less resource hungrey, I mean pure js code, not jquery. Suggestion?? Similar TutorialsCode: var c=0;
var i=0;
function timedCount()
{
document.getElementById('txt').innerHTML=c;
c++;
setTimeout("timedCount()",500);
}
function expand()
{
while (i<=10) {
timedCount();
i++;
}
}
For some reason the innerHTML number starts at 10 because of the while. I want it to start from 0 and stop when at 10... The following piece of codes work like this: When mouse pointer is moved over the Button, the text of the button changes; When it is moved out of the button, the background color of the button changes. <html> <head> <script type="text/javascript"> function over(e) { if(e.toElement){ if(e.toElement.tagName.toLowerCase() == "input"){ e.toElement.value="IE New"; } } } function out(event) { if (event.srcElement){ if(event.srcElement.tagName.toLowerCase() == "input"){ event.srcElement.style.background= "green"; } } } </script> </head> <body> <div id="1">aaaaaaaaaaaaaaaaaa </div> <input type="button" value="Button 1" onmouseout="out(event)" onmouseover="over(event)" /> </body> </html> This sequence works fine, until the following case: First let's see the direction of the button: (left) <--------> BUTTON <--------> (right) Now, move the mouse over to the button, from the right side of the button, both the text and the background color of the button are changed. Obviously, the mousemoveout event is also triggered. I believe in this case, only the mousemoveover event should be triggered. What caused this? Thanks Scott Hello, I found the javascript for triggering audio on mouseOver (on the page link below) very helpful. Question is - how to stop the audio on mouseout? http://www.javascriptkit.com/script/....shtml#current I think this is a simple problem, but lets see... As the title suggests, I'm building a menu where when the user clicks on their username, a menu slides down. That part is easy. Using jQuery, I'm using slideToggle so when they click it again it moves back up. But what I'd also like to do is make it so if they leave the menu "area" (eg, are not on the username or the menu) I'd like the menu to slide back up. I tried Code: $('#userLink, #userMenu').mouseout(function () {
$('#userMenu').slideUp('fast');
});
But there is the obvious flaw of when they mouse from the username to the menu, they leave the username and the menu closes back up. Anyone have thoughts on how this is/can be done? Is there a way to check what element the mouse is on at any given time? My other thought was to have a function set on timeout that would check if its on one of the accepted elements, and if not, close the menu and disengage the timeout. I want a mouseout event to trigger only when I leave the parent element not when I mouseover a child element. I've been using the script from quirksmode but it can be hard to get working. Code: function doSomething(e) {
if (!e) var 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
}
I have a function that needs to work only when the parent is moused out of. I didn't make this script. It's called by ondblclick="transition(document.getElementById('select1'),0,800,20)" in the html Code: function transition(ele,dirflag) {
if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
var totDur = arguments[2] || 1000; // third argument, or one seconds
var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
var intrval = totDur/numSteps; // renamed so it can't conflict
ele.sopac = 0; // we start at 0
ele.shght = 50; // we start at 50px
ele.eopac = 1; // we end at 1
ele.ehght = 140; // we end at 140px
ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment opac
ele.ihght = (ele.ehght-ele.shght)/numSteps; // how much to increment hght
ele.copac = parseFloat(ele.copac,10) || ele.style.opacity || ele.sopac; // a val for current
ele.chght = ele.chght || parseInt(ele.style.height,10) || ele.shght; // a val for current
ele.dirflag = dirflag; // changed name to dirflag, stored for reference
if(ele.intrans) clearInterval(ele.intrans); // clear timeout if already running...
if(dirflag) { // 1 or true = increment
// alter visibility here to make an invisible item visible before starting
ele.style.display='block';
ele.intrans= setInterval(function() {
if(ele.copac<ele.eopac ) { // if mods needed
ele.copac=parseFloat(ele.copac,10)+parseFloat(ele.iopac,10); // increment
if(ele.copac>ele.eopac) ele.copac=ele.eopac; // error correction
ele.chght=parseFloat(ele.chght,10)+parseFloat(ele.ihght,10); // increment
if(ele.chght>ele.ehght) ele.chght=ele.ehght; // error correction
// set styles accordingly
ele.style.opacity = ele.copac;
ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
ele.style.height = ele.chght+'px';
} else {
clearInterval(ele.intrans); // we're done -- clear timeout
}
},intrval); // do it on intrval timeline
} else {
// 0 or false = decrement
ele.intrans= setInterval(function() {
if(ele.copac>ele.sopac || ele.chght>ele.shght) { // if mods needed
ele.copac=parseFloat(ele.copac,10)-parseFloat(ele.iopac,10); // decrement
if(ele.copac<ele.sopac) ele.copac=ele.sopac; // error correction
ele.chght=parseFloat(ele.chght,10)-parseFloat(ele.ihght,10); // decrement
if(ele.chght<ele.shght) ele.chght=ele.shght; // error correction
// set styles accordingly
ele.style.opacity = ele.copac;
ele.style.MozOpacity = ele.copac;
ele.style.KhtmlOpacity = ele.copac;
ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
ele.style.height = ele.chght+'px';
} else {
clearInterval(ele.intrans); // we're done -- clear timeout
// and make the item disappear here since it's done transitioning.
ele.style.display='none';
}
},intrval); // do it on intrval timeline
}
} // all done!
I tried to do this: Code: function transition(ele,dirflag,e){
if (!e) var 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
if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
var totDur = arguments[2] || 1000; // third argument, or one seconds
var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
var intrval = totDur/numSteps; // renamed so it can't conflict
ele.sopac = 0; // we start at 0
ele.shght = 50; // we start at 50px
ele.eopac = 1; // we end at 1
ele.ehght = 140; // we end at 140px
ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment
........
With this in the html onmouseout="transition(document.getElementById('select1'),1,800,20,event) but it doesn't work. the event isn't getting passed to the function. i have tried to move the event before document.getElementById and put e before ele in the function but it still doesn't work. Nothing fires at all. I've just added the quirksmode script to other functions in the past and had them work. I know this won't be the last time I need to stop problems with mouseover so can you give me some tips on what is going wrong. and please no script librarys. Using a css dropdown menu with javascript work-around for ie. Sorry to post yet again on this subject, but I couldn't find a solution in previous threads. My problem (in IE): I'm using the workaround as detailed in the "suckerfish" article http://htmldog.com/articles/suckerfish/dropdowns/ . Works great to drop my menu down, but when I mouse out the menu remains. On checking back with the original article, they have the same problem so I tried adapting the mouseout line in different ways. Still can't figure it out. Here is my site: http://www.centraloregonfoodnetwork.com/indexx.html Drop down menu only exists for the "producers directory". Thanks I pretty sure just looking at this that there must be a simpler way of executing this. I have a number of objects (always varies) coming into the div tag #apply_row and has the class .rotate_color and .highlight Code: <div id="apply_row" class="rotate_color highlight"> milk </div> <div id="apply_row" class="rotate_color highlight"> coffee </div> <div id="apply_row" class="rotate_color highlight"> cheese </div> And I have the javascript written to give a different color for dd and :even and to add a highlight color when user puts the mouse over. Code:
$(document).ready(function()
{
//alternate div colors
$("div.rotate_color:odd").css("background-color", "#FFFFFF");
$("div.rotate_color:even").css("background-color", "#F9F5E8");
//highlight and return back to original color on mouseout
$("div.highlight").mouseover(function(){
$(this).css("background-color", "#F6E9D0");
$("div.highlight").mouseout(function(){
//clear background color to none
$(this).css("background-color", "");
//change back to original
$("div.rotate_color:odd").css("background-color", "#FFFFFF");
$("div.rotate_color:even").css("background-color", "#F9F5E8");
});
});
});
This does seem a bit excessive, but it does work except that it is *really slow to make the css changes. I couldn't really get .hover to work either with changing the background back to the original. The way the site is set up right now, it would be best to leave the background-color for these particular ID's and Classes out of the CSS file itelf (blah, too long to explain why). Any suggestions??? Thanks, Daniel I have a navigation menu. When you mouseover, there's a sub-menu that appears. It remaining until you mouseout from the submenu or that "top level" item you mousedover in the first place. I want to change the mouseout function so it does nothing until you mousover another top-level item in the navigation. Example Shown he http://www.courage.ca Code: startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;
This is what my code is supposed to do: 1. create a select list that changes the photo showing, (which I have) 2. create script so that when the user hovers over the image it shows a div 3. when the users mouse is off the image/div shows the coordinates where it last left 4. on mouseout hides the div again (this is the part I'm stuck on) This is my html: Code: <style>
#selectdiv
{
position:absolute;
left:10px;
top:10px;
width:400px;
height:400px;
}
#mylist
{
position: absolute;
left: 200px;
top: 100px;
width:inherit;
height:inherit;
}
#myyellow
{
position: absolute;
left: 600px;
top: 100px;
width:300px;
height:200px;
background-color:#FF3;
}
</style>
<body>
<div id="selectdiv">
<h1 style="font-size:28px">Select a Beatle</h1>
<select name="beatles" size="1" id="myselect" onchange="showDiv();">
<option value="-">-</option>
<option value="J">John</option>
<option value="P">Paul</option>
<option value="G">George</option>
<option value="R">Ringo</option>
</select>
</div>
<div id="mylist" style="display:none" onmouseover="showYellow(event);" onmouseout="showpixels(event)"></div>
<div id="John" style="display:none">
<img src="beatles_john.jpg" />
</div>
<div id="Paul" style="display:none">
<img src="beatles_paul.jpg" />
</div>
<div id="George" style="display:none">
<img src="beatles_george.jpg" />
</div>
<div id="Ringo" style="display:none">
<img src="beatles_ringo.jpg" />
</div>
<div id="myyellow" style="display:none"></div>
<div id="msg"></div>
</body>
This is my script: Code: function showDiv()
{
var mySelect = document.getElementById("myselect");
var myList = document.getElementById("mylist");
switch (mySelect.value)
{
case 'J':
myDiv = document.getElementById("John");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
case 'P':
myDiv = document.getElementById("Paul");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
case 'G':
myDiv = document.getElementById("George");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
case 'R':
myDiv = document.getElementById("Ringo");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
}
}
function showYellow(event)
{
var myyellow = document.getElementById("myyellow");
myyellow.style.display = "block";
}
function showpixels(event)
{
x=event.clientX
y=event.clientY
var myMsg = document.getElementById("msg");
myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y;
}
Any feed back is greatly appreciated. |
|||||||