JavaScript - Using Mouseover Mouseout Slow To React

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.

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 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;

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.

Heya guys.

My gallery javascript is running very laggy in IE8.

Here's an example:

www.amex-trading.dk/pizzaovne.php

It works fine in chrome, but it's slow when using IE.

Any suggestions?

I'm trying to slow this image rotator down.


I thought I would just change the setInterval part. But it's not working.

Quote:
$(function() {
setInterval( "nextPage()", 7000 );
});
Below is the full script. Am I missing something?

Code:

// Global variable that controls billboard image rotation
var $rotate = 1;

// Load this script when page loads
$(document).ready(function(){
	
 // Set up a listener so that when anything with a class of 'bbtab' 
 // is clicked, this function is run.
 $('.bbtab').click(function () {

	// Turn off autorotation.
	$rotate = 0;
	
  // Remove the 'bboard_page_active' class from the visible tab contents.
  $('#bboard > ul > li.bboard_page_active').removeClass('bboard_page_active');

  // Add the 'bboard_page_active' class to the associated tab contents.
  $(this.rel).addClass('bboard_page_active');
  return false; //stop the links default action
 });
});

function nextPage() {
// id is expected to look like 'bbpage1'.
// We just need the number part at the end so that we can figure out which page is next in the rotation.
var $active_page = $('#bboard > ul > li.bboard_page_active').attr('id') || 'bbpage0';
var $next_page   = parseInt($active_page.substring(6)) + 1;
if ($next_page > $('#bboard > ul > li').length) { $next_page = 1; }
if ($rotate == 1) {
	// Remove the 'bboard_page_active' class from the active page.
	$('#'+$active_page).removeClass('bboard_page_active');
	// Add the 'bboard_page_active' class to the next page.
	$('#bbpage'+$next_page).addClass('bboard_page_active');
	// alert("Active page is " + $active_page + " of " + $total_pages + " and next is " + $next_page);
}
}

$(function() {
setInterval( "nextPage()", 7000 );
});

hi guys

I am looking at this template:
http://www.csstemplatesfree.org/prev...ero/index.html

I think the sliding at the top happens way too frequently. How can I slow it down? I think it would be better if the slides change once every 6 seconds.

Hello guys,

The title says it all, my javascript hover menu is running perfect in chrome, but really slow in IE.

Take a look here - the menu is called "Produkter"

Thanks in regard

Hey All,

I've got the following site that loads great in FF and Chrome (no surprise), but is terribly slow in IE7. It's even quick in IE6, but not 7. Here's the site:

http://www.hanshawengines.com/

Now I'm using JQuery in a couple places, but it's by no means nothing crazy. The page is fairly simple.

I thought of preloading the main content images, but even after they are loaded in the cycle, the loading time is still slow.

Any suggestions on how I could improve this would be greatly appreciated.

Thanks.

Hi,

I am writing a basic app for a client where the customer puts in their order ID and phone number and press submit. When testing it on my PC it worked flawlessly. When I tested on a desktop PC where the screen was a touch screen as well as on Android devices, it seems the browser is a bit slow to respond. If you press each number slowly (waiting 0.5 second per press) it works fine. However if use it normal to fast then the browser does not catch every button press. Any and all advice is appreciated to heklp make this work.

Code:

