We help IT Professionals succeed at work.

Help me find the origin of the e variable

speedlearner1
on
358 Views
Last Modified: 2010-04-21
I bought a book on CSS and they gave me this menu code:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtnml1-strict.dtd>
<html xmlns=http://www.w3.org/l999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/htm1; charset=utf-8 /> <title>CSS, DHTML &amp; Ajax | Drop-down Menu</title>
<script type=text/javascript>
var objNavMenu = null;
 var prevObjNavMenu = null;
var prevObjDropMenu = null;
var numDropMenu 3;

// link styles
var bgLinkColor #000;
var bgLinkHover = #fOO
var bgLinkActive = #900
var linkColor = #fff
var linkHover #fff
var linkActive #fff
var islE = null;
if (navigator. appName.indexOf( Microsoft Internet Explorer) !-1) isIE=1;
function initDropMenu () {
     document.onclick = hideDropMenu;
     for (i=l; i<=numDropMenu; i++) {
     menuName = dropMenu + i;
     navName = navMenu + i;
     objDropMenu =
          document. getElementByld(menuName);
     objNavMenu =
           document. getElementByld(navName);
     objDropMenu.style.visibility = hidden;
     objNavMenu .onmouseover = showDropMenu;
     objNavMenu.onmouseout = menuOut;
     objNovMenu.onclick = showDropMenu;
     objNavMenu = null;
     return; }
function showDropMenu(e) {
     menuName = drop +
          this.id.substring(3,this.id.length);
     objDropMenu =
          document. getElementByld(menuName);
     if (prevObjDropMenu == objDropMenu) {
          hideDropMenu();
          return;
      }
     if (prevObjDropMenu != null)
          hideDropMenu();
objNovMenu =
     document.getElementByld(this.id);
if ((prevObjNavMenu != objNavMenu ) II
    (prevObjDropMenu == null))
   { objNavMenu.style.color linkActive;
    objNovMenu . style. backgroundColor =
         bgLinkActive;
if (objDropMenu) {
     xPos = objNavMenu.offsetParent.
     offsetLeft + objNavMenu.offsetLeft;
yPos = objNavMenu.offsetParent.
     offsetTop + objNavMenu.offsetParent.
     offsetHeight;

if (islE) {
yPos -= 1;
xPos - 6;
}
objDropMenu.style.left xPos + px
objDropMenu.sty[e.top = yPos + px;
objDropMenu.style.visibility =
     visible;
prevObjDropMenu = objDropMenu;
prevObjNavMenu = objNavMenu;
   }
}
function hideDropMenu() {
     document.onclick = null;
     if (prevObjDropMenu) {
     prevObjDropMenu.style.visibility =
          hidden;
     prevObjnropMenu = null; prevObjNavMenu.style.color =
          linkColor;
     prevObjNavMenu . style. backgroundColor = bgLinkColor;
}
objNavMenu = null; }
window. onload=initDropMenu;
//
</script>
<style type=text/css media=screen> body { url(alice23.gif) no-repeat 0px 8px; }
h1 {
     font:small-caps bold italic 2.5em
          Georgia, Times New Roman, times, serif;
          color: red; }
h2 {
     color:#999; }
.page { position: relative; top: 190px; left: 165px; width: 480px; }
#menuBar {
     display: block;
     margin-bottom: 5px;
     position: relative;
     top: 0px;
     left: 0px;
     right: 0px;
     width: 99%;
     overflow: hidden;
     background-color: #000; }
.menuheader {
     color: #fff;
     font-size: 12px;
     font-family: arial, Helvetica, sans-serif;
     font-weight: bold;
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
     padding: 5px;
     margin: 0px;
     padding-right: 15px;
     display: inline;
     position: relative;
     background-color: #000;
     border-right: 1px solid #000000; }
.menudrop {
     position: absolute;
     visibility: hidden;
     z-index: 1000;
     top: 6Opx;
     left: 0;
     width: i75px;
     height: auto;
     margin: 0;
     padding: 0;
     color: #999999;
     font-size: 12px;
     fontfamily: ariel, Helvetica, sans-serif;
     background-color: #ffffff;
     background-repeat: repeat;
     border-style: solid;
     border-width: 0 1px 1px;
     border-color: #003365; }
.menuDrop a {
     display: block;
     text-align: left;
     padding: 2px 5px;
     border-top: 1px solid #ccc;
     text-decoration: none; }
.menuDrop a:link {
     color: #f00; }
.menuDrop a:visited {
    color: #f00; }
.menuDrop a:hover {
     color: #fff;
     background-color: #fOO; }
.menuDrop a:active {
      color: #ffffff;
      backgroundcolor: #cOO; }
</style>
</head>
<body>
<div id=menuBar>
<div jd.navMenu1
      Class=menuHeader>Part I</div>
 <div id= navMenu2
      class=menuHeader>Part 11</div>
 <div id=navMenu3
       classmenuHeader>Part III</div></duv>
<div id=dropMenu1° class=menuDrop>
      <a href=chOl.html>Down The Rabbit Hole</a>
      <a hrefch02.html>The Pool of Tears</a>
     <a href=ch03.html>A Caucus Race and a Long Tale</a>
     <a href= chO4.htmlThe Rabbit Sends in a Little Bill</a>
</div>
<div id=dropMeflu2 class=menuDrop>
<a href=chO5.html onfocusif (this.blur) this.blur();>Advice from a Caterpillar</a>
 <a href=ch06.html>Pig and Pepper</a>
 <a href=ch07.html>A Mad Tea-Party</a>
<div iddropMenu3 class=menuDrop>
<a href,=ch08.html>The Queens Croquet Ground</a>
<a href=chO9.html>The Mock Turtles Story</a>
<a href=ch10.html>The Lobster Quodrille</a>
<a href=ch11.html> Who Stole The Tarts?</a>
<a href=ch12.html>Alices Evidence</a>
 </div>
<div class=page>
<h1>ALICES ADVENTURES IN WONDERLAND</h1>
-- Lewis Carroll
<h2>TI-IE MILLENNIUM FULCRUM EDITION 3.0</h2>
 </div>
</body></html>

In functiion showDropMenu, they have a variable "e".  The "e" appears again in a function which they say is in this code, but I can't find.  The function is menuOut.  Please find menuOut and tell me where the "e" comes from.  Also tell me what the value of "e" is.  I am very puzzled.
Comment
Watch Question

Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Is the value of e the value of objNavMenu.onmouseover or some other value?  Please explain further.  Your answer sounds too greek to me.
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
So in e.clientX, the e is the object and the clientX is the property of the object.  And a value is assigned to the property clientX, right?  That explains a bunch.  But it still doesn't explain where the function menuOut disappeared to.  Is there a function or did they just make that up?  Or better yet, did they omit a function that they should have had?  
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
I went to the author's website and downloaded his code.  I found the missing code.  Here it is:

function menuOut (e) {
      document.onclick = hideDropMenu;
      outObjNavMenu = document.getElementById(this.id);
      if (outObjNavMenu != objNavMenu) {
            outObjNavMenu.style.color = linkColor;
            outObjNavMenu.style.backgroundColor = bgLinkColor;
      }
}
I will let the author know that he left out this code.  It is supposed to go between funchtion initDropMenu ()  and function showDropMenu.  I'm guessing that in the codes that have the e event object that the word this represents the e.  Let me know if I am correct.

Commented:
No, this represents the object that is binded to an event
in the code there is a line setting event handler :

  objNavMenu.onmouseout = menuOut;

so - the menuOut function handles mouse out events for objNavMenu object. Therefore 'this' in menuOut function will refer to objNavMenu. (which is in fact a HTML element)

Author

Commented:
I agree that this code had some messed up elements due to an OCR.  I went to the website and got the correct code.  But you are answering a lot of questions and I thank you.  I admit that I have had no formal web training.  I have read a lot of books on the subject, but I have taken no classes as of yet.  Let me see if I have this correct.  objNavMenu is an object and onmouseout is a property of that object.  The value of that property is stored in the variable menuOut.  In function showDropMenu(e) there is a statement this.id.substring(3,this.id.length)  In the statement, this is an object (but I'm not sure which one), id is a property and substring is a subproperty.  So far so good.  but what is the 3? and what is this.id.length?  Thanks again for your help.

Commented:
facts:

each element of a web page <div>, <a> whatever is represented in Javascript by an object
so .. if you have a <div id="my_div">...</div>
in javascript it is accessible through object = document.getElementById('my_div')
then you can access object properties like this : object.id object.style and so on (object.id will produce 'my_div', object.style will produce an array)
if a property of an object is another object (object document has a property firstChild which usually is a representation of a <html> element)
you can access it like this:
document.firstChild (and further - access properties of object which is a first child of document - document.firstChild.id)

objects can also contain methods - like method substring.
every string in javascript has a certain set of methods
you can for example call:
"my_string".substring(3,9); (what will produce "string" - a substring from 3rd to 9th letter)

But ... to complicate things a bit - method is also sort of an object. do you can assign it to another object.
in an example you provided there is a method menuOut (not in the initial example, but you said you've found it eventually)
it's probably declared like this:

function menuOut(e){...}
now you have an div object like the one in my example above - it has a default method onmouseover which does nothing ;)
you can assign your menuOut method to an onmouseover property of a div object and this method will be called when a user hovers a mouse over this div element on a page ;)

hope this clarifies a bit ;)

Author

Commented:
I've sent the whole corrected code.  I think I have this now.  The following are objects:  <div id=menuBar>, <div id=dropMenu1>,<div id=dropMenu2>,<div id=dropMenu3>, <div class=Page>.

The id's they are picking up are menuBar, dropMenu1, dropMenu2, dropMenu3.  Document is another object.  getElementById is a property of Document.

Now I have recently learned from Visual Basic 2005 that even strings are being treated as objects.  I presume that is the case with objDropMenu and objNavMenu.  The reason why I think this is because there is a For Next statement which not only assigns three different values to objDropMenu and objNavMenu, but then gives them properties and methods (Such as style.visibility or onmouseover).

So in the function showDropMenu, e represents a division tag.  That means this.id.substring represents the substring of the id of e (which is the object being passed to the function).  But if you start the substring at position 3 and declare that it should read the id from position three to the end of the string, then you would get pMenu1 or pMenu2, or pMenu3, which doesn't make sense.  Please clarify.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS, DHTML &amp; Ajax | Drop-down Menu</title>
<script type="text/javascript">
var objNavMenu = null;
var prevObjNavMenu = null;
var prevObjDropMenu = null;
var numDropMenu = 3;
////// link styles
var bgLinkColor = '#000';
var bgLinkHover = '#f00'
var bgLinkActive = '#900'
var linkColor = '#fff'
var linkHover = '#fff'
var linkActive = '#fff'
 
var isIE = null;
if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) isIE=1;
 
function initDropMenu () {
	document.onclick = hideDropMenu;
	for (i=1; i<=numDropMenu; i++) {
		menuName = 'dropMenu' + i;
		navName = 'navMenu' + i;
		objDropMenu = document.getElementById(menuName);
		objNavMenu = document.getElementById(navName);
		objDropMenu.style.visibility = 'hidden';
		objNavMenu.onmouseover =  showDropMenu;
		objNavMenu.onmouseout = menuOut;
		objNavMenu.onclick = showDropMenu;
	}
	objNavMenu = null;
	return;
}
 
 
function menuOut (e) {
	document.onclick = hideDropMenu;
	outObjNavMenu = document.getElementById(this.id);
	if (outObjNavMenu != objNavMenu) {
		outObjNavMenu.style.color = linkColor;
		outObjNavMenu.style.backgroundColor = bgLinkColor;
	}
}
 
function showDropMenu(e) {
	menuName = 'drop' + this.id.substring(3,this.id.length);
	objDropMenu = document.getElementById(menuName);
	if (prevObjDropMenu == objDropMenu) {
			hideDropMenu();
		return;
	}
	if (prevObjDropMenu != null) hideDropMenu();
	objNavMenu = document.getElementById(this.id);
	if ((prevObjNavMenu != objNavMenu ) || (prevObjDropMenu == null)) {
		objNavMenu.style.color = linkActive;
		objNavMenu.style.backgroundColor = bgLinkActive;
	}
	
	if (objDropMenu) {
		xPos = objNavMenu.offsetParent.offsetLeft + objNavMenu.offsetLeft;
		yPos = objNavMenu.offsetParent.offsetTop + objNavMenu.offsetParent.offsetHeight;
		if (isIE) {
			yPos -= 1;
			xPos -= 6;
		}
		objDropMenu.style.left = xPos + 'px';
		objDropMenu.style.top = yPos + 'px';
		objDropMenu.style.visibility = 'visible';
		prevObjDropMenu = objDropMenu;
		prevObjNavMenu = objNavMenu;
	}
 
}
 
function hideDropMenu() {
	document.onclick = null;
	if (prevObjDropMenu) {
		prevObjDropMenu.style.visibility = 'hidden';
		prevObjDropMenu = null;
		prevObjNavMenu.style.color = linkColor;
		prevObjNavMenu.style.backgroundColor = bgLinkColor;
	}
	objNavMenu = null;
}
 
 window.onload=initDropMenu;
 
		</script>
<style type="text/css" media="screen">
body  {
	font-size: 1em;
	font-family: Georgia, 'Times New Roman', times, serif;
	color: #000000;
	margin: 0px;
	padding: 0px;
	background: white url(alice23.gif) no-repeat 0px 8px;
}
 
h1 {
	font:small-caps bold  italic 2.5em Georgia, 'Times New Roman', times, serif;
	color: red;
}
 
h2  {
	color:#999;
}
 
.page {
	position:	relative;
	top:	190px;
	left:	165px;
	width:	480px;
}
 
#menuBar {
	display: block;
	margin-bottom: 5px;
	position: relative;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 99%;
	overflow: hidden;
	background-color: #000;
	}
 
.menuHeader {
	color: #fff;
	font-size: 12px;
	font-family: arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	padding: 5px;
	margin: 0px;
	padding-right: 15px;
	display: inline;
	position: relative;
	background-color: #000;
	border-right: 1px solid #000000;
	}
 
.menuDrop {
	position: absolute;
	visibility: hidden;
	z-index: 1000;
	top: 60px;
	left: 0;
	width: 175px;
	height: auto;
	margin: 0;
	padding: 0;
	color: #999999;
	font-size: 12px;
	font-family: arial, Helvetica, sans-serif;
	background-color: #ffffff;
	background-repeat: repeat;
	border-style: solid;
	border-width: 0 1px 1px;
	border-color: #003365
}
 
.menuDrop a {
	display: block;
	text-align: left;
	padding: 2px 5px;
	border-top: 1px solid #ccc;
	text-decoration: none
	}
 
.menuDrop a:link {
	color: #f00;
	}
 
.menuDrop a:visited {
	color: #f00;
	}
 
.menuDrop a:hover {
	color: #fff;
	background-color: #f00;
	}
 
.menuDrop a:active {
	color: #ffffff;
	background-color: #c00;
	}
</style>
</head>
<body>
 
<div id="menuBar">
  <div id="navMenu1" class="menuHeader">Part I</div>
  <div id="navMenu2" class="menuHeader">Part II</div>
  <div id="navMenu3" class="menuHeader">Part III</div>
</div>
<div id="dropMenu1" class="menuDrop">
<a href="ch01.html" onfocus="if (this.blur) this.blur();">Down The Rabbit-Hole</a>
<a href="ch02.html" onfocus="if (this.blur) this.blur();">The Pool of Tears</a>
<a href="ch03.html" onfocus="if (this.blur) this.blur();">A Caucus-Race and a Long Tale</a>
<a href="ch04.html" onfocus="if (this.blur) this.blur();">The Rabbit Sends in a Little Bill</a>
</div>
<div id="dropMenu2" class="menuDrop">
<a href="ch05.html" onfocus="if (this.blur) this.blur();">Advice from a Caterpillar</a>
<a href="ch06.html" onfocus="if (this.blur) this.blur();">Pig and Pepper</a>
<a href="ch07.html" onfocus="if (this.blur) this.blur();">A Mad Tea-Party</a>
</div>
<div id="dropMenu3" class="menuDrop">
<a href="ch08.html" onfocus="if (this.blur) this.blur();">The Queen's Croquet-Ground</a>
<a href="ch09.html" onfocus="if (this.blur) this.blur();">The Mock Turtle's Story</a>
<a href="ch10.html" onfocus="if (this.blur) this.blur();">The Lobster Quadrille</a>
<a href="ch11.html" onfocus="if (this.blur) this.blur();">Who Stole The Tarts?</a>
<a href="ch12.html" onfocus="if (this.blur) this.blur();">Alice's Evidence</a>
</div>
 
<div class="page">
	
	<h1>ALICE'S ADVENTURES IN WONDERLAND</h1>
	Lewis Carroll
	<h2>THE MILLENNIUM FULCRUM EDITION 3.0</h2>
</div>
</body>
</html>

Open in new window

Author

Commented:
And another thing.  Why not just use e instead of this all the time.  I think it would be less confusing.

Commented:
ok ....
first:
you wrote:  getElementById is a property of Document. - no it's not - it's a method - it allows you to get any object that is on the page and has an ID

second:
'e' and 'this' are not the same...
consider the following:

<input type="button" name="john" onclick="clickhandler(e)"/>
<input type="button" name="jack" onclick="clickhandler(e)"/>

and script:
function clickhandler(e){
 alert(this.name);
 alert(e.clientX);
}

the first popup window will display either "john" or "jack" depending on which button you click the second - some number
'this' in click event handler is an object that has been clicked. e - is always an event object.

so in your code:
menuName = 'drop' + this.id.substring(3,this.id.length);
this  refers to one of navMenu objects - they have IDs navMenu1, navMenu2, navMenu3
"navMenu1".substr(3,length) produces -> Menu1 (just cuts out first three letters)
and the final result of menuName = 'drop' + this.id.substring(3,this.id.length); will be dropMenu1, dropMenu2 or dropMenu3 - and these are the divs that schould be displayed if you hover over the menu item ;)

Author

Commented:
I have to admit my translatiion is a little off.  I thought that this.id.substring picked up the id of a dropMenu division object.  But it's not is it?  I think it is the division id navMenu.  That's why it had to start at position 3.  That way it removes the nav part of navMenu.  Further down in the instructions it attaches the word drop to Menu to get the sub menu.  But why use the word this?  Shouldn't it be e.id.substring?  That would be less confusing.

Commented:
no no no ;)
'this' - yes you are correct - is a navMenu object.
but 'e' isn't !! e is an independent object that has little to do with navMenu.
e doesn't have 'id' property.

There is a firefox plugin - it's called FireBug - it allows you to debug javascript, run it line by line and view the current values of all objects during debug - give it a try and see what values do have 'this' and 'e' in that function when it's running.

Author

Commented:
If e is an event, then I take it that the event it is referring to is the onclick event of objNavMenu (which can be found in the function initDropMenu).  Therefore, the statement objNavMenu.onclick = showDropMenu is sort of like an old goto statment that you used to find in Visual Basic, right?  That would make sense.  I guess it had to be e because there is also a statement that says objNavMenu.onmouseover = showDropMenu and there would be no way for the showDropMenu function to know whether the onclick or onmouseover event was triggered, right?  I hope that I am on the right trail.  

If not, please clarify.  Maybe you can use a Visual Basic eqivalent that would help me understand better.  I have followed the BASIC language since it was GW BASIC.  I know that I am so close to cracking this code.  

Author

Commented:
I haven't heard from anyone in a long time.  I take it that objNavMenu.onmouseover and objNavMenu.onclick are being represented by the e.  I'm such an old programmer that I wasn't aware that you could store an event in a variable.  This makes a lot of sense to me now.  I take it that the for next statement in function initDropMenu sets up two arrays.  The first one being objDropMenu and the second one being objNavMenu.  Have I finally got all of this correct?  I hope so.  Menus in JavaScript can be very complicated.  I almost wish VBScript had a similar code that wouldn't require server processing.  Any ideas?

Commented:
Which next two statements are you refering to ?

i don't know basic/vb to well but let me try to explain this:

i have a function called a(). when i do something like this someDiv.onclick then it is like i was saying to a browser - please call the function a() when user clicks on someDiv.

in vb my function would look something like this a(mousepositionx, mousepositiony, buttonstate,rightbuttonstate, ....... many more)
and browser would pass all those parameters to my function
in JS however it looks like this a(e) where 'e' is an object and all those 'mousepositionx' , 'mousepositiony' and so on are fields inside 'e'.

hope it clarifies a bit

Author

Commented:
Thanks to you and a chapter I didn't bother to read and should have in my book, I think I understand.  There was a chapter in my book on event binding.  From what I understand, they are actually storing an event in an object.  So I take it that the translation of objNavMenu.onmouseover =showDropMenu is really when someone mouses over the object objNavMenu, then function showDropMenu is invoked.  Roughly the same as saying if someone mouses over objNavMenu, then "go to" functiion showDropMenu.  A statement which I used to use in GWBASIC.

That would mean that e in function showDropMenu is either onmouseover or onclick depending on which action the user took.  That's why the variable e is used.  Because we don't know whether the user moused over the object or clicked the object.

Now all I have to solve is a linkactive statement that occurs later in function showDropMenu.  That is something new to me.  Never heard of it.  Can you translate what that is doing?

Commented:
ok, so about this:
objNavMenu.style.color = linkActive;
objNavMenu.style.backgroundColor = bgLinkActive;

objNavMenu is a div - a html tag - a page element and a javascript object - all at the same time (it's all the same, just different representation)
every div has a style property you can set it in html like this <div style="float:left;background:red ; .....">..</div>
but you can also set it through javascript.
style is an associative array - meaning that it stores values that are bound to certain keys
in JS you can access associative arrays in two ways
if you have a key, a value and an array than both statements are correct (assigning a value to a key in an array)

array.key = value
array[key] = value;

so .. what objNavMenu.style.color = linkActive; does really is it sets the value of 'color' in style property od an objNavMenu div (effectivly changing the color of a font for this div)
the linkActive value is set at the top of the script like this:

var linkActive = '#fff'

there are more vars like this at the top (including bgLinkActive);

that is just one way of changing font color when user hovers over the element ;)
 

Author

Commented:
If you decide you want to know some VBScript, I would be willing to give you a few pointers.  I will learn more about functions and try to master this a little better.  Thanks for your help.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.