PDA

View Full Version : AnyLink Drop Down Menu in IE7



jcdeagan
12-13-2006, 06:53 PM
1) Script Title: AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem: I am having problems with anylink displaying (at all) in IE7. It works fine in every other browser I've viewed it in, including IE6. Is anyone else experiencing this and/or have found a workaround for it? I searched these forums for similar problems, but the closest thing I found was the anylink vertical menu displaying a white box, which is a different script and a different problem. :)

If this sounds like a unique problem, I can post my code, etc. I just wanted to find out if others are experiencing this same issue.

Thanks!

jscheuer1
12-14-2006, 06:32 AM
Well, the demo page you link to in your post works fine in IE 7 here. Does it work for you in IE 7? If not, it is probably a system configuration issue with your browser and/or other system components. If the demo page does work for you in IE 7, it is probably your page's design.

jcdeagan
12-15-2006, 09:02 PM
Ok... thanks for making me check (don't know why I didn't check that before.. except I don't usually use IE!).

The demo page DOES work for me in IE7, meaning it's a problem with my code.

Here's the relevant HTML code in the <body>:

<td height="46" colspan="2" valign="top"><a href="http://www.burlingtoncoc.org/"><img src="../images/menu_home.gif" alt="Home" width="136" height="46" border="0"></a><a href="http://www.burlingtoncoc.org/visitors/" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1)" onMouseout="delayhidemenu()"><img src="../images/menu_visitors.gif" alt="Visitors" width="168" height="46" border="0"></a><a href="http://www.burlingtoncoc.org/outreach/" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2)" onMouseout="delayhidemenu()"><img src="../images/menu_outreach.gif" alt="Outreach" width="169" height="46" border="0"></a><a href="http://www.burlingtoncoc.org/contact/"><img src="../images/menu_contact.gif" alt="Contact Us" width="169" height="46" border="0"></a><img src="../images/menu_members.gif" width="158" height="46"></td>
Only the 2nd and 3rd links are supposed to have drop down menus.

Here's the relevant code from the <head>:

<script type="text/javascript" src="http://www.burlingtoncoc.org/anylink.js">
/***********************************************
* AnyLink CSS Menu script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script> No brainer on that one.

And other than the links themselves, the only code i've changed in the script file is the cosmetic options:

//Menu Options
var menuwidth='165px' //default menu width
var menubgcolor='#A4A4A4' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

When I view the site (I use a template file, so all pages make the same error) in IE7, here's the error I get:


Line: 50
Char: 1
Error: Invalid Argument
Code: 0
URL: http://www.burlingtoncoc.org

I've checked line 50 char 1 in both the .js file and the html file and neither one looks off to my amateur eyes.

Ideas?? If you want to view the site for yourself.. the url's in that last bit of code (obviously)

Thanks!

jcdeagan
12-15-2006, 09:04 PM
Oh ya.. I also made changes to the css:


#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 1px solid black;
font:normal 12px Arial #FFFFFF;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 0px;
padding: 1px 0;
font: 14px Arial;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #EFEFEF;
color: #000000;
}

#dropmenudiv a:active{
font: 14px Arial #7B5D52;
background-color: #EFEFEF;
}

jscheuer1
12-15-2006, 11:01 PM
When calling the drop down in the HTML portion:


onMouseover="dropdownmenu(this, event, menu1)"

If you want to use the default width, you should specify an empty string for width (use two single quotes without even a space between them):


onMouseover="dropdownmenu(this, event, menu1, '')"

This part of the script isn't well written or documented (although a short confusing mention of it is made on the demo page) so, even doing that might not fix it in IE 7. If not, just specify a width (you can use your default if you like):


onMouseover="dropdownmenu(this, event, menu1, '165px')"

Make sure to fix both of the HTML calls.

jcdeagan
12-15-2006, 11:54 PM
Wow.. that was an incredibly easy fix!

That fixed it... put the change in the main template, updated all the pages, and voila, I have a working site in IE7!

Thanks jscheuer1

nlassiter
10-17-2007, 11:17 AM
I am having the same problem. When I bring the site up in firefox it seems to work, but does nothing at all in ie7 and does not give an error. The portfolio link is suppose to have the drop down.

Html

<a href="portfolio.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()">Portfolio</a>

CSS

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

</style>

nlassiter
10-17-2007, 11:19 AM
You can see it here:
http://www.csphoto.biz/newsite/

jscheuer1
10-17-2007, 02:48 PM
The combination of your layout and styles is not allowing it to work. In my opinion they are at best, overly complex. But, rather than try to completely re-do them for you, here is a version of your page that works pretty well, at least well enough that you could take it from here (NOTE - Use entire page code as I am giving it here - much has changed):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<link rel="stylesheet" type="text/css" href="style.css" />

<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, #dropmenudiv a:link, #dropmenudiv a:visited, #dropmenudiv a:active {
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
color:#444;
text-align:left;
}

#dropmenudiv a:hover { /*hover background color*/
background-color: #E9FF50;
color:#222;
}

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

//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">CSSDrive.com</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>'

//Contents for menu 3, and so on
var menu3=new Array()
menu3[0]='<a href="http://news.com">News.com</a>'
menu3[1]='<a href="http://wired.com">Wired</a>'
menu3[2]='<a href="http://news.bbc.co.uk/2/hi/technology/default.stm">BBC Technology</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)
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>


<!--[if IE ]>
<style type="text/css">
#container{top:50%}
#inner{top:-50%;position:relative;}
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
#outer{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->
</head>

<body>
<div id="outer">
<div id="container">
<div id="inner">
<span class="top">Client Login</span><img src="logo2.jpg" align="right" alt="Charles Smith Photography" />
<div id="content" style="border:none;">
<img style="border:4px solid white;" src="homepage_images/HOME PIC.jpg" />

<div style="text-align:left;">
<p><a href="index.html">Home</a> | <a href="philosophy.html">Philosophy</a> | <a href="portfolio.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()">Portfolio</a> | <a href="photography101.html">Photography 101</a> | <a href="contactus.php">Contact Us</a></p>
</div>
</div>
</div>
</div>
</div>
<p>Charles Smith Photography<br />2741 Seminary Ct<br />Louisville, Ky 40206<br />334|398|3432</p>
</body>

</html>