Pop-it Menu problem

[suesee18]

1) Script Title: Pop-It menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/popit.htm

3) Describe problem: The menu worked UNTIL I added the links to the submenus. I think maybe the number of links I have for each menu item is too many?? I have 15 links each on 2 menu items, and 32 on another one. My question is, how many links can be used before it renders the script useless?? Here's my coding: (warning...quite large!)

<style type="text/css">

#popitmenu{
position: absolute;
background-color: white;
border:1px solid black;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
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="200px" //set default menu width.

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

linkset[0]='<a href="http://www.happybeepixels.net">Home</a>'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<a href="hbptou.htm" target="iframe">Terms</a>'
linkset[0]+='<a href="rewew.html" target="iframe">Renew</a>'
linkset[0]+='<a href="memberlogos.html" target="iframe">Member Logos</a>'
linkset[0]+='<a href="memberdiscounts.htm" target="iframe">Members Discounts</a>'
linkset[0]+='<a href="hbpmemberslisst.htm" target="iframe">Member List</a>'
linkset[0]+='<a href="latestupdate.html" target="iframe">Whats New</a>'

linkset[1]='<a href="membersonlyadopts.htm" target="iframe">Adopts/Sigs</a>'
linkset[1]+='<a href="membersonlytbpks.htm" target="iframe">Tube Packs</a>'
linkset[1]+='<a href="hbptubes_webstuff.htm" target="iframe">Web Stuff</a>'
linkset[1]+='<a href="palettes.htm" target="iframe">Color Palettes</a>'

linkset[2]+='<a href="outliines_people.htm" target="iframe">People</a>'
linkset[2]+='<a href="outlines_angels.htm" target="iframe">Angels</a>'
linkset[2]+='<a href="outlines_animals.htm" target="iframe">Animals</a>'
linkset[2]+='<a href="outlines_baby.htm" target="iframe">Baby</a>'
linkset[2]+='<a href="outlines_bears.htm" target="iframe">Bears</a>'
linkset[2]+='<a href="outlines_building.htm" target="iframe">Building</a>'
linkset[2]+='<a href="outlines_doll.htm" target="iframe">Dolls</a>'
linkset[2]+='<a href="outlines_fairy.htm" target="iframe">Fairy/Magick</a>'
linkset[2]+='<a href="outlines_food.htm" target="iframe">Food/Kitchen</a>'
linkset[2]+='<a href="outlines_garden.htm" target="iframe">Garden</a>'
linkset[2]+='<a href="outlines_holiday.htm" target="iframe">Holiday</a>'
linkset[2]+='<a href="outlines_household.htm" target="iframe">Household</a>'
linkset[2]+='<a href="outlines_insects.htm" target="iframe">Insects</a>'
linkset[2]+='<a href="outlines_misc.htm" target="iframe">Miscellaneous</a>'
linkset[2]+='<a href="outlines_quilt.htm" target="iframe">Quilt</a>'

linkset[3]+='<a href="hbptubes_alphas.htm" target="iframe">Alphas</a>'
linkset[3]+='<a href="hbptubes_angels.htm" target="iframe">Angels</a>'
linkset[3]+='<a href="hbptubes_animals.htm" target="iframe">Animals</a>'
linkset[3]+='<a href="hbptubes_baby.htm" target="iframe">Baby</a>'
linkset[3]+='<a href="hbptubes_bears.htm" target="iframe">Bears</a>'
linkset[3]+='<a href="hbptubes_building.htm" target="iframe">Building</a>'
linkset[3]+='<a href="hbptubes_candles.htm" target="iframe">Candles</a>'
linkset[3]+='<a href="hbptubes_dolls.htm" target="iframe">Dolls</a>'
linkset[3]+='<a href="hbptubes_fairy.htm" target="iframe">Fairy/Magick</a>'
linkset[3]+='<a href="hbptubes_frames.htm" target="iframe">Frames</a>'
linkset[3]+='<a href="hbptubes_garden.htm" target="iframe">Garden</a>'
linkset[3]+='<a href="hbptubes_holiday.htm" target="iframe">Holiday</a>'
linkset[3]+='<a href="hbptubes_household.htm" target="iframe">Household</a>'
linkset[3]+='<a href="hbptubes_insects.htm" target="iframe">Insects</a>'
linkset[3]+='<a href="hbptubes_misc.htm" target="iframe">Miscellaneous</a>'
linkset[3]+='<a href="hbptubes_props.htm" target="iframe">Props</a>'

