Help with Pop-it Menu

[marjoriejones13]

DD: Pop-it Menu
http://www.dynamicdrive.com/dynamicindex1/popit.htm

Website in question: http://www.etzelrealty.com/etzelonline/Page_4x.html

Problem:

The pop-up menus do not appear on mouseover.

History:

Initially, the code worked just fine. I changed the code for the first link on the page to "About Eztel Realty" and the links to my own links.

Then, I changed head to include more linksets for various property listings on the site, one option for homes over 100K, one option for homes under 100K. Again, it worked fine. In the body, the menu options read "city name" and on mouseover, the menu for "over or under 100K" appeared and worked fine.

Finally, I changed the head to include 12 different link sets total (including the 0). All heck-fire broke loose. Nothing worked.

I have tried the following:

1. Combined the linksets so I had less than 11 sets, thinking perhaps the linkset(x) could only have a single digit number in the variable. No go. Still doesn't work.

2. Changed the size of the menu pop-up to 500px, thinking perhaps my text was too long and phrases like "Price City - Under 100K" were chasing the code back to mama. No go. Still doesn't work.

3. Changed the z index from 100 to 500, thinking I have no idea what I'm doing so what could this possible hurt. I don't even know what the Z index is, but hey, a bigger number is better, right? <sheepish grin>

4. Specific question: Is there a limit on the number of items one may include in a linkset?

I've included the site link at the top of this posting if anyone could take a look at the source code? Also, I've also included the head section in question (as I've altered it) and the body code I'm using in this posting.

TIA,
Marjorie

Head:

#popitmenu{
position: absolute;
background-color: white;
border:1px solid black;
font: normal 10px Verdana;
line-height: 18px;
z-index: 500;
visibility: hidden;
}

#popitmenu a{
text-decoration: none;
padding-left: 6px;
color: black;
display: block;
}

#popitmenu a:hover{ /*hover background color*/
background-color: #CCFF9D;
}

</style>

<script type="text/javascript">

