Anylink Dropdown - wide box width problem

[cobler]

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

[ddadmin]

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.

[cobler]

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

[ddadmin]

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:

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

[cobler]

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.

[netcove]

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