Using setTimeout

PortGuy · March 23rd, 2004, 03:00 PM

I'm trying to delay invoking a function (which hides a div tag and swaps an image) by 1 second, using the setTimeout() method.

I've tried this:

function hideMenu(menuName, imageTagName, imageReturnFileName)
{
  menuName.style.visibility = "hidden";
  document.images[imageTagName].src=imageReturnFileName;
  setTimeout("hideMenu(menuName, imageTagName, imageReturnFileName)", 1000);
}

I've tried this:
function hideMenu(menuName, imageTagName, imageReturnFileName)
{
  setTimeout("delayHideMenu(menuName, imageTagName, imageReturnFileName)", 1000);
}

function delayHideMenu(menuName, imageTagName, imageReturnFileName)
{
  menuName.style.visibility = "hidden";
  document.images[imageTagName].src=imageReturnFileName;
}

And I've tried this:
function hideMenu(menuName, imageTagName, imageReturnFileName)
{
  var delay = delayHideMenu(menuName, imageTagName, imageReturnFileName)
  setTimeout("delay", 1000);
}

function delayHideMenu(menuName, imageTagName, imageReturnFileName)
{
  menuName.style.visibility = "hidden";
  document.images[imageTagName].src=imageReturnFileName;
}

I can't seem to get this. By the way, this is for IE6 only - in the Intranet environment.

Will somebody please help.

Thanks.

PortGuy

Snib · March 23rd, 2004, 03:55 PM

And what is the result of these tries?

Wait - I know the third one won't work because setTimeout("delay") does not specify a function.

Please tell me what happens?

----------
---Snib---
----------

<><

PortGuy · March 23rd, 2004, 07:06 PM

The result of these tries? As follows ...

#1. The function executes without delay.

#2. The function does not execute at all.

#3. The function executes without delay.

PortGuy

Snib · March 23rd, 2004, 07:15 PM

Gosh, I don't know.... two of them should work.....

http://msdn.microsoft.com/workshop/a...settimeout.asp

----------
---Snib---
----------

<><

joefawcett · March 24th, 2004, 07:13 AM

Code:

function hideMenu(menuName, imageTagName, imageReturnFileName)
{
  var sCommand = "delayHideMenu(" + menuName + ", " +  imageTagName + ", " + imageReturnFileName + ")";
  alert(sCommand); //To test if it looks right 
   setTimeout(sCommand, 1000);
}

--

Joe

PortGuy · March 24th, 2004, 09:36 PM

Joe,

Sadly, your solution did not work.

Although the "alert" statement indicated that the correct values would be passed, the "delayHideMenu" function did not execute.

Any suggestions, thoughts?

Thanks.
- Bradley Wilson

joefawcett · March 25th, 2004, 05:01 AM

I didn't check the code in the called function:)
You are passing a string and using it as an object, you need to convert 'menuName' to the actual menu. Id 'menuName' the id of the element or the name? If it's the name in a form named 'myForm' you need:

Code:

function delayHideMenu(menuName, imageTagName, imageReturnFileName)
{
  var oMenu = document.myForm["menuName"];
  oMenu.style.visibility = "hidden";
  document.images[imageTagName].src=imageReturnFileName;
}

If it's the id:

Code:

function delayHideMenu(menuName, imageTagName, imageReturnFileName)
{
  var oMenu = document.getElementById("menuName");
  oMenu.style.visibility = "hidden";
  document.images[imageTagName].src = imageReturnFileName;
}

--

Joe

PortGuy · March 25th, 2004, 02:06 PM

Joe,

It's a div id. But it's a little more complicated than that. The value is passed via two different methods: from within the HTML code, as an object within the event handler; but also, from within dynamically written HTML code, as a concatenation of two strings.

I still can't get this thing right - perhaps because, as a novice JS scripter, I'm in a little over my head with trying to build a lean, pop-up menu navigation code.

At this point, perhaps it's best to post the entire HTML file, with the style sheet and JavaScript included. I've highlighted in blue to show "from where" and "to where" the value is passed.

But if you could again review what I'm trying to do, and provide me with additional guidance, I will be eternally grateful, and would buy you a beer, if I was living in the U.K.

Regards.

Bradley Wilson

-------