/***********************************************
* Pop-it menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var defaultMenuWidth="500px" //set default menu width.

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='<a href="http://www.etzelonline.com/bio/aboutx.html">Biography</a>'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<a href="http://www.etzelonline.com/agents/Agentsx.html">Our Agents</a>'
linkset[0]+='<a href="http://www.etzelonline.com/community/communityx.html">Our Community</a>'


linkset[1]='<a href="http://www.etzelonline.com/pricehomes1/pricelessrx.html">Price City - Under $100,000</a>'
linkset[1]+='<a href="http://www.etzelonline.com/pricehomes2/priceoverx.html">Price City - Over $100,000</a>'
linkset[1]+='<hr>' //Optional Separator
linkset[1]+='<a href="http://www.etzelonline.com/helperhomes1/helpunderx.html">Helper City - Under $100,000</a>'
linkset[1]+='<a href="http://www.etzelonline.com/helperhomes2/helpoverx.html">Helper City - Over $100,000</a>'
linkset[1]+='<hr>' //Optional Separator
linkset[1]+='<a href="http://www.etzelonline.com/wellhomes1/wellunderx.html">Wellington - Under $100,000</a>'
linkset[1]+='<a href="http://www.etzelonline.com/wellhomes2/welloverx.html">Wellington - Over $100,000</a>'
linkset[1]+='<hr>' //Optional Separator
linkset[1]+='<a href="http://www.etzelonline.com/carbonhomes1/ccunderx.html">Surrounding Areas - Under $100,000</a>'
linkset[1]+='<a href="http://www.etzelonline.com/carbonhomes2/ccoverx.html">Surrounding Areas - Over $100,000</a>'


linkset[2]='<a href="http://www.etzelonline.com/castlehomes1/castleunderx.html">Castledale - Under $100,000</a>'
linkset[2]+='<a href="http://www.etzelonline.com/castlehomes2/castleoverx.html">Castledale - Over $100,000</a>'
linkset[2]+='<hr>' //Optional Separator
linkset[2]+='<a href="http://www.etzelonline.com/hunthomes1/huntunderx.html">Huntington - Under $100,000</a>'
linkset[2]+='<a href="http://www.etzelonline.com/hunthomes2/huntoverx.html">Huntington - Over $100,000</a>'
linkset[2]+='<hr>' //Optional Separator
linkset[2]+='<a href="http://www.etzelonline.com/ferronhomes1/ferrunderx.html">Ferron - Under $100,000</a>'
linkset[2]+='<a href="http://www.etzelonline.com/ferronhomes2/ferroverx.html">Ferron - Over $100,000</a>'
linkset[2]+='<hr>' //Optional Separator
linkset[2]+='<a href="http://www.etzelonline.com/greenhomes1/greenunderx.html">Green River - Under $100,000</a>'
linkset[2]+='<a href="http://www.etzelonline.com/greenhomes2/greenoverx.html">Green River - Over $100,000</a>'
linkset[2]+='<hr>' //Optional Separator
linkset[2]+='<a href="http://www.etzelonline.com/emeryhomes1/emeryunderx.html">Surrounding Areas - Under $100,000</a>'
linkset[2]+='<a href="http://www.etzelonline.com/emeryhomes2/emeryoverx.html">Surrounding Areas - Over $100,000</a>'


linkset[3]='<a href="http://www.etzelonline.com/commprop/commpropx.html">Carbon County</a>'<br>
linkset[3]+='<hr>' //Optional Separator
linkset[3]+='<a href="http://www.etzelonline.com/pricecomm/pricecommx.html">Price</a>'<br>
linkset[3]+='<a href="http://www.etzelonline.com/helpcomm/helpcommx.html">Helper</a>'<br>
linkset[3]+='<a href="http://www.etzelonline.com/wellcomm/wellcommx.html">Wellington</a>'<br>
linkset[3]+='<a href="http://www.etzelonline.com/carboncomm/carboncommx.html">Surrounding Areas</a>'<br>
linkset[3]+='<hr>' //Optional Separator
linkset[3]+='<a href="http://www.etzelonline.com/commprop/commpropx.html">Emery County</a>'<br>
linkset[3]+='<hr>' //Optional Separator
linkset[3]+='<a href="http://www.etzelonline.com/castlecomm/castlecommx.html">Castledale</a>'<br>
linkset[3]+='<a href="http://www.etzelonline.com/huntcomm/huntcommx.html">Huntington</a>'<br>
linkset[3]+='<a href="http://www.etzelonline.com/ferrcomm/ferrcommx.html">Ferron</a>'<br>
linkset[3]+='<a href="http://www.etzelonline.com/greencomm/grcommx.html">Green River</a>'<br>
linkset[3]+='<a href="http://www.etzelonline.com/emerycomm/emerycommx.html">Surrounding Areas</a>'<br>


linkset[4]='<a href="http://www.etzelonline.com/land/landx.html">Carbon County</a>'<br>
linkset[4]+='<hr>' //Optional Separator
linkset[4]+='<a href="http://www.etzelonline.com/priceland/pricelandx.html">Price</a>'<br>
linkset[4]+='<a href="http://www.etzelonline.com/helpland/helpcommx.html">Helper</a>'<br>
linkset[4]+='<a href="http://www.etzelonline.com/wellland/welllandx.html">Wellington</a>'<br>
linkset[4]+='<a href="http://www.etzelonline.com/carbonland/carbonlandx.html">Surrounding Areas</a>'<br>
linkset[4]+='<hr>' //Optional Separator
linkset[4]+='<a href="http://www.etzelonline.com/land/landx.html">Emery County</a>'<br>
linkset[4]+='<hr>' //Optional Separator
linkset[4]+='<a href="http://www.etzelonline.com/castleland/castlelandx.html">Castledale</a>'<br>
linkset[4]+='<a href="http://www.etzelonline.com/huntland/huntlandx.html">Huntington</a>'<br>
linkset[4]+='<a href="http://www.etzelonline.com/ferrland/ferrlandx.html">Ferron</a>'<br>
linkset[4]+='<a href="http://www.etzelonline.com/greenland/greenlandx.html">Green River</a>'<br>
linkset[4]+='<a href="http://www.etzelonline.com/emeryland/emerylandx.html">Surrounding Areas</a>'


Altered Body Code: (I'm only posting one of the five <a> tags I'm using on the page since they're all the same except for the linkset[x] part.

<a href="#" onMouseover="showmenu(event,linkset[2], '500px')" onMouseout="delayhidemenu()">Emery County</a><br>

HEEEEELLLLP!!!!

[marjoriejones13]

Correction:

The page I'm working on is:

http://www.etzelonline.com/etzelonline/Page_4x.html

[jscheuer1]

You have a number of places where you 'draw outside the lines', as it were. You've put <br> tags outside of the delimited areas of the linksets, ex:


linkset[3]+='<a href="http://www.etzelonline.com/pricecomm/pricecommx.html">Price</a>'<br>

In the above, I've marked the part that is outside the delimiter green (it is at the end, you may have to scroll the code area to see it) and I've marked the delimiters red.

Here is how the above line should look:


linkset[3]+='<a href="http://www.etzelonline.com/pricecomm/pricecommx.html">Price</a><br>'

Not much of a change but, in javascript code, it matters a great deal to the browsers trying to read the code. Since you have quite a number of these, 21, I think. the easiest way to fix it would be to do a global text search and replace on the page in a text editor, like notepad. In the find/search field put:

</a>'<br>

In the replace field use:

</a><br>'

Make sure you get them all, as missing just one will still throw the whole thing off.

[marjoriejones13]

Thanks a bunch. I'll fix that here in a little bit. I lost track of where I wanted the breaks, I think and tagged them on the ends, then completely confused myself.

Hugs,
Marjorie