Pop It Menu won't work :(

[mustangcassie17]

1) Script Title: Pop It Menu won't work

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

3) Describe problem: Here is the code I'm currently using for my forum:

<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="150px" //set default menu width.

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

linkset[0]='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=690&st=0&#last">RULES!</a>'
linkset[0]+='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=7">CHARRIE CREATION!</a>'
linkset[0]+='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=340">FACE CLAIM!</a>'
linkset[0]+='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showforum=10">ADVERT & AFFY!</a>'
linkset[0]=+'<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=221">CLASS SIGN UPS!!</a>'
linkset[0]=+'<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=764">OTM'S!</a>'
linkset[0]+='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showforum=41">SHOWS!</a>'

////No need to edit beyond here

var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//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
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu

</script>

It worked for me before and now I can't get it work. What am I doing wrong?? Help!!

[ddadmin]

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

[mustangcassie17]

http://www.z7.invisionfree.com/Adrenaline_Rush

[jscheuer1]

On the page you link to in your post there are no links like so (from Step 2 on the demo page):

<a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Webmaster Links</a>

At least one of these is required as a trigger for the pop-it menu.

There could also be other problems, but that much has to be fixed first.

Where did you want the menu to appear, onmouseover of what link?

[cindylou]

i tried your codes and added the line that jscheuer1 gave... it worked... if it didn't for you, review the codes again...you might have missed some errors...typing errors to be exact...because that code works...

[mustangcassie17]

Okay thanks so much. Just one thing, where does the <a href> tag go in the code and can you give me an example on how it would go in the code? On the site where it says Quick Links and Hover, that's where the code should be appearing.

[jscheuer1]

There is a class quicklinks defined in the stylesheet and it has an a:hover pseudo class defined for it. But the only reference to it in the markup is an empty division:

<div class="quicklinks"><br><br></div>

It has as a background image a graphic with the words Quick Links Hover on it. I assume this is the intended trigger.

In there is where your link would go. But I don't think you want a link, or if you do, it should be styled differently. Here's what I'd try replacing the above with:

<div class="quicklinks" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()"></div>

But when I do that, I get the menu with some errors. Here there are typos:

linkset[0]='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=690&st=0&#last">RULES!</a>'
linkset[0]+='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=7">CHARRIE CREATION!</a>'
linkset[0]+='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=340">FACE CLAIM!</a>'
linkset[0]+='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showforum=10">ADVERT & AFFY!</a>'
linkset[0]=+'<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=221">CLASS SIGN UPS!!</a>'
linkset[0]=+'<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=764">OTM/S!</a>'
linkset[0]+='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showforum=41">SHOWS!</a>'

Those should both be:

+=

Fix those, make the other modification I mentioned, and you're in business!

[mustangcassie17]

Got it to work!! Thanks so much! I had it on my site before but my friend was the one who put it there so I didn't know exactly how to do it, but thank you soooooooo much!!

Forever grateful haha

[mustangcassie17]

Now lets say I wanted to do the same thing but in the 'Staff' part of the sidebar on my site..how would I go about doing that without having it conflict with the other pop it menu?

[jscheuer1]

I see you already have:

<div class="staff" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()"></div>

If you want a different set of links, a different linkset, change the number:

<div class="staff" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()"></div>

And define those links here (addition highlighted):

<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="150px" //set default menu width.

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

linkset[0]='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showuser=1">CASSIE FRASSIE?!</a>'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=56&hl=">Jessicah Rae Bunnell</a>'
linkset[0]+='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=143&hl=">Daniel Jacob Jackson</a>'
linkset[0]+='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=298&hl=">Joshua Paul Caidence</a>'
linkset[0]+='<a href="http://z7.invisionfree.com/Adrenaline_Rush/index.php?showtopic=516&hl=">Casey Dae Rio</a>'

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

////No need to edit beyond here

var ie5=docume . . .

Change the actual links to your own. Add more linkset[1]+='whatever' lines if you need them. Take one or more away if you don't need them.