Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old October 20th, 2004, 05:01 PM
Registered User
 
Join Date: Oct 2004
Location: , , .
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default Using Caps in Code

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.

Reply With Quote
  #2 (permalink)  
Old October 20th, 2004, 05:18 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

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 ;)
Reply With Quote
  #3 (permalink)  
Old October 21st, 2004, 07:42 AM
Registered User
 
Join Date: Oct 2004
Location: , , .
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.

Reply With Quote
  #4 (permalink)  
Old October 21st, 2004, 11:36 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Help: check the NUM,CAPS,SCROLL key state gmbalaa General .NET 0 August 11th, 2007 07:10 AM
VB: .Exe file, serial code and activation code ivanlaw Pro VB 6 8 July 6th, 2007 05:44 AM
Re: need to convert data entered to all caps flyfish Access 5 March 18th, 2005 12:35 PM
problem to "on caps lock progametically Abhinav_jain_mca General .NET 3 August 5th, 2004 03:06 PM
preserve caps with regexp.replace dhaywirex Classic ASP Basics 4 March 2nd, 2004 12:25 AM



All times are GMT -4. The time now is 08:12 AM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.