<html>
<head>
<title>PANYNJ - eNet - Forecasting and Capital Planning - About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.divMenuH { position:absolute; visibility: hidden; z-index:900; background-color: #e3e3e3; border-left: 1px solid #737373; border-right: 1px solid #737373; border-top: 1px solid #848484; }
.ln_table { background-color: #e3e3e3; }
.ln_td { height:18px; }
.ln_div { height:18px; background-color: #e3e3e3; font: normal normal 400 11px Verdana, sans-serif; color: #000000; text-align: left; text-decoration: none; letter-spacing: 0.00em; line-height:1.2em; padding-top:2px; left: 0px; top: 0px; cursor:hand; background-image: url(../img/separator_18.gif); background-repeat: repeat }
.ln_div_h { height:18px; background-color: #b6b6b6; font: normal normal 400 11px Verdana, sans-serif; color: #000000; text-align: left; text-decoration: none; letter-spacing: 0.00em; line-height:1.2em; padding-top:2px; left: 0px; top: 0px; cursor:hand; background-image: url(../img/separator_18.gif); background-repeat: repeat }
</style>

<script language="JavaScript">
// BEGIN MENU ARRAYS
var arrowTN = "<img src='../img/arrow.gif' width='17' height='15' border='0' align='top'>";

// Departments Menu
var dep = new Array();

dep[0] = new Array();
dep[0][0] = "Au";
dep[0][1] = "/audit/html/";
dep[0][2] = arrowTN + "Audit";

dep[1] = new Array();
dep[1][0] = "Av";
dep[1][1] = "/aviation/html/";
dep[1][2] = arrowTN + "Aviation";

dep[2] = new Array();
dep[2][0] = "Co";
dep[2][1] = "/comptrollers/html/";
dep[2][2] = arrowTN + "Comptrollers";

dep[3] = new Array();
dep[3][0] = "FoCaPl";
dep[3][1] = "/ofcp/html/";
dep[3][2] = arrowTN + "Forecasting & Capital Planning";

// Employee News Menu
var emp = new Array();

emp[0] = new Array();
emp[0][0] = "EmBu";
emp[0][1] = "/employee_news/html/employee_bulletins.html";
emp[0][2] = arrowTN + "Employee Bulletins";

emp[1] = new Array();
emp[1][0] = "EmDi";
emp[1][1] = "/employee_news/html/empl_discount_prog.html";
emp[1][2] = arrowTN + "Employee Discount Program";

emp[2] = new Array();
emp[2][0] = "InThNe";
emp[2][1] = "/in_the_news/html/";
emp[2][2] = arrowTN + "In The News ("The Clips")";

// Library Menu
var lib = new Array();

lib[0] = new Array();
lib[0][0] = "Bu";
lib[0][1] = "/library/html/business.html";
lib[0][2] = arrowTN + "Business";

lib[1] = new Array();
lib[1][0] = "En";
lib[1][1] = "/library/html/engineering.html";
lib[1][2] = arrowTN + "Engineering";

lib[2] = new Array();
lib[2][0] = "GeRe";
lib[2][1] = "/library/html/gen_reference.html";
lib[2][2] = arrowTN + "General Reference";

// Resources Menu
var res = new Array();

res[0] = new Array();
res[0][0] = "AcCoVa";
res[0][1] = "/resources/cf/cv_account_code.cfm";
res[0][2] = arrowTN + "Account Code Validation";

res[1] = new Array();
res[1][0] = "En";
res[1][1] = "/resources/html/bs_home.html";
res[1][2] = arrowTN + "Bookshelf";

res[2] = new Array();
res[2][0] = "EtStGu";
res[2][1] = "/hrd/pdf/ethics.pdf";
res[2][2] = arrowTN + "Ethical Standards Guide";

res[3] = new Array();
res[3][0] = "PACoSt";
res[3][1] = "/comm_standards/html/";
res[3][2] = arrowTN + "PA Communications Standards";

// Search Menu
var sea = new Array();

sea[0] = new Array();
sea[0][0] = "AcCoVa";
sea[0][1] = "#";
sea[0][2] = arrowTN + "Advanced Search";

sea[1] = new Array();
sea[1][0] = "En";
sea[1][1] = "#";
sea[1][2] = arrowTN + "Quick Search";

// BEGIN FUNCTIONS

function createMenu(menuName, menuItems, x, y, w, imageTagName, imageHoverFileName, imageReturnFileName)
{
  var tags = "'" + imageTagName + "'";
  var imageHover = "'" + imageHoverFileName + "'";
  var imageReturn = "'" + imageReturnFileName + "'";
  var divHTML = '<div id="' + menuName + 'MenuDiv" class="divMenuH" style="left:'+x+'; top:'+y+'; width:'+w+'" onMouseOver="showMenu(' + menuName + 'MenuDiv,' + tags + ',' + imageHover + ')" onMouseOut="hideMenu(' + menuName + 'MenuDiv,' + tags + ',' + imageReturn + ')">';
  var tableHTML = '<table border="0" cellspacing="0" cellpadding="0" class="ln_table" id="' + menuName + 'Table">';
  var tableRowHTML = "";
  var rowCount;
  var totalNoRows = menuItems.length;
  for (rowCount = 0; rowCount < totalNoRows; rowCount++)
  {
    tableRowHTML = tableRowHTML + '<tr align="left" valign="middle"><td class="ln_td" style="width:'+w+'"><a href="' + menuItems[rowCount][1] + '"><div id="' + menuName + menuItems[rowCount][0] + '" class="ln_div" style="width:'+w+'" onMouseOver="swapClass(this,\'ln_div_h\')" onMouseOut="swapClass(this,\'ln_div\')">' + menuItems[rowCount][2] + '</div></a></td>';
  }
  return divHTML + tableHTML + tableRowHTML + '</table></div>';
}

function showMenu(menuName, imageTagName, imageHoverFileName)
{
  menuName.style.visibility = "visible";
  document.images[imageTagName].src=imageHoverFileName;
}

function hideMenu(menuName, imageTagName, imageReturnFileName)
{
  menuName.style.visibility = "hidden";
  document.images[imageTagName].src=imageReturnFileName;
}

function swapImageHover(imageTagName, imageHoverFileName)
{
  document.images[imageTagName].src=imageHoverFileName;
}

function swapImageReturn(imageTagName, imageReturnFileName)
{
  document.images[imageTagName].src=imageReturnFileName;
}

function swapClass(obj, new_style)
{
  obj.className = new_style;
}

// END pop-up navigation script
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#ffffff" >

<script language=JavaScript>
  document.write(createMenu('Departments', dep, 223, 14, 205,'top_nav','../img/departments_hover.gif','../img/top_nav.gif'))
  document.write(createMenu('Employee', emp, 327, 14, 198,'top_nav','../img/employee_news_hover.gif','../img/top_nav.gif'))
  document.write(createMenu('Library', lib, 442, 14, 140,'top_nav','../img/library_hover.gif','../img/top_nav.gif'))
  document.write(createMenu('Resources', res, 508, 14, 202,'top_nav','../img/resources_hover.gif','../img/top_nav.gif'))
  document.write(createMenu('Search', sea, 592, 14, 128,'top_nav','../img/search_hover.gif','../img/top_nav.gif'))
</script>

<table width="740" border="0" cellpadding="0" cellspacing="0" bgcolor="#1e4c88">
  <tr align="left" valign="top">
    <td width="208" height="15"><img src="../img/shim.gif" width="208" height="15" border="0"></td>
    <td width="532" height="15"><img src="../img/top_nav.gif" name="top_nav" width="532" height="15" border="0" usemap="#top_navMap"></td>
  </tr>
  <tr align="left" valign="top">
    <td width="740" height="53" colspan="2"><img src="../img/shim.gif" width="740" height="53" border="0"></td>
  </tr>
</table>

<map name="top_navMap">
  <area shape="poly" coords="0,0,107,0,118,15,12,15" alt="Departments" onMouseOver="showMenu(DepartmentsMenuDiv,'top_nav' ,'../img/departments_hover.gif')" onMouseOut="hideMenu(DepartmentsMenuDiv,'top_nav', '../img/top_nav.gif')">
  <area shape="poly" coords="107,0,223,0,234,15,118,15" alt="Employee News" onMouseOver="showMenu(EmployeeMenuDiv,'top_nav','. ./img/employee_news_hover.gif')" onMouseOut="hideMenu(EmployeeMenuDiv,'top_nav','../img/top_nav.gif')">
  <area shape="poly" coords="223,0,287,0,298,15,234,15" alt="Library" onMouseOver="showMenu(LibraryMenuDiv,'top_nav','../img/library_hover.gif')" onMouseOut="hideMenu(LibraryMenuDiv,'top_nav','../img/top_nav.gif')">
  <area shape="poly" coords="287,0,370,0,387,15,298,15" alt="Resources" onMouseOver="showMenu(ResourcesMenuDiv,'top_nav',' ../img/resources_hover.gif')" onMouseOut="hideMenu(ResourcesMenuDiv,'top_nav','. ./img/top_nav.gif')">
  <area shape="poly" coords="370,0,438,0,451,15,387,15" alt="Search" onMouseOver="showMenu(SearchMenuDiv,'top_nav','../img/search_hover.gif')" onMouseOut="hideMenu(SearchMenuDiv,'top_nav','../img/top_nav.gif')">
  <area shape="poly" coords="438,0,532,0,532,15,451,15" alt="eNet Home" a href="/home/html/" onMouseOver="swapImageHover('top_nav','../img/e_net_hover.gif')" onMouseOut="swapImageReturn('top_nav','../img/top_nav.gif')">
</map>

</body>
</html>