AnyLink Drop Down Menu IE HELP!

**JVRudnick** · 10-01-2004, 02:57 PM

Script: AnyLink Drop Down Menu IE

Hello all...

I am using the script called "AnyLink Drop Down Menu IE" in the Menus and Navigation systems area, and I have a problem.

First the script does run fine and it shows okay -- IF -- the number of items listed is less than about 5. If you have more than 5 items, and if the drop-down list would go PAST the bottom of the browser window, the drop-down list becomes a drop-up list and it goes ABOVE the link words.

This is a problem, in that when it does that, it can not then be scrolled or used to see the top items as whatever is above the top of the browser window can NOT be seen?

IS there a way to make the drop-down REMAIN a drop-down only, and thus force the user to resize their browser window to accomodate the longer length of the drop-down?"

After a search here and reading some posts, I have been able to "cram" in more items using the change of the STYLE fonts sizings...

But it still drops-up -- the addition of the height and overflow has NOT changed this incorrect (for my use anyways) function....

???

Jim

**ddadmin** · 10-02-2004, 09:42 AM

Do you have a URL to the problematic page, and what's the browser you're using? The script should automatically drop down or up, depending on whether it has enough space either upwards or downloads.

**JVRudnick** · 10-04-2004, 12:50 PM

no URL as the pages are still being developed. But IS there a way to make the script drop DOWN and never UP?

JIm

**ddadmin** · 10-06-2004, 07:27 PM

Sure. Simply edit the line:

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

so instead it's:

dropmenuobj.style.top=dropmenuobj.y+obj.offsetHeight+"px"

That should cause the menu to never drop "up."

**jcdavis** · 12-16-2004, 12:56 AM

ddadmin,

I am also using this script on my client's website, but it does not work very well on MAC OS X IE 5. It works at first time you roll over with mouse, but the second time to rollover, a large box appears on the left hand corner. Can you check for me, and let me know what we can do to change that?

http://www.clarycommunications.com/uacc
The link using the script is "Complaince"

Thank you so much!

**cr3ative** · 12-16-2004, 03:31 PM

Unfortunately, there are a lot of javascript/dhtml bugs which need addressing with Mac IE. I can't personally help with this as I don't own a Macintosh (far out of my budget).

Merry Christmas
cr3ative

**icyii** · 12-17-2004, 06:28 AM

I used the script on my page and it doesn't work! This is the page I used it on: http://www.freewebs.com/diet-diaries

In case you need it, here's the source of the page:

<HTML>
<HEAD><TITLE>Welcome to Diet-Diaries</TITLE>

<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 aboutmenu
var aboutmenu=new Array()
aboutmenu[0]='<a href="http://www.freewebs.com/diet-diaries/aboutme.htm">About Me</a><br>'
aboutmenu[1]='<a href="http://www.freewebs.com/diet-diaries/aboutwebsite.htm">About Website</a><br>'
aboutmenu[2]='<a href="http://www.freewebs.com/diet-diaries/credits.htm">Credits / FAQ</a><br>'
aboutmenu[3]='<a href="http://www.freewebs.com/diet-diaries/linktome.htm">Link to Me</a><br>'

//Contents for infomenu
var infomenu=new Array()
infomenu[0]='<a href="http://www.freewebs.com/diet-diaries/healthydiet.htm">Healthy Eating</a><br>'
infomenu[1]='<a href="http://www.freewebs.com/diet-diaries/caloriechart.htm">Calorie Charts</a><br>'
infomenu[2]='<a href="http://www.freewebs.com/diet-diaries/dietdodont.htm">Diet dos and don'ts</a><br>'

//Contents for goodiesmenu
var goodiesmenu=new Array()
goodiesmenu[0]='<a href="http://www.freewebs.com/diet-diaries/pixeladopt.htm">Pixel Adoptions</a><br>'
goodiesmenu[1]='<a href="http://www.freewebs.com/diet-diaries/cursors.htm">Cursors</a><br>'
goodiesmenu[2]='<a href="http://www.freewebs.com/diet-diaries/icons.htm">Icons</a><br>'
goodiesmenu[3]='<a href="http://www.freewebs.com/diet-diaries/toybox.htm">Toybox</a><br>'
goodiesmenu[4]='<a href="http://www.freewebs.com/diet-diaries/desktopgoodies.htm">Desktop Goodies</a><br>'

//Contents for tutorialmenu
var tutorialmenu=new Array()
tutorialmenu[0]='<a href="http://www.freewebs.com/diet-diaries/healthydiet.htm">Healthy Eating</a><br>'
tutorialmenu[1]='<a href="http://www.freewebs.com/diet-diaries/caloriechart.htm">Calorie Charts</a><br>'
tutorialmenu[2]='<a href="http://www.freewebs.com/diet-diaries/dietdodont.htm">Diet dos and don'ts</a><br>'

//Contents for connectmenu
var connectmenu=new Array()
connectmenu[0]='<a href="http://www.freewebs.com/diet-diaries/healthydiet.htm">Healthy Eating</a><br>'
connectmenu[1]='<a href="http://www.freewebs.com/diet-diaries/caloriechart.htm">Calorie Charts</a><br>'
connectmenu[2]='<a href="http://www.freewebs.com/diet-diaries/dietdodont.htm">Diet dos and don'ts</a><br>'

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=-500
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 windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
}
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>
<style type="text/css">
A:link,A:visited,A:active
{ text-decoration: none; color:#3399cc; font-size: 8pt}
A:hover
{ cursor: crosshair; font-size: 8pt; text-decoration:"underline overline"; background:#ccffff; }
b
{ text decoration: none; font-size: 8pt }
font,body
{FONT-FAMILY: Verdana,Arial,Helvetica; font-sIZE: 8pt; TEXT-DECORATION: none;}
body
{ scrollbar-face-color : #66ccff;
scrollbar-shadow-color : #66ccff;
scrollbar-track-color : #FFFFFF;
scrollbar-arrow-color : #0066cc;
cursor: crosshair;
background-image: url(http://img.photobucket.com/albums/v1...uts/clouds.gif);}
p
{ text decoration: none; font-size:8pt; }
input, textarea, button
{ font-family: Verdana, Arial, Helvetica;
font-size: 8pt;
background-colour: #ffffff}
table,font
{font-family: Verdana, Arial, Helvetica;
font-size: 8pt;}

#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
</style>
</HEAD>
<BODY>
<a href="http://www.freewebs.com/diet-diaries/index.htm">Home</a> |

<a href="http://www.freewebs.com/diet-diaries/about.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, aboutmenu, '150px')" onMouseout="delayhidemenu()">About</a> |

<a href="http://www.freewebs.com/diet-diaries/info.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, infomenu, '150px')" onMouseout="delayhidemenu()">Info</a> |

<a href="http://www.freewebs.com/diet-diaries/bbs.htm">BBS</a> |

<a href="http://www.freewebs.com/diet-diaries/goodies.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, goodiesmenu, '150px')" onMouseout="delayhidemenu()">Goodies</a> |

<a href="http://www.freewebs.com/diet-diaries/tutorial.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, tutorialmenu, '150px')" onMouseout="delayhidemenu()">Tutorial</a> |

<a href="http://www.freewebs.com/diet-diaries/connect.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, connectmenu, '150px')" onMouseout="delayhidemenu()">Connect</a> |
</BODY>
</HTML>

Thank you so much!

Thread: AnyLink Drop Down Menu IE HELP!

Thread Tools

Search Thread

AnyLink Drop Down Menu IE HELP!

Helpp My Menu Doesn't Work :(

Bookmarks

Bookmarks

Posting Permissions