Using Caps in Code

gnotq · October 20th, 2004, 05:01 PM

Working through the Beginning JavaScript book in Chapter 12, I tried the IEMenus example. I found that the background & color style effects in the document_onmouseover function only worked when the tag name (in this case "TD") was in caps. As a rule I tend to use lower case for HTML, but found that if I used "td" in the function, it didn't work. I still have the the HTML in lower case, but with the function I used caps for the tag name, and it works. Anyone have a good explanation? I'm looking to avoid this problem in the future.
Thanks.

Snib · October 20th, 2004, 05:18 PM

I don't own the book. May I see the code?

-Snib <><
Try new FreshView 0.2!
There are only two stupid questions: the one you don't ask, and the one you ask more than once ;)

gnotq · October 21st, 2004, 07:42 AM

Here is the code from this example:

<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>

if (!(document.all))
{
   if (document.layers)
   {
      window.location.replace("NNMenus.htm");
   }
   else
   {
      window.location.replace("NoMenus.htm");
   }
}

var woodMenuItems = new Array();
woodMenuItems[0] = new Array();

woodMenuItems[0][0] = "Oak";
woodMenuItems[0][1] = "OakWood.htm";
woodMenuItems[0][2] = "Oak Timber";

woodMenuItems[1] = new Array();
woodMenuItems[1][0] = "Teak";
woodMenuItems[1][1] = "TeakWood.htm";
woodMenuItems[1][2] = "Teak Timber";

woodMenuItems[2] = new Array();
woodMenuItems[2][0] = "Pine";
woodMenuItems[2][1] = "PineWood.htm";
woodMenuItems[2][2] = "Pine Timber";

woodMenuItems[3] = new Array();
woodMenuItems[3][0] = "Yew";
woodMenuItems[3][1] = "YewWood.htm";
woodMenuItems[3][2] = "Yew Timber";

// Second menu
var metalMenuItems = new Array();
metalMenuItems[0] = new Array();

metalMenuItems[0][0] = "Steel";
metalMenuItems[0][1] = "SteelMetal.htm";
metalMenuItems[0][2] = "Steel Girders";

metalMenuItems[1] = new Array();
metalMenuItems[1][0] = "Copper";
metalMenuItems[1][1] = "CopperMetal.htm";
metalMenuItems[1][2] = "Copper Pipes";

metalMenuItems[2] = new Array();
metalMenuItems[2][0] = "Gold";
metalMenuItems[2][1] = "GoldMetal.htm";
metalMenuItems[2][2] = "Gold Ingots";

var bricksMenuItems = new Array();
bricksMenuItems[0] = new Array();

bricksMenuItems[0][0] = "StdHouse";
bricksMenuItems[0][1] = "StdHousebricks.htm";
bricksMenuItems[0][2] = "Standard House Brick";

bricksMenuItems[1] = new Array();
bricksMenuItems[1][0] = "LargeHouseBrick";
bricksMenuItems[1][1] = "LargeHousebricks.htm";
bricksMenuItems[1][2] = "Large House Bricks";

bricksMenuItems[2] = new Array();
bricksMenuItems[2][0] = "BreezeBlock";
bricksMenuItems[2][1] = "BreezeBlock.htm";
bricksMenuItems[2][2] = "Breeze Block";

function createMenu(menuName, menuItems)
{
   var divHTML = '<DIV ID="' + menuName + 'MenuDiv" CLASS="DivMenu"';
   divHTML = divHTML + ' onmouseout="return hideMenu(this)">';

   var tableHTML = '<TABLE BORDER=0 CELLSPACING=1 CELLPADDING=1 ID="'
      + menuName + 'Table">';
   var tableRowHTML = "";
   var rowCount;
   var totalNoRows = menuItems.length;
   for (rowCount = 0; rowCount < totalNoRows; rowCount++)
   {
      tableRowHTML = tableRowHTML + '<TR><TD ID="' +
         menuName + menuItems[rowCount][0] +
        '" RollOver RollOut';
      tableRowHTML = tableRowHTML + ' onclick="goPage(\''
         + menuItems[rowCount][1] + '\')"';
      tableRowHTML = tableRowHTML
         + 'CLASS="TDMenu">' + menuItems[rowCount][2]
         + '</TD></TR>';
   }

   return divHTML + tableHTML + tableRowHTML + '</TABLE></DIV>';
}

function showMenu(menuToShow)
{
   var srcElement = event.srcElement;
   var xPos = parseInt(srcElement.offsetLeft);
   var yPos = parseInt(srcElement.offsetTop);

   menuToShow.style.left = xPos + (srcElement.width)
   menuToShow.style.top = yPos;
}

function hideMenu(menuToHide)
{
   if (event.toElement != menuToHide &&
      menuToHide.contains(event.toElement) == false)
   {
      menuToHide.style.left = -200;
      menuToHide.style.top = -1000;
   }
}
//These are the two functions that use caps for the tag name

function document_onmouseover()
{
   var srcElement = event.srcElement;

   if (srcElement.tagName == "TD" && typeof(srcElement.RollOver) != "undefined")
   {
      srcElement.style.color = "white";
      srcElement.style.backgroundColor ="darkblue";
   }
}

function document_onmouseout()
{
   var srcElement = event.srcElement;
   if (srcElement.tagName == "TD" && typeof(srcElement.RollOut) != "undefined")
   {
      srcElement.style.color = "darkblue";
      srcElement.style.backgroundColor = "darkorange";
   }
}

function goPage(src)
{
   window.location.href = src;
}

document.onmouseover = document_onmouseover;
document.onmouseout = document_onmouseout;
</SCRIPT>

<STYLE>
   .DivMenu {position:absolute;
      left:-200;
      top:-1000;
      width:180;
      z-index:100;
      background-color:darkorange;
      border: 4px groove lightgrey;
   }

   .TDMenu {
      color:darkblue;
      font-family:verdana;
      font-size:70%;
      width:100%;
      cursor:default;
   }
</STYLE>
</HEAD>

<BODY>
<SCRIPT LANGUAGE=JavaScript>
   document.write(createMenu('Wood', woodMenuItems))
   document.write(createMenu('Metal', metalMenuItems))
   document.write(createMenu('Bricks', bricksMenuItems))
</SCRIPT>

<IMG ID="WoodMenuImage"
   SRC="WoodButton.gif"
   STYLE="position:absolute;left:10;top:75"
   onmouseover="return showMenu(WoodMenuDiv)"
   onmouseout="return hideMenu(WoodMenuDiv)">
<IMG ID="MetalMenuImage"
   SRC="MetalButton.gif"
   STYLE="position:absolute;left:10;top:115"
   onmouseover="return showMenu(MetalMenuDiv)"
   onmouseout="return hideMenu(MetalMenuDiv)">

<IMG ID="BricksMenuImage"
   SRC="BricksButton.gif"
   STYLE="position:absolute;left:10;top:155"
   onmouseover="return showMenu(BricksMenuDiv)"
   onmouseout="return hideMenu(BricksMenuDiv)">

</BODY>
</HTML>

Thanks for your help.

joefawcett · October 21st, 2004, 11:36 AM

In my experience IE shows element names as UPPERCASE even when you write lowercase. It has its own in-memory representation of the DOM, another quirk is that it removes attribute quotes when the contents do not contain spaces. To see just type:

Code:

javascript:alert(document.documentElement.outerHTML)

into the address bar, pick a small page, not one with rwams of markup :)

When testing I always do something like this:

Code:

if (srcElement.tagName.toLowerCase() == "td")

--

Joe