Results 1 to 4 of 4

Thread: AnyLink Vertical Menu - Problem

  1. #1
    Join Date
    Aug 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink Vertical Menu - Problem

    Hey everybody,
    i've got a problem with the AnyLink Vertical Menu. I tried to insert it into a div. so far so good ... but if i move the div from the upper left corner to any other position, the submenu moves exactly the this difference from its menuentry.
    so if i move the div top: 180px the submenu moves 180px plus 180px ...
    anyone got an idea ... i tried to manipulation the javascript without result ...

    i need help with that ...

    thx guys

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Please post a link to the script here on DD that you are using. And, in this case, it would help us to help you if we had a link to your page or a copy of the code that can reproduce the effect that you are talking about. One thing that I can think of, off the top of my head, is that if you want to position this menu, do it in the flow of the page, not with absolute or relative positioning of a container. Whatever you do though, it might be OK as long as the drop down division or whatever it is called is outside of all containers except the body tag (assuming you've the good sense not to over style that element).
    - John
    ________________________

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

  3. #3
    Join Date
    Aug 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    sry ... i should have thought about this ... but it was late ... so ... here are the scripts:

    nearly original AnyLink script (menu.html):

    Code:
    <style type="text/css">
    
    #dropmenudiv{
    position:absolute;
    background-color: transparent;
    border:0px solid black;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }
    
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 0px solid black;
    text-decoration: none;
    font-weight: bold;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: transparent;
    }
    
    /* Sample CSS definition for the example list. Remove if desired */
    .navlist li {
    font-weight: bold;
    text-decoration: none;
    font:normal 12px Verdana;
    width: 135px;
    background-color: transparent;
    list-style-type: none;
    }
    
    .navlist a{
    
    text-decoration: none;
    font:normal 12px Verdana;
    }
    
    </style>
    
    
    <script type="text/javascript">
    
    /***********************************************
    * AnyLink Vertical Menu- &#169; Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
    menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
    menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
    menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'
    menu1[4]='<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>'
    
    
    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a>'
    menu2[1]='<a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a>'
    menu2[2]='<a href="http://news.bbc.co.uk">JavaScript Reference</a>'
    menu2[4]='<a href="http://www.javascriptkit.com/java/">Java Applets</a>'
    menu2[3]='<a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a>'
    menu2[4]='<a href="http://www.javascriptkit.com/howto/">Design Tutorials</a>'
    		
    var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
    var horizontaloffset=2 //horizontal offset of menu from default location. (0-5 is a good value)
    
    /////No further editting needed
    
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    
    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
    
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    
    function showhide(obj, e, visible, hidden, menuwidth){
    if (ie4||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function clearbrowseredge(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
    }
    else{
    var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
    edgeoffset=dropmenuobj.y
    }
    }
    return edgeoffset
    }
    
    function populatemenu(what){
    if (ie4||ns6)
    dropmenuobj.innerHTML=what.join("")
    }
    
    
    function dropdownmenu(obj, e, menucontents, menuwidth){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    populatemenu(menucontents)
    
    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
    }
    
    return clickreturnvalue()
    }
    
    function clickreturnvalue(){
    if (ie4||ns6) return false
    else return true
    }
    
    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    
    function dynamichide(e){
    if (ie4&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }
    
    function hidemenu(e){
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }
    
    function delayhidemenu(){
    if (ie4||ns6)
    delayhide=setTimeout("hidemenu()",disappeardelay)
    }
    
    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }
    
    </script>
    </head>
    <ul class="navlist">
    <li onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><a href="http://www.dynamicdrive.com">Dynamic Drive</a><span style="position: relative; left: 30px"><img src="img/menu_arrow.jpg"></span></li>
    <li onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><a href="http://www.javascriptkit.com">JavaScript Kit</a><span style="position: relative; left: 30px"><img src="img/menu_arrow.jpg"></span></li>
    <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
    <li><a href="http://www.codingforums.com">Coding Forums</a></li>
    </ul>
    index.php:

    Code:
    <?php
    include("inc/config.inc");
    echo "<html>\n";
    
    echo "<head>\n";
    echo "<link rel=\"stylesheet\" href=\"style.css\" />\n";
    echo "</head>\n";
    
    echo "<body>\n";
    /*
    echo "<div id=header>\n";
    echo "</div>\n"; //end div id=headers
    
    echo "<div id=news>\n";
    echo "</div>\n"; //end div id=news
    */
    echo "<div id=\"navi\">\n";
    include("menu.html");
    echo "</div>\n"; //end div id=navi
    /*
    echo "<div id=\"main\">\n";
    echo "test";
    echo "</div>\n"; //end div id=main
    
    echo "<div id=logo>\n";
    echo "</div>\n"; //end div id=logo
    */
    echo "</body>\n";
    echo "</html>\n";
    ?>
    style.css:

    Code:
    body 	
    	{
    	background-color:transparent;
    	}
    
    span
    	{
    
    	}
    div
    	{
    	background-color:transparent;
    	}
    
    	
    #main
    	{
    	height:auto; /*IE-bug with min-height*/
    	min-height:350px;
    	/*width:820px;*/
    	position:absolute;
    	background-color:transparent;
    	left:180px;
    	top:180px;
    	right:20px;
     	z-index:2;
    	border:1px solid black;
    	}
    li
    	{
    	list-style:none;
    	text-decoration:none;
    	}
    	
    #navi
    	{
    	height:auto; /*IE-bug with min-height*/
    	min-height:350px;
    	width:180px;
    	position:absolute;
    	left:0px;
    	top:180px;
     	z-index:100;
    	border:1px solid black;
    	}
    Problempage
    thx
    Last edited by tobe; 08-04-2006 at 06:03 PM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Hmm, this is a little strange but, I copied your problem page and then put the script's style and script code in the head of the page (as I believe the instructions tell you to), and the problem went away:

    HTML Code:
    <html>
    <head>
    <link rel="stylesheet" href="style.css" />
    <style type="text/css">
    
    #dropmenudiv{
    position:absolute;
    background-color: transparent;
    border:0px solid black;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }
    
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 0px solid black;
    text-decoration: none;
    font-weight: bold;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: transparent;
    }
    
    /* Sample CSS definition for the example list. Remove if desired */
    .navlist li {
    font-weight: bold;
    text-decoration: none;
    font:normal 12px Verdana;
    width: 135px;
    background-color: transparent;
    list-style-type: none;
    }
    
    .navlist a{
    
    text-decoration: none;
    font:normal 12px Verdana;
    }
    
    </style>
    
    
    <script type="text/javascript">
    
    /***********************************************
    * AnyLink Vertical Menu-  Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
    menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
    menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
    menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'
    menu1[4]='<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>'
    
    
    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a>'
    menu2[1]='<a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a>'
    menu2[2]='<a href="http://news.bbc.co.uk">JavaScript Reference</a>'
    menu2[4]='<a href="http://www.javascriptkit.com/java/">Java Applets</a>'
    menu2[3]='<a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a>'
    menu2[4]='<a href="http://www.javascriptkit.com/howto/">Design Tutorials</a>'
    		
    var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
    var horizontaloffset=2 //horizontal offset of menu from default location. (0-5 is a good value)
    
    /////No further editting needed
    
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    
    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
    
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    
    function showhide(obj, e, visible, hidden, menuwidth){
    if (ie4||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function clearbrowseredge(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
    }
    else{
    var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
    edgeoffset=dropmenuobj.y
    }
    }
    return edgeoffset
    }
    
    function populatemenu(what){
    if (ie4||ns6)
    dropmenuobj.innerHTML=what.join("")
    }
    
    
    function dropdownmenu(obj, e, menucontents, menuwidth){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    populatemenu(menucontents)
    
    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
    }
    
    return clickreturnvalue()
    }
    
    function clickreturnvalue(){
    if (ie4||ns6) return false
    else return true
    }
    
    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    
    function dynamichide(e){
    if (ie4&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }
    
    function hidemenu(e){
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }
    
    function delayhidemenu(){
    if (ie4||ns6)
    delayhide=setTimeout("hidemenu()",disappeardelay)
    }
    
    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }
    
    </script>
    
    </head>
    <body>
    <div id="navi">
    
    <ul class="navlist">
    <li onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><a href="http://www.dynamicdrive.com">Dynamic Drive</a><span style="position: relative; left: 30px"><img src="img/menu_arrow.jpg"></span></li>
    <li onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><a href="http://www.javascriptkit.com">JavaScript Kit</a><span style="position: relative; left: 30px"><img src="img/menu_arrow.jpg"></span></li>
    <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
    <li><a href="http://www.codingforums.com">Coding Forums</a></li>
    </ul>
    </div>
    </body>
    </html>
    - 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
  •