<DIV> Tag Question

sabev · Oct 6, 2003

I’m having a heck of a time getting the properties of a div tag. In this code, the mouseover event in the <IMG> tag calls a function. It should pass the <DIV> object to that function but the alert returns ‘src has no properties’.

Does anyone see what the problem is?

Thanks.

<script language=JavaScript>
function showMenu(src)
{
alert(src.type);
}
function hideMenu(menuToHide)
{
menuToHide.style.left = -200;
menuToHide.style.top = -1000;
}
function goPage(parcelhtm)
{
window.location.href = parcelhtm;
}
WoodMenuDiv = document.getElementById("WoodMenuDiv&quot

;
</script>
<html>
<body>
<div id=WoodMenuDiv Class="DivMenu" onmouseout="return hideMenu(this)">
<table border=1 cellspacing=1 cellpadding=1 id="WoodTable">
<tr>
<TD id="WoodOak" RollOver RollOut
onclick="goPage('parcelquery.htm')"
Class="TDMenu">
Oak Timber
</TD>
</tr>
</table>
</div>

<IMG ID="WoodMenuImage" SRC="identify_1.gif" Style="position:absolute;left:10;top:75"
onmouseover="return showMenu(WoodMenuDiv)"
onmouseout="return hideMenu(WoodMenuDiv)">
</body>
</html>

tgreer · Oct 6, 2003

I see quite a bit wrong with this code... the very first tag should be <HTML> and the closing tag should be </HTML>.

The <script></script> section should be within <head></head> tags. You've got variables with the same names as element IDs. You have class assignments but no class definitions. Inconsistent case... unassigned values in your TD tag (what is the "RollOver RollOut"?)

I'm not sure what your functions are meant to accomplish. DIV tags don't have a "src" property, so what are you expecting to see in your alert? Actually, it looks like you are passing the div object into a private variable named "src" and then asking for the "type" property. I'm not familiar with the "type" property, again, what are you expecting this function to return?

Thomas D. Greer

http://www.tgreer.com

sabev · Oct 6, 2003

Hi Tom,

I made some changes to the code but I am still having the fundamental problem of passing the <DIV> properties to the showMenu function. I get the error 'menuToShow has no properties' This happens when the mouseover event calls the showMenu function.

Follows it the original code out of a JavaScript book. I had abreviated the code above to try to make it a little easier to read. Guess I screwed it up a bit.

Thanks again for any help.

<html>
<head>
<script language=JavaScript>
function showMenu(menuToShow)
{
alert(menuToShow.type);
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;
}
}
function document_onmouseover()
{
var srcElement = event.srcElement;
if (srcElement.tagName == "TD" && typeof(srcElement.RollOver) != "undefined&quot

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

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

<div id="WoodMenuDiv" Class="DivMenu" onmouseout="return hideMenu(this)">
<table border=0 cellspacing=1 cellpadding=1 id="WoodTable">
<tr>
<TD id="WoodOak" RollOver RollOut
onclick="goPage('parcelquery.htm')"
Class="TDMenu">
Oak Timber
</TD>
</tr>
</table>
</div>

<IMG ID="WoodMenuImage" SRC="identify_1.gif" Style="position:absolute;left:10;top:75"
onmouseover="return showMenu(WoodMenuDiv)"
onmouseout="return hideMenu(WoodMenuDiv)">
</body>
</html>

tgreer · Oct 6, 2003

But what exactly are you trying to accomplish? When you say "properties of the div", are you referring mainly to the style attributes? For example, to reposition the DIV or change the position?

If that's the case, define two separate css classes, and change them dynamically:

Code:

<HTML>
<head>
<script>
function changeStyle(x)
{ x.className=&quot;class2&quot;
}
</script>
<style>
.class1 { visibility: visible; }
.class2 { visibility: hidden; }
</style>
<head>
<body>
<div id=&quot;mainDiv&quot; class=&quot;class1&quot; onmouseOver=&quot;changeStyle(this);&quot;>
Make me invisible.
</div>
</body>
</HTML>

Is that making sense to you? I was too harsh in my last post, sorry. I'm happy to help.

Thomas D. Greer

http://www.tgreer.com

Mr3Putt · Oct 6, 2003

Try:

Code:

return showMenu(document.getElementById('WoodMenuDiv'))

"WoodMenuDiv" is not a variable, you need to pass the Element.

sabev · Oct 6, 2003

No prob Tom. Shouldn't have posted that first one with out looking at it a little closer. I have a number of copies that I have been fooling around with.

Basically, what I want to accomplish is when you hover over the image, a table will pop (the table in the DIV) and that table will act as a menu of sorts. Then as long as your mouse is on the table, it will stay up. When you move your mouse off the image, the table will disappear.

Yes, your example does make more sense. Make it invisible instead of just moving it off the page.

Mr3putt - I have tried setting a variable to document.getElementById('WoodMenuDiv') and pass that. It didn't work. Tomorrow I will try referencing the entire element in the mouseover event(I'm home now).

sabev · Oct 7, 2003

Mr3putt -

Putting -
return showMenu(document.getElementById('WoodMenuDiv'))
in the mouseover event seems to have done it.

Thanks everyone.
Doug

Mr3Putt · Oct 7, 2003

Sabev:

I see, now, that you WERE trying to set a "WoodMenuDiv" variable.. problem was, your javascript was executing (and setting the variable) BEFORE the DIV existed.

Your HTML pages, including javascript get executed from the top down; so, when the line "WoodMenuDiv = document.getElementById('WoodMenuDiv');" executes, the result is either NULL or undefined.

if you wrote:

Code:

<div id=&quot;WoodMenuDiv&quot; onload=&quot;var WoodMenuDiv = this;&quot;>

...or...

Code:

<div id=&quot;WoodMenuDiv&quot;> more div stuff </div>
<script type=&quot;text/javascript&quot; language=&quot;javascript&quot;>
var WoodMenuDiv = document.getElementById(&quot;WoodMenuDiv&quot;);
</script>

...it should work.

tgreer · Oct 7, 2003

I do this a lot... using <div></div> sections as popup menus. The way that I've worked out that seems to work well is trial and error:

1) You have your main DIV which contains all underlying page content/images.

2) Next you have a series of absolutely positioned DIVs that contain no content. They act as "rollover zones". These tags contain the onMouseOver handler pointing to a JavaScript function that toggles the visibility of the pop-up Divs (step 3). These DIVs use a CSS filter to set opacity to "1". This essentially renders them active but invisible.

3) All of my menus are in absolutely positioned DIVs that initially have the visibility set to "hidden".

This works well because a single simple script handles all of the pop-up behavior. It also allows me a lot of control over which screen areas cause the pop-ups to appear.

Thomas D. Greer

http://www.tgreer.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

<DIV> Tag Question

sabev

Programmer

tgreer

Programmer

sabev

Programmer

tgreer

Programmer

Mr3Putt

Programmer

sabev

Programmer

sabev

Programmer

Mr3Putt

Programmer

tgreer

Programmer

Similar threads

Part and Inventory Search

Sponsor

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

&lt;DIV&gt; Tag Question

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor

<DIV> Tag Question