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

Thread: AnyLink Drop Down Menu: Dynamic width? How?

  1. #1
    Join Date
    Apr 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink Drop Down Menu: Dynamic width? How?

    Hi, i use the anylink dropdown menu in my phpBB2 board.
    http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    cause i fill the menu width dynamic content "text text text {USERNAME} text text" it is neccessary that the menu has a big width, cause not every user has a short nickname, and i want no break in the textline. but when a user has a short nickname it looks a little bit stupid, when there is such a big space between the last letter and the right border of the menu!

    it is possible not to set the width in a static way, but that the menu has THAT width, how long the individual textline is?!

    or in other words: the menu simple is not allowed to break the textline, and the thing width the width is completely ignored!?

    is this possible to make?


    Code:
    <script type="text/javascript">
    
    /***********************************************
    * AnyLink Drop Down 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 2, and so on
    <!-- BEGIN postrow -->
    var menu{postrow.VB_MENU_ID}=new Array()
    menu{postrow.VB_MENU_ID}[0]='<a>{postrow.POSTER_NAME}</a>'
    menu{postrow.VB_MENU_ID}[1]='{postrow.VB_MENU_PROFILE}'
    menu{postrow.VB_MENU_ID}[2]='{postrow.VB_MENU_PM}'
    menu{postrow.VB_MENU_ID}[3]='{postrow.VB_MENU_SEARCH}'
    menu{postrow.VB_MENU_ID}[4]='{postrow.VB_MENU_EMAIL}'
    menu{postrow.VB_MENU_ID}[5]='{postrow.VB_MENU_WWW}'
    menu{postrow.VB_MENU_ID}[6]='{postrow.VB_MENU_ALBUM}'
    <!-- END postrow -->
    var menuwidth='180px' //default menu width
    var menubgcolor='#f9f9f9'  //menu bgcolor
    var disappeardelay=99999999999999999999999  //menu disappear speed onMouseout (in miliseconds)
    var hidemenu_onclick="yes" //hide menu when user clicks within menu?
    
    /////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:'+menuwidth+';background-color:'+menubgcolor+'" 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="-500px"
    if (menuwidth!=""){
    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 < 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 up?
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
    edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
    }
    }
    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")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"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)
    }
    
    if (hidemenu_onclick=="yes")
    document.onclick=hidemenu
    
    </script>

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    The script seems to make provisions for a blank menu width. Try that.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I don't think that will work, try (Note - works as before but for self calculating widths, use 'selfc' as the width param or no width param - not even an empty value in the HTML, see examples at the bottom of the demo. The onmouseout event no longer needs to be assigned. Also - notice that style must be set correctly, as commented in the style section, for #tspan a.):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title>AnyLink Drop Down Menu - w/Self calculating width</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    #dropmenudiv{
    position:absolute;
    border:1px 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: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: yellow;
    }
    
    #tspan a { /*required for self caculated widths*/
    display:block; /*required*/
    text-indent: 3px; /*set to #dropmenudiv a setting*/
    padding: 2px; /*set to 1+#dropmenudiv border's width*/
    font:bold 12px Verdana; /*set to net style effect for font settings of "#dropmenudiv a" and "#dropmenudiv"*/
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    * Modified for optional self calculating width by
    * jscheuer1 in http://www.dynamicdrive.com/forums
    ***********************************************/
    
    //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>'
    
    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="http://cnn.com">CNN</a>'
    menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
    menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'
    
    var menuwidth='165px' //default menu width
    var menubgcolor='lightyellow'  //menu bgcolor
    var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
    var hidemenu_onclick="yes" //hide menu when user clicks within menu?
    
    /////No further editting needed
    
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    var defaultwidth=menuwidth
    
    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" 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
    if (typeof menuwidth=='undefined'||menuwidth=='selfc')
    dropmenuobj.widthobj.width=tmpspan.offsetWidth+'px'
    else if (menuwidth!='')
    dropmenuobj.widthobj.width=menuwidth
    else
    dropmenuobj.widthobj.width=defaultwidth
    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 < 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 up?
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
    edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
    }
    }
    return edgeoffset
    }
    
    function populatemenu(what){
    if (ie4||ns6){
    var appendit=0
    if (typeof tmpspan=='undefined'){
    tmpspan=document.createElement('span')
    appendit=1
    }
    if(appendit){
    tmpspan.style.position="absolute"
    tmpspan.style.left="-1000px"
    tmpspan.id='tspan'
    document.body.appendChild(tmpspan)
    }
    tmpspan.innerHTML=dropmenuobj.innerHTML=what.join("")
    }
    }
    
    
    function dropdownmenu(obj, e, menucontents, menuwidth){
    obj.onmouseout=delayhidemenu;
    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")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"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)
    }
    
    if (hidemenu_onclick=="yes")
    document.onclick=hidemenu
    
    </script>
    </head>
    <body>
    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1)">Web Design</a> |
    
    <a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, 'selfc')">News Sites</a> (onclick)
    </body>
    </html>
    Last edited by jscheuer1; 04-17-2006 at 01:39 PM. Reason: Improve Function - Reduce HTML syntax
    - John
    ________________________

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

  4. #4
    Join Date
    Apr 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Awesome!!

    Thank you very much jschauer1!

  5. #5
    Join Date
    Apr 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ... oh, i found one little thing, that's not 100% perfect..


    when you are on the view-thread page and do not click on the link, that opens the menu (poster's name), the footer of the page is displayed as it should be.

    see here:
    [pixx removed]


    but when you click on anyone's name, so that the menu opens, the page footer has a white space in it (after the footer of the page) with the height of the menu..

    see here:
    [pixx removed]

    (problem is in firefox AND IE!!)

    that's the last thing I'm not happy with.. can somebody please fix this?
    Last edited by Monaco Franze; 04-19-2006 at 06:46 PM. Reason: Removed the pixx

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This is probably due to your markup using absolute positioning, which is what I used to make the DOM created width gauge span invisible to the browser. If that is what is happening, setting its display to none after each use would probably solve this problem. Find these lines:

    Code:
    if (typeof menuwidth=='undefined'||menuwidth=='selfc')
    dropmenuobj.widthobj.width=tmpspan.offsetWidth+'px'
    Change them to:

    Code:
    if (typeof menuwidth=='undefined'||menuwidth=='selfc'){
    tmpspan.style.display='inline'
    dropmenuobj.widthobj.width=tmpspan.offsetWidth+'px'
    tmpspan.style.display='none'
    }
    Also, add this (red) to populatemenu(what):

    Code:
    function populatemenu(what){
    if (ie4||ns6){
    var appendit=0
    if (typeof tmpspan=='undefined'){
    tmpspan=document.createElement('span')
    appendit=1
    }
    if(appendit){
    tmpspan.style.position="absolute"
    tmpspan.style.left="-1000px"
    tmpspan.id='tspan'
    document.body.appendChild(tmpspan)
    tmpspan.style.display='none'
    }
    tmpspan.innerHTML=dropmenuobj.innerHTML=what.join("")
    }
    }
    There probably is a better way but, without seeing your markup and exactly how you are using the script, I cannot be sure. This should work in any case, let me know.
    - John
    ________________________

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

  7. #7
    Join Date
    Apr 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Flawless thing now!!
    Thank you, now it's perfect!

  8. #8
    Join Date
    Apr 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I installed some ajax features on my board and on the viewthread page too.
    but now the menu works no more, while the ajax works perfect.

    the author of the ajax stuff said, i have to ask here, because his stuff works...


    okay, the .js-code is this (the last thing you postet above)

    Code:
    <script type="text/javascript">
    
    /***********************************************
    * AnyLink Drop Down 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 2, and so on
    <!-- BEGIN postrow -->
    var menu{postrow.VB_MENU_ID}=new Array()
    menu{postrow.VB_MENU_ID}[0]='<a class="vbmh">&nbsp;{postrow.POSTER_NAME}</a>'
    menu{postrow.VB_MENU_ID}[1]='{postrow.VB_MENU_PROFILE}'
    menu{postrow.VB_MENU_ID}[2]='{postrow.VB_MENU_PM}'
    menu{postrow.VB_MENU_ID}[3]='{postrow.VB_MENU_SEARCH}'
    menu{postrow.VB_MENU_ID}[4]='{postrow.VB_MENU_EMAIL}'
    menu{postrow.VB_MENU_ID}[5]='{postrow.VB_MENU_WWW}'
    menu{postrow.VB_MENU_ID}[6]='{postrow.VB_MENU_ALBUM}'
    <!-- END postrow -->
    var menuwidth='selfc' //default menu width
    var menubgcolor='#f9f9f9'  //menu bgcolor
    var disappeardelay=99999999999999999999999  //menu disappear speed onMouseout (in miliseconds)
    var hidemenu_onclick="yes" //hide menu when user clicks within menu?
    
    /////No further editting needed
    
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    var defaultwidth=menuwidth
    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" 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
    if (typeof menuwidth=='undefined'||menuwidth=='selfc'){
    tmpspan.style.display='inline'
    dropmenuobj.widthobj.width=tmpspan.offsetWidth+'px'
    tmpspan.style.display='none'
    }
    else if (menuwidth!='')
    dropmenuobj.widthobj.width=menuwidth
    else
    dropmenuobj.widthobj.width=defaultwidth
    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 < 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 up?
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
    edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
    }
    }
    return edgeoffset
    }
    function populatemenu(what){
    if (ie4||ns6){
    var appendit=0
    if (typeof tmpspan=='undefined'){
    tmpspan=document.createElement('span')
    appendit=1
    }
    if(appendit){
    tmpspan.style.position="absolute"
    tmpspan.style.left="-1000px"
    tmpspan.id='tspan'
    document.body.appendChild(tmpspan)
    tmpspan.style.display='none'
    }
    tmpspan.innerHTML=dropmenuobj.innerHTML=what.join("")
    }
    }
    function dropdownmenu(obj, e, menucontents, menuwidth){
    obj.onmouseout=delayhidemenu;
    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")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"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)
    }
    if (hidemenu_onclick=="yes")
    document.onclick=hidemenu
    </script>
    css stuff:
    Code:
    #dropmenudiv{
    position:absolute;
    border:1px solid #CCCCCC;
    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: 1px solid #CCCCCC;
    padding: 1px 0;
    text-decoration: none;
    }
    
    #dropmenudiv a:hover{
    background-color: #f3f3f3;
    }
    
    #tspan a { /*required for self caculated widths*/
    display:block; /*required*/
    position:absolute;
    text-indent: 3px; /*set to #dropmenudiv a setting*/
    padding: 2px; /*set to 1+#dropmenudiv border's width*/
    font:bold 12px Verdana; /*set to net style effect for font settings of "#dropmenudiv a" and "#dropmenudiv"*/
    }
    and the .js files from the ajax mods are these:

    http://connect.co.funpic.de/phpBB2/i...t/ajax_core.js

    http://connect.co.funpic.de/phpBB2/i...icfunctions.js

    this is how the menu looks like without the two ajax .js-files included:


    and this is how the menu now looks like with the two files included. ^^



    does anyone see what causes the error???
    Last edited by Monaco Franze; 04-23-2006 at 10:51 PM.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'd be inclined to say the same thing that the ajax author said, as the code works without the ajax script. The only two things that jump out at me are that the font style for #tspan a no longer agrees with the net style effect for font settings of "#dropmenudiv a" and "#dropmenudiv", it should be:

    Code:
    font:normal 12px Verdana;
    The other thing is that I cannot see what:

    PHP Code:
    {postrow.VB_MENU_PROFILE
    and similar resolve to but, if they are not links and not block level elements, that would throw the whole thing off.

    Got a link to the actual page where this is happening?
    - John
    ________________________

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

  10. #10
    Join Date
    Apr 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,


    i created to new classes in the css for the menu.
    here the stuff for the header of the menu (the poster's name)
    Code:
    a.vbmh
    {
    	background-color: #f3f3f3;
    	color: #6D7B8D;
    	font-size: 8pt;
    	font-weight: bold;
    }
    a.vbmh:hover
    {
    	color: #6D7B8D;
    }
    and here the stuff for the standart menu links:
    Code:
    .vbm { font-family: Verdana, Tahoma, Arial, "Times New Roman", serif; font-size : 10pt; }

    do you see any errors now?? or what causes the error..?! are my self made css classes wrong?

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
  •