Results 1 to 6 of 6

Thread: On mouseout child event

  1. #1
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default On mouseout child event

    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.

    HTML 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



    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:


    HTML 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.

  2. #2
    Join Date
    Jan 2008
    Posts
    441
    Thanks
    67
    Thanked 4 Times in 4 Posts

    Default

    something like this?
    Code:
    <!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>

  3. #3
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    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');
    });
    })
    Last edited by riptide; 01-27-2012 at 01:42 AM.

  4. #4
    Join Date
    Jan 2008
    Posts
    441
    Thanks
    67
    Thanked 4 Times in 4 Posts

    Default

    i suppose you can place your code inside
    Code:
    $(function() {
    $('#parent').mouseenter(function() {
      //code here
    });
    $('#parent').mouseleave(function() {
      //code here
    });
    $('#child').mouseenter(function() {
      //code here
    });
    $('#child').mouseleave(function() {
      //code here
    });
    })

  5. #5
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

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

    Code:
    <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.

  6. #6
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •