Pop-it Menu question

[GolfNFool_18]

Script - PopIt Menu
http://www.dynamicdrive.com/dynamicindex1/popit.htm

Can you have more than one menu item on a line? Example, I set my default menu width large enough and have two separate menu choices on the same line.

I've got about 36 items, but would like the menu to only have 18 lines with two items on a line.

I've tried several methods, but have been unsuccessful.

Thanks,

Troy

[jscheuer1]

This was tricky to get looking nice. Here is a drop in replacement for the demo's style:

<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 td{
font: normal 12px Verdana;
line-height: 18px;
text-align:center;
border-bottom:1px solid black;
}

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

#sep {
width:1px;
background:black;
padding:0;
border:0
}

#popitmenu td.bot{
border-bottom:0;
}

#popitmenu table {
width:100%;
border-collapse:collapse;
cell-spacing:0
}

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

</style>

and a replacement for the linksets:

linkset[0]='<table><tr><td><a href="http://dynamicdrive.com">Dynamic Drive</a></td><td id="sep"></td><td><a href="http://javascriptkit.com">JavaScript Kit</a></td></tr>'
linkset[0]+='<tr><td><a href="http://www.javascriptkit.com">JavaScript Kit</a></td><td id="sep"></td><td><a href="http://www.codingforums.com">Coding Forums</a>'
linkset[0]+='<tr><td class="bot"><a href="http://www.cssdrive.com">CSS Drive</a></td><td id="sep" class="bot"></td><td class="bot"><a href="http://freewarejava.com">Freewarejava</a></td></tr></table>'

linkset[1]='<a href="http://msnbc.com">MSNBC</a>'
linkset[1]+='<br><a href="http://cnn.com">CNN</a>'
linkset[1]+='<br><a href="http://news.bbc.co.uk">BBC News</a>'
linkset[1]+='<br><a href="http://www.washingtonpost.com">Washington Post</a>'

and finally the markup for activating the pop ups:

<a href="#" onMouseover="showmenu(event,linkset[0],'250px')" onMouseout="delayhidemenu()">Webmaster Links</a><br>
<a href="#" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()">News sites</a><br>

Only the first linkset, linkset[0], is transformed to have to columns of links but, linkset[1] has some changes to get it to render with the new style. Pay close attention to minor differences in each line of linkset[0]. The first and last linkset[0] are unique, the middle one is representative of how all but the first and last should look like.

[GolfNFool_18]

jscheuer1,

This works beautifully!!! Many, many THANKS!

I've got a few menu choices that needs to go 4 items wide, but I was able to take what you gave me and make the appropriate changes and it works exactly as I had hoped.


Again, thanks for all of your help!!

[GolfNFool_18]

Spoke a little soon.. Was hoping you could help me or tell me if this is just a FireFox issue. It seems to work in IE..

I had modified your code above because I needed to have more than two columns on some menus. I have a test page to view the problem as well. The outside table doesn't fit or expand wide enough in Firefox.

The link: http://www.crazyfangear.com/test2.htm


Thanks,

Troy

[jscheuer1]

OK, the first problem is the width of the table in the style section. It cannot be greater than 100% because that puts it outside the containing division. Change it back to 100%. The way you regulate the overall width of each linkset is here, in the HTML portion (highlight red):

<area href="http://" shape="rect" coords="14, 141, 97, 306" 
onMouseover="showmenu(event,linkset[2],'400px')" 
onMouseout="delayhidemenu()">

That, BTW, seemed pretty good for baseball, the one sport I can really relate to, and all the rest except for NCAA which liked 600. Fixing this for all the pop its will fix the weird overlapping boxes in FF. Now, there is something screwy about how these pop it menus are being positioned. I actually find it better if the little man is higher up the page. This menu was not designed to have such large pop ups, I'm not sure if there is vertical error checking for the top of the window. I'll look into that,

[jscheuer1]

There is error checking for both vertical and horizontal positioning but, it can overcompensate sometimes with such large pop its. The fix for this is to find this section in the code:

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//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
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

and replace it with this:

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth){
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
if (parseInt(menuobj.style.left)<0)
menuobj.style.left=0
}
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//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"
if (parseInt(menuobj.style.top)<0)
menuobj.style.top=0
}
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

[GolfNFool_18]

jscheuer1,

Again.. Worked like a charm. Outstanding!!

Many Thanks AGAIN..

Troy