JavaScript - Javascript Menu - Slow In Ie

I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code:

var NoOffFirstLineMenus=7; // Number of first level items
var LowBgColor='white'; // Background color when mouse is not over
var LowSubBgColor='white'; // Background color when mouse is not over on subs
var HighBgColor='black'; // Background color when mouse is over
var HighSubBgColor='black'; // Background color when mouse is over on subs
var FontLowColor='black'; // Font color when mouse is not over
var FontSubLowColor='black'; // Font color subs when mouse is not over
var FontHighColor='white'; // Font color when mouse is over
var FontSubHighColor='white'; // Font color subs when mouse is over
var BorderColor='black'; // Border color
var BorderSubColor='black'; // Border color for subs
var BorderWidth=1; // Border width
var BorderBtwnElmnts=1; // Border between elements 1 or 0
var FontFamily="arial,comic sans ms,technical" // Font family menu items
var FontSize=9; // Font size menu items
var FontBold=1; // Bold menu items 1 or 0
var FontItalic=0; // Italic menu items 1 or 0
var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right'
var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right'
var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
var ChildOverlap=.2; // horizontal overlap child/ parent
var ChildVerticalOverlap=.2; // vertical overlap child/ parent
var StartTop=05; // Menu offset x coordinate
var StartLeft=05; // Menu offset y coordinate
var VerCorrect=0; // Multiple frames y correction
var HorCorrect=0; // Multiple frames x correction
var LeftPaddng=3; // Left padding
var TopPaddng=2; // Top padding
var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
var MenuFramesVertical=1; // Frames in cols or rows 1 or 0
var DissapearDelay=1000; // delay before menu folds in
var TakeOverBgColor=1; // Menu frame takes over background color subitem frame
var FirstLineFrame='navig'; // Frame where first level appears
var SecLineFrame='space'; // Frame where sub levels appear
var DocTargetFrame='space'; // Frame where target documents appear
var TargetLoc=''; // span id for relative positioning
var HideTop=0; // Hide first level when loading new document 1 or 0
var MenuWrap=1; // enables/ disables menu wrap 1 or 0
var RightToLeft=0; // enables/ disables right to left unfold 1 or 0
var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover
var WebMasterCheck=0; // menu tree checking on or off 1 or 0
var ShowArrow=1; // Uses arrow gifs when 1
var KeepHilite=1; // Keep selected path highligthed
var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height

function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}


// Menu tree
// MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);
// For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg"

Menu1=new Array("Home","","",3);
Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150);
Menu1_2=new Array("Acknow","Acknowledgement.htm","",0);
Menu1_3=new Array("Prayer","Prayer.htm","",0);

Menu2=new Array("About Us","","",4);
Menu2_1=new Array("Debra","bio.htm","",0,20,150);
Menu2_2=new Array("Seamus","Seamus.htm","",0);
Menu2_3=new Array("Locations","location.htm","",0);
Menu2_4=new Array("Contact Us","contact.htm","",0);

Menu3=new Array("Services","","",7);
Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150);
Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0);
Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0);
Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0);
Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0);
Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0);
Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0);

Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0);

Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0);

Menu6=new Array("Articles","","",3);
Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150);
Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0);
Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0);

Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0);

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

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>

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

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

Hi,

I am working on modifying a menu, and trying to add a sub-sub menu under Mfg & Dist, where Operations would expand to show Reports and Content. However, I can't get it to work. I think some javascript modification is needed, but I don't know much javascript. Can anyone help me find what I would need to change?


