Results 1 to 8 of 8

Thread: Help with AnyLink CSS menu positioning

  1. #1
    Join Date
    Aug 2005
    Location
    Youngstown Ohio
    Posts
    115
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default Help with AnyLink CSS menu positioning

    Script: http://www.dynamicdrive.com/dynamici...anylinkcss.htm
    Demo: http://therevolutionist.net.tc (mouseover the "More >>" option under the Multimedia header)

    The positioning is offset from where I expected it to be; which would be the top right corner of the popup menu being just 2px below the left edge of the "M" in "More >>"

    see attachment screenshot

    Best Regards
    ~Spine

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

    Looks fine in FF mode, in IE mode I see the problem. Check (in the script and markup) for unnecessary line breaks anywhere that could be causing that if they were interpreted literally and/or spaces before line breaks. Optionally, find the positioning code in the script and have it adjust the top positioning upward about 20px for IE only.
    - John
    ________________________

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

  3. #3
    Join Date
    Aug 2005
    Location
    Youngstown Ohio
    Posts
    115
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    I dont know where those points are in the script:
    Code:
    var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
    var enableanchorlink=0 //Enable or disable the anchor link when clicked on? (1=e, 0=d)
    var hidemenu_onclick=1 //hide menu when user clicks within menu? (1=yes, 0=no)
    
    /////No further editting needed
    
    var ie5=document.all
    var ns6=document.getElementById&&!document.all
    
    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){
    if (ie5||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    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=ie5 && !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=ie5 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie5 && !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 dropdownmenu(obj, e, dropmenuID){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    if (typeof dropmenuobj!="undefined") //hide previous menu
    dropmenuobj.style.visibility="hidden"
    clearhidemenu()
    if (ie5||ns6){
    obj.onmouseout=delayhidemenu
    dropmenuobj=document.getElementById(dropmenuID)
    if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
    dropmenuobj.onmouseover=clearhidemenu
    dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)}
    showhide(dropmenuobj.style, e, "visible", "hidden")
    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 ((ie5||ns6) && !enableanchorlink) 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 (ie5&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }
    
    function delayhidemenu(){
    delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay)
    }
    
    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }

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

    Now, you've gotten me looking more closely at your page, I see that there is no script credit on it for the anylink script, see DD's terms of use. I also notice that in FF, although the drop down works OK, the page itself, from the login on down is left aligned when I think you want it centered. This is probably because it is a frameset and the page filling that frame is left aligned. IE often will center a left aligned page into the frame but FF retains page formatting when displaying in a frame, so center the content page and that should take care of that (a much bigger problem than your initial question). OK, once you take care of that and the credit issue. In the script, this is where the top positioning is determined:

    Code:
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    Just add to it, like so:

    Code:
    var ieAdj=iecompattest().filters? 20 : 0
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight-ieAdj+"px"
    The number 20 is just a guess, you can figure out the exact number via trial and error.
    - John
    ________________________

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

  5. #5
    Join Date
    Aug 2005
    Location
    Youngstown Ohio
    Posts
    115
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    The js is copied into a sitewide .js file and the credit is not in there as of yet because I plan on making the credit with a URL to the script's page on the different scripts in the file.

  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

    Quote Originally Posted by Spinethetic
    The js is copied into a sitewide .js file and the credit is not in there as of yet because I plan on making the credit with a URL to the script's page on the different scripts in the file.
    Huh? Regardless, the credit is to appear on each page that uses the script.
    - John
    ________________________

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

  7. #7
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Thanks John for reiterating the usage terms. It's really very simple- the credit notice must appear within the page's source for any page that the script appears on.

  8. #8
    Join Date
    Aug 2005
    Location
    Youngstown Ohio
    Posts
    115
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    I never intended not to follow the terms of use. Anyway the above script worked so far as moving the position up the page closer to where it should be but it is still a few pixels offset from the left but it'll do the job anyway unless its just a quickie fix.

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
  •