Results 1 to 6 of 6

Thread: Anylink Dropdown - wide box width problem

  1. #1
    Join Date
    Mar 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Anylink Dropdown - wide box width problem

    Script Title: Anylink Drop Down
    Problem:

    Am using Anylink Drop Down as a tooltip program with links in the tooltip boxes. All works great until I decide I want a box of say 850px. Then the box in part goes of side of page, even changing from left to right or right to left depending where the link to the dropdown is placed in the horizontal position.

    If the position of the link is more or less central all OK, but if off center then box in part, even most attimes, goes off page to side.

    Is it possible to insert into code a condition, eg.,- "if box greater than say 650px then place box centered on page or say 20px in from right/left edge"?

    Would be real grateful if this were possible - dont want to use any other code as for tool tips because most of these float and close if mouse is moved out and therefore their content cannot be scrolled to open included links.

    Living in hope

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

    Default

    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

    I'm not entirely sure I understand your question. By "box", do you mean a box containing your page's content? A link to the problem page will be helpful.

  3. #3
    Join Date
    Mar 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry about the link to DD - I misunderstood the rule and thought that by stating I was using the DD "Script Title: Anylink Drop Down" covered it.

    What I mean by "box" is the menu "box/window" (cant think what else to call it) which drops or pops up with the menu content.

    What happens is that when this is chosen to be from 650-850px wide, depending on where the link to the menu is placed on the page, the drop down menu 'box' with contents often goes off the page - beyond right or left ege of page.

    This seems to be a common result for many drop down menus.

    I want to use such a wide drop down menu 'box', almost right accross a page, in preference to narrower ones which with a lot of contents in them get very long down the page.

    Thanks for interest

  4. #4
    Join Date
    Aug 2004
    Posts
    9,890
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    Ok, I assume you're talking about this script: http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    Vertically, if a drop down menu is too long for the page, the script will actually reposition the menu so it's at the very top of the page, instead of bottom of the activating link.

    Horizontal wise the script right now will only check if there's enough room to the right of the activating link to fit the menu- if not, the menu will be positioned to the left of the link instead. The problem for you is that the menu is too wide to fit to the left of the menu too. A solution is to add a third test case that will position the menu to the left edge of the window instead in this case.

    Try replacing the original script with the modified one below instead, which adds this third test case:

    Code:
    <script type="text/javascript">
    
    /***********************************************
    * AnyLink Drop Down 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>'
    
    //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
    
    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){ //move to the left?
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
    if ((dropmenuobj.x+obj.offsetWidth)<dropmenuobj.contentmeasure) //left no good either?
    edgeoffset=dropmenuobj.x
    }
    }
    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>

  5. #5
    Join Date
    Mar 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    A million thanks, DDADMIN, this 'new' AnyLink DropDown Menu you sent out is just great for any width dropdown contents boxes - right up to 950px and ALWAYS ALL ON THE PAGE no matter what width!

    And it's just great for TOOL Tips - AND easy to customise.

    I tested it with 950px width dropdown menu boxes and it worked perfect no matter where the link was on the page. But I gave it a couple of 'nudges'.

    1. some links close to edge of page resulted with the dropdown box right on the very edge - usually the left edge - so I got it to move 5px inwards by adding +5 to the line:

    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"

    to make it read:

    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+5+"px"

    2. the top of the dropdown was bit close/on top of the link word, so I got it to drop 5px below the link by changing the line:

    var edgeoffset=0

    to:

    var edgeoffset=-5

    I reckon this is now one of the most versatile dropdown menus/tool tips scripts out.

    Thanks again DDADMIN - its no flatttery but fact for me that I've never had such a quick and immediately helpful response on any other Java/html forum.

  6. #6
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink CSS Menu v2.2

    http://www.dynamicdrive.com/dynamici...anylinkcss.htm

    Do you have a solution for the exact same issue with the non JS version.

    I just implented it for our Intranet and put a ton of work into it. Now I just need this fixed... MUCH APPRECIATED

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
  •