linkset[4]+='<a href="tubes_mxdsheets.htm" target="iframe">Mixed</a>'
linkset[4]+='<a href="tubes_adorableadorn.htm" target="iframe">Adorable Adornments</a>'
linkset[4]+='<a href="tubes_adp.html" target="iframe">Angela's Doodle Pad</a>'
linkset[4]+='<a href=tubes_anitaspixels.html" target="iframe">Anita's Pixels</a>'
linkset[4]+='<a href="tubes_arans.htm" target="iframe">Aran's Pixel Dream</a>'
linkset[4]+='<a href="tubes_ashleys.htm" target="iframe">Ashley's Pixelicious</a>'
linkset[4]+='<a href=tubes_bc.html" target="iframe">Blue Creations</a>'
linkset[4]+='<a href="tubes_ccpp.htm" target="iframe">CoffeeCupPixelPalette</a>'
linkset[4]+='<a href="tubes_cgibbs.html" target="iframe">C Gibbs</a>'
linkset[4]+='<a href="tubes_chkbrd.htm" target="iframe">Chalkboard Outlines</a>'
linkset[4]+='<a href="tubes_chttrbugs.htm" target="iframe">Chatterbugs</a>'
linkset[4]+='<a href="tubes_cmp.htm" target="iframe">Color Me Pretty</a>'
linkset[4]+='<a href="tubes_dba.html" target="iframe">Designs By Angela</a>'
linkset[4]+='<a href="tubes_disbme.htm" target="iframe">DisBMe</a>'
linkset[4]+='<a href="tubes_dd.htm" target="iframe">Dragon Doodles</a>'
linkset[4]+='<a href="tubes_doodlelns.htm" target="iframe">Doodle Lines</a>'
linkset[4]+='<a href="tubes_dpp.htm" target="iframe">Duckpond Pixels</a>'
linkset[4]+='<a href="tubes_ei.html" target="iframe">Enchanted Imagery</a>'
linkset[4]+='<a href="tubes_flowspxls.htm" target="iframe">Flowers Pixels</a>'
linkset[4]+='<a href="tubes_gypsypixels.html" target="iframe">Gypsy Pixels</a>'
linkset[4]+='<a href="tubes_kayos.htm" target="iframe">Kayos Kreations</a>'
linkset[4]+='<a href="tubes_looneybin.html" target="iframe">The Looney Bin</a>'
linkset[4]+='<a href="tubes_mgkpxls.htm" target="iframe">Magik Pixels</a>'
linkset[4]+='<a href="tubes_mydoodles.html" target="iframe">My Doodles</a>'
linkset[4]+='<a href="tubes_pixcha.htm" target="iframe">Pixel Charms</a>'
linkset[4]+='<a href="tubes_pixelkins.htm" target="iframe">Pixelkins</a>'
linkset[4]+='<a href="tubes_pixelmart.htm" target="iframe">PixelsMart</a>
linkset[4]+='<a href="tubes_pxlptch.htm" target="iframe">Pixel Patch</a>'
linkset[4]+='<a href="tubes_pxltbs.htm" target="iframe">Pixel Tubes</a>'
linkset[4]+='<a href="tubes_pxlyn.htm" target="iframe">Pixelyn</a>'
linkset[4]+='<a href="tubes_rd.htm" target="iframe">Roxanes Dreamland</a>'
linkset[4]+='<a href="tubes_tnl.htm" target="iframe">Tuts N Lines</a>'

