PDA

View Full Version : On mouseout child event



riptide
01-25-2012, 08:49 PM
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
01-26-2012, 02:09 PM
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
01-27-2012, 01:25 AM
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
01-27-2012, 09:58 PM
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
01-27-2012, 11:16 PM
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
01-27-2012, 11:50 PM
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.