<title>DLUX Order alert system</title>
<head>
<center><font color="blue"><b>DLUX Order alert system</b></font></center></br></br>
		<body onload="empty_to_do();">

		<script type="text/javascript">

		function addOrderID(key){
        	var order_id = document.forms[0].order_id;
        	order_id.value = order_id.value + key;
			}

		function setToDo(key){
        	var to_do = document.forms[0].to_do;
        	to_do.value = key;
        	setTimeout(submitForm,100);
			}

		function addPhoneNumber(key){
        	var phone_number = document.forms[0].phone_number;
			var phone_number_real = document.forms[0].phone_number_real;
        	phone_number.value = phone_number.value + key;
			phone_number_real.value = phone_number_real.value + key;
			phone_number_real.value = phone_number_real.value.substr(0,10);
			if(phone_number_real.value.length <1){
				phone_number.value = '';
				}
			if(phone_number_real.value.length >0 && phone_number_real.value.length < 3){
				phone_number.value = '(' + phone_number_real.value.substr(0,3) ;
				}
			if(phone_number_real.value.length >2 && phone_number_real.value.length < 6){
				phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3);
				}
			if(phone_number_real.value.length > 5){
				phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3) + '-' + phone_number_real.value.substr(6,4);
				}
			}

		function delOrderID(key){
        	var order_id = document.forms[0].order_id;
        	order_id.value = order_id.value.substring(0, order_id.value.length - 1);
        	}

		function delPhoneNumber(key){
        	var phone_number = document.forms[0].phone_number;
        	var phone_number_real = document.forms[0].phone_number_real;
        	phone_number_real.value = phone_number_real.value.substring(0, phone_number_real.value.length - 1);
			if(phone_number_real.value.length <1){
				phone_number.value = '';
				}
			if(phone_number_real.value.length >0 && phone_number_real.value.length < 3){
				phone_number.value = '(' + phone_number_real.value.substr(0,3) ;
				}
			if(phone_number_real.value.length >2 && phone_number_real.value.length < 6){
				phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3);
				}
			if(phone_number_real.value.length > 5){
				phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3) + '-' + phone_number_real.value.substr(6,4);
				}
			

        	}

		function resetOrderID(key){
       		var order_id = document.forms[0].order_id;
        	order_id.value = '';
        	}

		function resetPhoneNumber(key){
			var phone_number = document.forms[0].phone_number;
			var phone_number_real = document.forms[0].phone_number_real;
			phone_number.value = '';
			phone_number_real.value = '';
			}

		function submitForm(){
        	document.forms[0].submit();
			}

		function emptyCode(){
     		document.forms[0].order_id.value = "";
    		document.forms[0].to_do.value = "";
      		document.forms[0].phone_number.value = "";
			document.forms[0].phone_number_real.value = "";
			}

		function empty_to_do(){
        	document.forms[0].to_do.value = "";
			}

		function empty_order_id(){
        	document.forms[0].order_id.value = "";
			}

		function empty_phone_number(){
        	document.forms[0].phone_number.value = "";
        	document.forms[0].phone_number_real.value = "";
			}

		</script>

		<style>
		body {
        	text-align:center;
        	background-color:#D3D3D3;
        	font-family:Verdana, Arial, Helvetica, sans-serif;
			}

		#keypad {margin:auto; margin-top:20px;}

		#keypad tr td {
        	vertical-align:middle;
        	text-align:center;
        	border:1px solid #000000;
        	font-size:18px;
			font-weight:bold;
			width:180px;
			height:160px;
			cursor:pointer;
			background-color:#666666;
			color:#CCCCCC
			}

		#keypad tr td:hover {background-color:#999999; color:#FFFF00;}

		.display {
        	width:130px;
        	margin:10px auto auto auto;
        	background-color:#000000;
        	color:#00FF00;
        	font-size:18px;
        	border:1px solid #999999;
			}
	
		#message {
        	text-align:center;
        	color:#009900;
        	font-size:14px;
        	font-weight:bold;
        	display:none;
			}

		#submit {
			width: 10em;
			height: 5em;
			}
		</style>

		<form action="" method="post">
		<font color="red"><b>Order ID:  </b></font> <input type="text" name="order_id" value="9" maxlength="10" class="display"/>
		<table id="DOVID_keypad" cellpadding="15" cellspacing="5">
		<tr>
			<td><input type="button" style="width:75;height:75" value="1" onclick="addOrderID('1');"></td>
			<td><input type="button" style="width:75;height:75" value="2" onclick="addOrderID('2');"></td>
			<td><input type="button" style="width:75;height:75" value="3" onclick="addOrderID('3');"></td>
		</tr>
		<tr>
			<td><input type="button" style="width:75;height:75" value="4" onclick="addOrderID('4');"></td>
			<td><input type="button" style="width:75;height:75" value="5" onclick="addOrderID('5');"></td>
			<td><input type="button" style="width:75;height:75" value="6" onclick="addOrderID('6');"></td>
		</tr>
		<tr>
			<td><input type="button" style="width:75;height:75" value="7" onclick="addOrderID('7');"></td>
			<td><input type="button" style="width:75;height:75" value="8" onclick="addOrderID('8');"></td>
			<td><input type="button" style="width:75;height:75" value="9" onclick="addOrderID('9');"></td>
		</tr>
		<tr>
			<td><input type="button" style="width:75;height:75" value="RESET" onclick="resetOrderID('');"></td>
			<td><input type="button" style="width:75;height:75" value="0" onclick="addOrderID('0');"></td>
			<td><input type="button" style="width:75;height:75" value="BACK" onclick="delOrderID('');"></td>
		</tr>

		</table>
		<br/>
		<font color="red"><b>Phone Number:  </b></font> <input type="text" name="phone_number" value="" maxlength="15" class="display"/><input type="hidden" name="phone_number_real" value="" maxlength="10" class="display"/></tr>
		<table id="keypad" cellpadding="5" cellspacing="3">
		<tr>
        	<td onclick="addPhoneNumber('1');">1</td>
        	<td onclick="addPhoneNumber('2');">2</td>
        	<td onclick="addPhoneNumber('3');">3</td>
		</tr>
		<tr>
        	<td onclick="addPhoneNumber('4');">4</td>
        	<td onclick="addPhoneNumber('5');">5</td>
        	<td onclick="addPhoneNumber('6');">6</td>
		</tr>
		<tr>
	        <td onclick="addPhoneNumber('7');">7</td>
    	    <td onclick="addPhoneNumber('8');">8</td>
       		<td onclick="addPhoneNumber('9');">9</td>
		</tr>
		<tr>
        	<td onclick="resetPhoneNumber('');">RESET</td>
        	<td onclick="addPhoneNumber('0');">0</td>
        	<td onclick="delPhoneNumber('');">Back</br>Space</td>
		</tr>
		</table>
		<br>
		<table id="keypad" cellpadding="10" cellspacing="3">
			<td onclick="setToDo('submit');">Submit</td>
		</table>
		<input type="hidden" name="to_do" value="" maxlength="100" readonly="readonly" /></tr>
		</form>

		</html>