linkset[5]+='<a href="as_is_lines_ap.html" target="iframe">Anitas Pixels</a>'
linkset[5]+='<a href="as_is_lines_dbm.html" target="iframe">DisBMe</a>'
linkset[5]+='<a href="as_is_lines_mydoodles.html" target="iframe">My Doodles</a>'
linkset[5]+='<a href="as_is_lines_rc.html" target="iframe">Rose Creations</a>'
linkset[5]+='<a href="as_is_lines_snbd.html" target="iframe">Snugglebug Designs</a>'

linkset[6]+='<a href="custombases.html" target="iframe">Custom Bases</a>'
linkset[6]+='<a href="tubes_collaborations.html" target="iframe">Collabs</a>'

linkset[7]+='<a href="outlines_spchar.htm" target="iframe">Outlines</a>'
linkset[5]+='<a href="hbptubes_spchar.htm" target="iframe">Tubes</a>'



Also, on the section were you put in the body of the page, it asks for the link of the page for the menu item:

<a href="http://www.happybeepixels.net" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Member Info</a>

I put in my main url because each of those menu items do not have their own links. Maybe I'm just not understanding all this?

[jscheuer1]

There is virtually no limit to the number of items, whatever it is, and there must be one (probably varying by computer memory and clock speed), you are far, far, far below it.

You cannot have this though:


linkset[4]+='<a href="tubes_adp.html" target="iframe">Angela's Doodle Pad</a>'

Unless you escape the apostrophe. The way you have it, the script thinks the line ends here:


linkset[4]+='<a href="tubes_adp.html" target="iframe">Angela'

and sees the rest as garbage.

Do it like so:


linkset[4]+='<a href="tubes_adp.html" target="iframe">Angela\'s Doodle Pad</a>'

Fix these too:


linkset[4]+='<a href=tubes_anitaspixels.html" target="iframe">Anita\'s Pixels</a>'
linkset[4]+='<a href="tubes_arans.htm" target="iframe">Aran\'s Pixel Dream</a>'
linkset[4]+='<a href="tubes_ashleys.htm" target="iframe">Ashley\'s Pixelicious</a>'

And here, you left out an apostrophe (I put it in - red):


linkset[4]+='<a href="tubes_pixelmart.htm" target="iframe">PixelsMart</a>'

There could still be other problems. If you need more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[suesee18]

THANK YOU so much!!! That did the trick!! I thought I had checked them all, but after all those links, I was seeing a bit cross eyed. Much obliged to you!!!

[suesee18]

Sigh....Its me again. The code is working, BUT on a couple of the menu items, instead of dropping down, its going up and out of sight beyond the browser window. I don't want to try to adjust anything, since I have no idea how...LOL

Here's the page url: http://www.happybeepixels.net/membersarea/membersarea.htm You may have a problem accessing it, since its a password protected page. If you can't get in, just email me and I'll give you a temporary password.

[suesee18]

Bumping this up

[jscheuer1]

So no, I can't get in. But I may not need to. The script corrects for situations when there isn't enough room to fully display the items if they were to be dropped down (if they would go beyond the bottom of the window). It does this by 'dropping' up. But apparently doesn't check to see if there is enough room to do that.

We can remove this checking, but you should do some thinking about what happens when portions of the menu go below the bottom of the user's window. As long as they can scroll to that part, it should be OK.

To get rid of this, comment out the following lines in the script as shown (red):


//same concept with the vertical position
//if (bottomedge<menuobj.contentheight)
//menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
//else

However, if having items drop down below the bottom of the window is a problem, you really should consider other ways of organizing your content.

[suesee18]

Wonderful!!! I knew it did its thing to make sure it didn't go below the bottom of the window, but the problem occurs at the top of the window. I'll try this out, and if it makes things worse, I will sort out my lists and make the number of links smaller for each menu item.

Thanks so much...again!!