Below is the code I have thus far. Thank you!




Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<body>
<style>
.tab{line-height: 36px; text-decoration: none; font-family: Geneva,Tahoma,"Nimbus Sans L",sans-serif; font-size: 12px; color: #ffffff; cursor:pointer;}
.asd{text-decoration: none; font-family: Geneva,Tahoma,"Nimbus Sans L",sans-serif; font-size: 11px; color: #ffffff; cursor:pointer;}
.box {border-top: 1px solid #274f40; border-left: 1px solid #274f40; border-right: 1px solid #274f40; width: 148px; margin: 0; padding: 7px 8px 6px 10px; background-color:#4F7F6D;}
td.menuborder {background: #33735B url(http://dl.dropbox.com/u/16052106/58545.PNG);background-repeat: repeat-x; border-top:1px solid #1E3C31; border-bottom:1px solid #ABB8BB;}
td.menudiv {background: url(http://dl.dropbox.com/u/16052106/58546.PNG) no-repeat scroll 50% -2px transparent; padding-right: 20px;}
</style>
</head>



<script language=javascript>
window.onerror = null;
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var menuActive = 0;
var menuOn = 0;
var onLayer;
var timeOn = null;

function showLayer(layerName,aa){
var x =document.getElementById(aa);
var tt =findPosX(x) - 11; 
var ww =findPosY(x) + 41; 

<!-- x.style.backgroundColor = '#6B8F81'; -->

if (timeOn != null) {
clearTimeout(timeOn);
hideLayer(onLayer);
}
if (IE4) {
var layers = eval('document.all["'+layerName+'"].style');
layers.left = tt;
layers.top = ww;
eval('document.all["'+layerName+'"].style.visibility="visible"');
}
else {
if(document.getElementById){
var elementRef = document.getElementById(layerName);
if((elementRef.style)&& (elementRef.style.visibility!=null)){
elementRef.style.visibility = 'visible';
elementRef.style.left = tt;
elementRef.style.top = ww;
}
}
}
onLayer = layerName
}

function Indicator(n)
{
var box = document.getElementByID(n);
box.style.backgroundcolor='#000000';	
}

function hideLayer(layerName){
if (menuActive == 0)
{
if (IE4){
eval('document.all["'+layerName+'"].style.visibility="hidden"');
} 
else{
if(document.getElementById){
var elementRef = document.getElementById(layerName);
if((elementRef.style)&& (elementRef.style.visibility!=null)){
elementRef.style.visibility = 'hidden';
}
}
}
}
}

function btnTimer() {
timeOn = setTimeout("btnOut()",600);

}

function btnOut(layerName){

if (menuActive == 0){
hideLayer(onLayer)
}
}

var item;

function menuOver(itemName){
item=itemName;
itemName.style.backgroundColor = '#33735B'; //background color change on mouse over 
clearTimeout(timeOn);
menuActive = 1
}

function menuOut(itemName){
if(item)
itemName.style.backgroundColor = '#4F7F6D';
menuActive = 0
timeOn = setTimeout("hideLayer(onLayer)", 100)
}

function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}

function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
</script>

<table valign=top cellpadding=0 cellspacing=0 width=100% border=0>
<tr><td class="menuborder">
<table align=left>
<tr>
<!-- td>&nbsp; &nbsp; </td -->
<td id=mm0 align=left><a class=tab href="/portal/page/portal/ABCEmp"><div><span> <b>&nbsp; &nbsp; Home</b></span></div></a></td>
<td class="menudiv"></td>
<td id=mm7 align=left> <a class=tab href="/portal/page/portal/ABCEmp/EngIT"> <div><span><b>Eng/IT</b></span></div></a></td>
<td class="menudiv"></td>
<td id=mm6 align=left> <a class=tab href="/portal/page/portal/ABCEmp/Finance"> <div><span><b>Finance</b></span></div></a></td>
<td class="menudiv"></td>
<td id=mm2 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("MainMenu2",'mm2')> <b>Human Resources</b></td>
<td class="menudiv"></td>
<td id=mm3 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("MainMenu3",'mm3')>  <b>Market Segments</b></td>
<td class="menudiv"></td>
<td id=mm4 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("MainMenu4",'mm4')> <b>Mfg &amp; Dist</b></td>
<td class="menudiv"></td>
<td id=mm5 align=left> <a class=tab href="/portal/page/portal/ABCEmp/NBD"> <div><span><b>New Bus Dev</b></span></div></a></td>
<td class="menudiv"></td>
<!-- td id=mm5 align=left> <a class=tab href="/portal/page/portal/ABCEmp/NBD"> <b>New Bus Dev</b></a></td>
<td class="menudiv"></td -->
<!--			<td id=5 align=left class=tab onmouseout=btnTimer() onmouseover=showLayer("Menu2",'2')><a class=tab href="/portal/page/portal/ABCEmp/IT">  <b>IT</b></a></td>
<td> &nbsp; &nbsp; </td>
-->
</tr>
</table>


<!-- <div id=MainMenu1 style=" position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000;">



</div> -->

<div id=MainMenu3 style="position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000">

<div>
<a  class=asd href="/portal/page/portal/ABCEmp/MktSeg/BCS"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;BCS &nbsp;&nbsp; &nbsp;</p></a> 
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/AquPlan"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;BLS &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/BusServ"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Business Services &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/ClntServ"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Client Services &nbsp; &nbsp; &nbsp;</p></a>
</div>

<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Est"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Estimating &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Mark"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Marketing &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Pap"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Paper</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/Sal"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Sales &nbsp; &nbsp; &nbsp;</p></a>
</div>
<!-- div>
<a class=asd href="/portal/page/portal/ABCEmp/MktSeg/LTS"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Long Term Sched &nbsp; &nbsp; &nbsp;</p></a>
</div -->

</div>
<div id=MainMenu2 style="position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000">

<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>  
&nbsp;HR Home &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/Job"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Job Postings &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/Saf"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Safety &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/ShrServ"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Shared Services &nbsp; &nbsp; &nbsp;</p></a>
</div>

<div>
<a class=asd href="/portal/page/portal/ABCEmp/HR/Trans"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Transformation &nbsp; &nbsp; &nbsp;</p></a>
</div>
</div>
<div id=MainMenu4 style=" position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1000;">

<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Man"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Manufacturing &nbsp; &nbsp; &nbsp;</p></a>
</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Ops"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=showLayer("Reports",'mm8')>
<b>Operations</b></p></a>


</div>
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/SupChn"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Supply Chain &nbsp; &nbsp; &nbsp;</p></a>
</div>

</div>

<div id=Reports style=" position: absolute; border-bottom: 1px solid #274f40; visibility:hidden; z-index: 1001;">
<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Ops/rep"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Reports &nbsp; &nbsp; &nbsp;</p></a>
</div>

<div>
<a class=asd href="/portal/page/portal/ABCEmp/MfgDist/Ops/con"> 
<p class=box style="float: inline;" onmouseout=menuOut(this) onmouseover=menuOver(this)>
&nbsp;Content &nbsp; &nbsp; &nbsp;</p></a>
</div>
</div>


</td>
</tr></table>
</body>
</html>

-Krzysztof

Hello Experts,

I did a website & I am having trouble wit it. In IE8, FF& Chrome, the site works perfectly. But in IE7, the site slows down very much that even the link hover effect doesn't show properly. I believe its some kind of javascript or Ajax request which is causing such delay. Can you guys please help me sort this out....

Here is the site with functionality...
http://tinyurl.com/3qkunvy

Here is the site without functionality but just the gallery is integrated...
http://tinyurl.com/439ejhk

The speed was even better before the Ajax is applied for contents.

Any solutions/fixes please...

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!

So I am trying to create a scrolling device that will allow you to scroll tables left and right. Here is a link:
http://thecaligarmo.com/test/work/move.html

I have it working and it works pretty well, but I can't seem to get it to speed up. I want to be able to control the amount of time it takes, but I can't seem to make it take less than 10 seconds. The core of the moving js is:

Code:

	var maxMove = 820;// Width of Table + margin on table 2
	var duration = 1; // seconds
        var mssTime = duration * 1000 / maxMove;
        var mssLeft = (moveLeft)?0:(maxMove*-1);
      
      function mssMoveDiv(){
        moveDiv();
        
        function moveDiv(){
          if(mssLeft > 0 || mssLeft<maxMove*-1){finishMove(); return;};
          if(moveLeft){mssLeft -= 1;} else {mssLeft += 1;}
          divIn.style.left=mssLeft+'px';
          setTimeout(moveDiv,mssTime);
        }
        
        function finishMove(){
          document.getElementById('pagingTable').parentNode.removeChild(document.getElementById('pagingTable'));
          divIn.style.left='0px'
          newTable.id='pagingTable';
        }
      }

(Note that some parts have been left out [such as table generation and stuff] but all details can be found on the site link posted above)

If you need more details/js/css/html just go to the link above to look at the whole thing. It was a lot so I didn't want to burden you all with EVERYTHING. Here are the links to the files:
HTML: http://thecaligarmo.com/test/work/move.html
JS: http://thecaligarmo.com/test/work/paging.js
CSS: http://thecaligarmo.com/test/work/paging.css

Code:

function initMenu(){
  var menus, menu, text, a, i, CurrentID;
  menus = getChildrenByElement(document.getElementById("menu"));
  CurrentID = document.getElementById("auto");
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
	
  }

  //CurrentID.showMenu; thought this would work but it doesn.t
}

I am modifying a website for a company I am interning at. I have no javascript experience and was just thrown in. I need the menu to open when page is clicked so that it looks like the menu stayed open when you made a selection and the new page loads. I have a id in the html of the pages called "auto" to designate the menu item in the page to be opened. If anyone could help I would be very grateful. I will be keeping a lookout for posts

1) Script Title:
Arrow Side Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...menu-arrow.htm

3.) My Test Pg.
http://macmajor.homeip.net/shadow_test/shadow.html

3) Describe problem:

After customizing this menu to suit my needs, I find that it flickers (and jumps) between headers ONLY in FF (3.0.15) on the Mac. This is also the case with the Demo on Dynamic Drive. For example, if you hold your mouse on a header item and your mouse moves by a slight hair, it automatically jumps and highlights another menu item without moving your mouse (for some even weirder reason, the item it highlights is always 2up from the one your mouse is positioned over). Sometimes it just flickers between them, other times it ‘moves’ and completely highlights the other item in it’s selected state (as if you moved your mouse there).

If you know of a fix, I would certainly appreciate it.

Thanks in advance!
Tracy

I'm pretty new to Javascript and found this menu, which I want for my website.

I came up with the idea of making the links in the back of the circle (i've got a total of 10 links), invisible and put a globe in the middle (as background) - making it look like the links in the back go behind the globe and comes back from behind it again.

I've tried to do this myself with .this.style.invisibility="hidden"; but... i lack skill to do it the right way i guess :P

Does anyone know the solution?

Here's the code of the menu:

Code:

eye={
p:0,x:0,y:0,w:0,h:0,r:0,v:0,s:0,
isVertical:0,a1:0,a2:0,a3:0,
color:'#FFFFFF',
colorover:'#FFFFFF',
backgroundcolor:'#000000',
backgroundcolorover:'#000000',
bordercolor:'#000000',
fontsize:12,
fontfamily:'Arial',
pas:0,
spinmenu:function(){this.p=this.r/this.s;

this.a1=this.a2=this.isVertical?0:Math.PI/2},

spinmenuitem:function(a7,a6,a5){a4=" onclick='window.open(\""+a6+"\""+(a5?(",\""+a5+"\""):",\"_self\"")+")'";

document.write("<div id='spinmenu"+this.a3+"' style='cursor:pointer;cursor:expression(\"hand\");position:absolute;width:"+this.w+"px;left:"+this.h+"px;"+"background-color:"+this.backgroundcolor+";color:"+this.color+";border:1px solid "+this.bordercolor+";font:normal "+this.fontsize+"px "+this.fontfamily+";text-align:center;cursor:default;z-Index:1000;' onmouseover='this.style.color=\""+this.colorover+"\";this.style.backgroundColor=\""+this.backgroundcolorover+"\"'"+ "onmouseout='this.style.color=\""+this.color+"\";this.style.backgroundColor=\""+this.backgroundcolor+"\"'"+a4+">"+a7+"</div>");this.a3++},

muta:function(){a8=document.getElementById("controale");


for(i=0;i<this.a3;i++){a9=document.getElementById("spinmenu"+i+"");

a9s=a9.style;if(this.isVertical){xi=parseInt(this.r*Math.cos(this.a1+i*this.pas))/this.s;

yi=parseInt(this.r*Math.sin(this.a1+i*this.pas));

a10=(this.p+xi)/(2*this.p);

a11=this.fontsize*(this.p+xi)/(2*this.p)+2;

a12=parseInt(100*(this.p+xi)/(2*this.p))}else{xi=parseInt(this.r*Math.cos(this.a1+i*this.pas));

yi=parseInt(this.r*Math.sin(this.a1+i*this.pas))/this.s;

a10=(this.p+yi)/(2*this.p);

a11=this.fontsize*(this.p+yi)/(2*this.p)+2;

a12=parseInt(100*(this.p+yi)/(2*this.p))};

a13=(this.w-20)*a10+20;a14=(this.h-20)*a10+10;

a9s.top=(yi+this.y-a14/2)+"px";

a9s.left=(xi+this.x-a13/2)+"px";

a9s.width=a13+"px";a9s.fontSize=a11+"px";

a9s.zIndex=a12};

a8.style.top=this.y+(this.isVertical?this.r:this.p)+this.h/2+6;

a8.style.left=this.x-a8.offsetWidth/2;

if(this.a1!=this.a2){this.a1=(this.a1>this.a2)?(this.a1-this.pas/this.v):(this.a1+this.pas/this.v);

if(Math.abs(this.a1-this.a2)<this.pas/this.v)

this.a1=this.a2;

setTimeout("eye.muta()",10)}},spinmenuclose:function(){this.pas=2*Math.PI/this.a3;

document.write('<div id="controale" style="position:absolute"><button type="" onclick="eye.a2-=eye.pas;eye.muta()" onfocus="this.blur()">&lt;&lt;</button> <button type="" onclick="eye.a2+=eye.pas;eye.muta()" onfocus="this.blur()">&gt;&gt;</button></div>');eye.muta()}};

function getposOffset(what, offsettype){var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;var parentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}

return totaloffset;
}

Okay everyone, new here, of course, and as much as I hate to be one of those people that don't really know much about a topic at hand and gratuitously seek out the help of those who do, here I am. The upshot is that it's probably something really easy to answer for those who know Javascript already.

I've tried figuring this out but I'm at a loss. I can manage pretty well with CSS, messing around and playing with values to figure out what I need, but I've taken a look at the Javascript and it's completely unapproachable for me. I used a website, http://www.mycssmenu.com/ to create a really nifty dropdown menu, which has a tree structure in Javascript as well as collapse and expand buttons. The great thing is that, for those with Javascript disabled, it still fully works as a CSS drop-down menu.

But I've been asked to modify it. Right now, you click and that's how things expand. But I've been asked to make it so that it will expand simply on hover.And I don't know what to do at all.

Of course I know how to change the colors of the particular fields when you hover, through CSS, but to make it expand simply on hover?

Think anyone can give me some pointers or a bit of help? The website in question is here Psiholog Popa Anca. Great job on the colors though, eh?

Let me know!