I heard that when we put javascript in website, then site takes time to open, is it correct ? If yes then which script is good for website.

Hi. I am using a mouseover dropdown menu within a rather large table. The script is only 1.6kb so I don't understand why it is going so slow. Mind you this effect is instant in Firefox, Chrome, Safari, Opera. However, in IE 7 it takes about 3-4 seconds. Any advice on how to get this time down in IE 7? Here is a quick sample of the code. Code:

var DDSPEED = 10;
var DDTIMER = 15;

// main function to handle the mouse events //
function ddMenu(id,d){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearInterval(c.timer);
  if(d == 1){
    clearTimeout(h.timer);
    if(c.maxh && c.maxh <= c.offsetHeight){return}
    else if(!c.maxh){
      c.style.display = 'block';
      c.style.height = 'auto';
      c.maxh = c.offsetHeight;
      c.style.height = '0px';
    }
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }else{
    h.timer = setTimeout(function(){ddCollapse(c)},50);
  }
}

// collapse the menu //
function ddCollapse(c){
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearTimeout(h.timer);
  clearInterval(c.timer);
  if(c.offsetHeight < c.maxh){
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }
}

// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
  var currh = c.offsetHeight;
  var dist;
  if(d == 1){
    dist = (Math.round((c.maxh - currh) / DDSPEED));
  }else{
    dist = (Math.round(currh / DDSPEED));
  }
  if(dist <= 1 && d == 1){
    dist = 1;
  }
  c.style.height = currh + (dist * d) + 'px';
  c.style.opacity = currh / c.maxh;
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
  if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
    clearInterval(c.timer);
  }
}

further reference: http://problemcorrected.com

I am working on a demo for a movie site, and 90% of everything seems cool.
Here

I am doing php.flushes, .htaccess caching and using PNGs to help with performance. I might start using another sub site to grab all the scripting from to increase performance, but it seems a tad bit slow at the moment.

- There are a few issues one being when you click on X-Men and look at the gallery the images seem to flicker sometimes going from image to image.

I am using a fade script I found and then using setTimeout() to give the fade script time to do its thing then call for a new image.
Code:

		FadeOpacity(main_img_id, 100, 0, 600, 12);
		setTimeout("updateGallery('"+target_arr+"','"+main_img_id+"')", 600);

- Also in the same area I am checking clientHeight after each image modifying the marginTop. The thing with that is the clientHeight only seems to update after the second function call. I tried using a setTimeout() but that didn't nothing.
Code:

		document.getElementById(main_img_id).src = "assets/movie_images/"+arr[i];
		img_height = document.getElementById(main_img_id).clientHeight;

Any suggestions with improving image load performance, the clientHeight issue or the image flickering issue would be appreciated.

Hi.
I'm using a tooltip javascript from this website:
http://sixrevisions.com/tutorials/ja...cript_tooltip/
This is what it looks like when it's working smoothly:
http://sandbox.leigeber.com/tooltip/

To fix scrolling issues, I changed (near the lower bottom, under "pos:function(e)"):
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
to:
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;

I'm using these tooltips for an image map that has 1,000 defined areas. In Firefox, everything works very smoothly. Everything works well and looks smooth/visually pleasing.
But in IE, the tooltips are "choppy" and "staticy". They work well when I continuously move my mouse over the image map without stopping. But when I completely stop the cursor on a part of the image map for about 1 full second, and then move my mouse, the tooltip stays where it is even though the mouse has moved. It then takes between 1 - 2 seconds for the tooltip to "catch up" and move to be next to the mouse/cursor - where it is supposed to be. Also, I must note that when I only have a few (like 3 or 4) defined areas for the image map, the tooltip works perfectly fine and smoothly in IE.
I'm very new to html and javascript, and so I'm finding myself at a bit of a loss as to why this is occuring. Can anyone offer any help as to how I can make this tooltip go smoothly between defined areas (not sure if that's the correct terminology) of the image map?

I'm new to javascript, and so, unsure of which parts could be causing the problems. However, I think it might have to do with the part from pos:function(e) on. If needs be, I'd be happy to post the full javascript code.

Code:

  pos:function(e){
   var u = ie ? event.clientY + document.getElementById('bodyid').scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
}

I have a slow loading external JavaScript that displays a calendar widget. When I put it in my sidebar, while the page loads, it cuts off where the calendar should be until the JavaScript for it finishes.

How can I make the script load after the page finishes loading?

I tried creating a function at the end of the HTML and calling the function in the sidebar, but I think because the function was being called before the script was executed, it didn't work.

I appreciate any and all help!