Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Pop It Menu won't work :(

  1. #1
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Pop It Menu won't work :(

    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:

    Code:
    <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!!

  2. #2
    Join Date
    Aug 2004
    Posts
    9,986
    Thanks
    3
    Thanked 978 Times in 964 Posts
    Blog Entries
    15

    Default

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

  3. #3
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,412
    Thanks
    45
    Thanked 3,267 Times in 3,228 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2011
    Posts
    50
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

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

  6. #6
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,412
    Thanks
    45
    Thanked 3,267 Times in 3,228 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <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:

    HTML Code:
    <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:

    Code:
    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!
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,412
    Thanks
    45
    Thanked 3,267 Times in 3,228 Posts
    Blog Entries
    12

    Default

    I see you already have:

    Code:
    <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:

    Code:
    <div class="staff" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()"></div>
    And define those links here (addition highlighted):

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •