On mouseout child event

[riptide]

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.

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

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:

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.

[ggalan]

something like this?

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{width:800px; height:600px; background-color:#CCC;margin-top:-100px; padding:0;}
#parent{width:400px; height:400px; background-color:#777; margin:50px;}
#child{width:200px; height:200px; background-color:#333; margin:100px;}
</style>
<script type="text/javascript">
	
$(function() {	
	$('#parent').mouseenter(function() {
		$('#rec').html('parent in');
	});
	$('#parent').mouseleave(function() {
		$('#rec').html('parent out');
	});
	$('#child').mouseenter(function() {
		$('#rec').html('child in');
	});
	$('#child').mouseleave(function() {
		$('#rec').html('child out');
	});
});

</script>
</head>
<body>
<div id="rec"></div>
<div class="container">
	<div id="parent">
		<div id="child"></div>
	</div>
</div>
</body>
</html>

[riptide]

I really didn't want to have to rely in another server http://code.jquery.com/

but I'm running out of time and desperate as hell. So I'm supposed to just change the Id names from parent to what ever I'm using but
what if I have many child elements or many other parent's with other children. Or the children don't have any Ids.


There are 3 parents which are IDs and the children are list elements. Plus I don't know what you gave me does. Am I supposed to stick my code somewhere in here?
or does it just stop event bubbling on anything it is attached to so my functions can work on those elements without event bubbling. I don't know how to use jquery at all, I have never used it before.

$(function() {
$('#parent').mouseenter(function() {
$('#rec').html('parent in');
});
$('#parent').mouseleave(function() {
$('#rec').html('parent out');
});
$('#child').mouseenter(function() {
$('#rec').html('child in');
});
$('#child').mouseleave(function() {
$('#rec').html('child out');
});
})

[ggalan]

i suppose you can place your code inside

$(function() {
$('#parent').mouseenter(function() {
  //code here
});
$('#parent').mouseleave(function() {
  //code here
});
$('#child').mouseenter(function() {
  //code here
});
$('#child').mouseleave(function() {
  //code here
});
})

[riptide]

Um.....this doesn't work nor does it look like it would ever work. Why did you tell me to try this.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="scrollDiv.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="SiteCss.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
	
$(function() {
$('#select3').mouseenter(function() {

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!






});
$('#select3').mouseleave(function() {
 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! 
});


   $('#cate').mouseenter(function() {
		$('#rec').html('child in');
	});
	$('#cate').mouseleave(function() {
		$('#rec').html('child out');
	});
});

</script>

</head>

<body bgcolor="#829045">


<!--START company listing background-->
<div id="menueC">
<!--Start company select-->

<div id="Ftile" onmouseover="this.style.color='#e8d68f'"   onmouseout="this.style.color='#5e4a00'"   ondblclick="this.style.color='#5e4a00'" > <p class="titles">Florida Tile</p>

<div  id="select3"> 

<ul  class="cate" id="cate" >
<li> <a href="#" onclick="document.getElementById('PorcFT').className='switchM'">Porcelain</a></li>
<li><a href="#">High-Def Porcelain</a></li>
<li><a href="#">Ceramic</a></li>
<li><a href="#">Pietra Art-stone</a></li>
<li><a href="#">Metal Art</a></li>
<li><a href="#">Vitra Art</a></li>
</ul>
</div>
</div>

Also you never explained how this code works.

[riptide]

never mind all this.

it turns out adding

function doSomething(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}

to the head and

<p class="titles" onclick="transition(document.getElementById('select3'),1,900,20)">Florida Tile</p>

<div id="select3" onmouseout="transition(document.getElementById('select3'),0,800,20)">

<ul class="cate" id="cate" onmouseout="doSomething(event)" >

To the childs solves the problem.