PDA

View Full Version : Anylink Drop-down - ie incompatible - help!



jeff01
10-20-2008, 03:42 AM
1) Script Title: Anylink Drop Down Menu

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

3) Describe problem: I applied the code to my menu and the drop down function works in firefox but not in IE. Instead, IE tried to open the menu title link instead of using it to expand the drop down menu.

I would appreciate any help, thanks!

Here is my code (and I will follow this by the attached css):


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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!-- InstanceBegin template="/Templates/index3columns.dwt" codeOutsideHTMLIsLocked="false" -->

<head>

<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Erwin Aligam - ealigam@gmail.com" />
<meta name="Robots" content="index,follow" />

<title>Culture International</title>
<link href="file:///C|/Documents and Settings/Nobody/Desktop/culture_international_website/images/BrightSide.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style><br />


<style type="text/css">

#dropmenudiv{
position:absolute;
border:0px 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: #FFFFFF;
}

</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="history.html">History</a>'
menu1[1]='<a href="mission.html">Our Mission</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="southeastasia.html">Southeast Asia</a>'
menu2[1]='<a href="india.html">India</a>'
menu2[2]='<a href="indonesia.html">Indonesia</a>'

//Contents for menu 3, and so on
var menu3=new Array()
menu3[0]='<a href="officers.html">Officers</a>'
menu3[1]='<a href="directors.html">Board of Directors</a>'
menu3[2]='<a href="leaders.html">Program Leaders</a>'
menu3[3]='<a href="volunteers.html">Volunteers</a>'

var menuwidth='165px' //default menu width
var menubgcolor='white' //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>


</head>


<body>

<!-- Menu Tabs -->
<!-- InstanceBeginEditable name="topnav" -->
<ul>
<li id="current"><a href="index.html"><span>Home</span></a></li>
<li><a href="about.html"><span>About Us</span></a></li>
<li><a href="programs.html"><span>Programs</span></a></li>
<li><a href="staff.html"><span>Staff</span></a></li>
<li><a href="volunteer.html"><span>Volunteer</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
<!-- InstanceEndEditable --></div>


</body>
<!-- InstanceEnd --></html>

jeff01
10-20-2008, 03:43 AM
Here is the css:



/********************************************
AUTHOR: Erwin Aligam
WEBSITE: http://www.styleshout.com/
TEMPLATE NAME: Bright Side of Life
TEMPLATE CODE: S-0005
VERSION: 1.0
*******************************************/

/********************************************
HTML ELEMENTS
********************************************/

/* top elements */
* { padding: 0; margin: 0; }

body {
margin: 0;
padding: 0;
font: .70em/1.5em Verdana, Tahoma, Helvetica, sans-serif;
color: #666666;
text-align: center;
background-color: #A9BAC3;
background-image: url(bg.gif);
background-repeat: repeat-x;
}

/* links */
a {
color: #4284B0;
background-color: inherit;
text-decoration: none;
}
a:hover {
color: #9EC068;
background-color: inherit;
}

/* headers */
h1, h2, h3 {
font: bold 1em 'Trebuchet MS', Arial, Sans-serif;
color: #333;
}
h1 { font-size: 1.5em; color: #6297BC; }
h2 { font-size: 1.4em; text-transform:uppercase;}
h3 { font-size: 1.3em; }

p, h1, h2, h3 {
margin: 10px 15px;
}
ul, ol {
margin: 10px 30px;
padding: 0 15px;
color: #4284B0;
}
ul span, ol span {
color: #666666;
}

/* images */
img {
border: 0px solid #CCC;
}
img.no-border {
border: none;
}
img.float-right {
margin: 5px 0px 5px 15px;
}
img.float-left {
margin: 5px 15px 5px 0px;
}
a img {
border-top-color: #568EB6;
border-right-color: #568EB6;
border-bottom-color: #568EB6;
border-left-color: #568EB6;
}
a:hover img {
border: 2px solid #CCC !important; /* IE fix*/
border: 2px solid #568EB6;
}

code {
margin: 5px 0;
padding: 10px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
/* white-space: pre; */
background: #FAFAFA;
border: 1px solid #f2f2f2;
border-left: 4px solid #4284B0;
}
acronym {
cursor: help;
border-bottom: 1px solid #777;
}
blockquote {
margin: 15px;
padding: 0 0 0 20px;
background: #FAFAFA;
border: 1px solid #f2f2f2;
border-left: 4px solid #4284B0;
color: #4284B0;
font-family: Georgia, 'Bookman Old Style', Serif;
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
}

/* form elements */
form {
margin:10px; padding: 0;
border: 1px solid #f2f2f2;
background-color: #FAFAFA;
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding: 2px;
border:1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
}
textarea {
width:300px;
padding:2px;
font: normal 1em Verdana, sans-serif;
border:1px solid #eee;
height:100px;
display:block;
color:#777;
}
input.button {
margin: 0;
font: bold 1em Arial, Sans-serif;
border: 1px solid #CCC;
background: #FFF;
padding: 2px 3px;
color: #4284B0;
}

/* search form */
form.searchform {
background: transparent;
border: none;
margin: 0; padding: 0;
}
form.searchform input.textbox {
margin: 0;
width: 120px;
border: 1px solid #9EC630;
background: #FFF;
color: #333;
height: 14px;
vertical-align: top;
}
form.searchform input.button {
margin: 0;
padding: 2px 3px;
font: bold 12px Arial, Sans-serif;
background: #FAFAFA;
border: 1px solid #f2f2f2;
color: #777;
width: 60px;
vertical-align: top;
}

/***********************
LAYOUT
************************/
#wrap {
background: #FFF;
width: 760px;
height: 100%;
text-align: left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#content-wrap {
clear: both;
margin: 0; padding: 0;
background: #FFF;
}

/* header */
#header {
position: relative;
height: 85px;
background: #000 url(headerbg.gif) repeat-x 0% 100%;
}
#header h1#logo {
position: absolute;
margin: 0; padding: 0;
font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -2px;
text-transform: lowercase;
top: 0; left: 5px;
}
#header h2#slogan {
position: absolute;
top:37px;
left: 20px;
color: #666666;
text-indent: 0px;
font: bold 11px Tahoma, 'trebuchet MS', Sans-serif;
text-transform: none;
}
#header form.searchform {
position: absolute;
top: 0; right: -12px;
}

/* main */
#main {
float: left;
padding: 0;
width: 370px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
}

.post-footer {
background-color: #FAFAFA;
padding: 5px; margin: 20px 15px 0 15px;
border: 1px solid #f2f2f2;
font-size: 95%;
}
.post-footer .date {
background: url(clock.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
background: url(comment.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
background: url(page.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}

/* main2 */
#main2 {
float: right;
margin-left: 5px;
padding: 0;
width: 573px;
}

.post-footer {
background-color: #FAFAFA;
padding: 5px; margin: 20px 15px 0 15px;
border: 1px solid #f2f2f2;
font-size: 95%;
}
.post-footer .date {
background: url(clock.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
background: url(comment.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
background: url(page.gif) no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}

/* sidebar */
#sidebar {
float: left;
width: 180px;
margin: 0;
padding: 0;
display: inline;
}
#sidebar ul.sidemenu {
list-style:none;
margin:10px 0 10px 15px;
padding:0;
}
#sidebar ul.sidemenu li {
margin-bottom:1px;
border: 1px solid #f2f2f2;
}
#sidebar ul.sidemenu a {
display:block;
font-weight:bold;
color: #333;
text-decoration:none;
padding:2px 5px 2px 10px;
background: #f2f2f2;
border-left:4px solid #CCC;

min-height:18px;
}

* html body #sidebar ul.sidemenu a { height: 18px; }

#sidebar ul.sidemenu a:hover {
padding:2px 5px 2px 10px;
background: #f2f2f2;
color: #339900;
border-left:4px solid #9EC630;
}

/* rightbar */
#rightbar {
float: right;
width: 200px;
padding: 0;
margin:0;
}

/* Footer */
#footer {
clear: both;
color: #FFF;
background: #A9BAC3;
border-top: 5px solid #568EB6;
margin: 0; padding: 0;
height: 50px;
font-size: 95%;
}
#footer a {
text-decoration: none;
font-weight: bold;
color: #FFF;
}
#footer .footer-left{
float: left;
width: 65%;
}
#footer .footer-right{
float: right;
width: 30%;
}

/* menu tabs */
#header ul {
z-index: 999999;
position: absolute;
margin:0; padding: 0;
list-style:none;
right: 0;
bottom: 6px !important; bottom: 5px;
font: bold 13px Arial, 'Trebuchet MS', Tahoma, verdana, sans-serif;
}
#header li {
display:inline;
margin:0; padding:0;
}
#header a {
float:left;
background: url(tableft.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#header a span {
float:left;
display:block;
background: url(tabright.gif) no-repeat right top;
padding:6px 15px 3px 8px;
color: #FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span {float:none;}
/* End IE5-Mac hack */
#header a:hover span {
color:#FFF;
}
#header a:hover {
background-position:0% -42px;
}
#header a:hover span {
background-position:100% -42px;
}
#header #current a {
background-position:0% -42px;
color: #FFF;
}
#header #current a span {
background-position:100% -42px;
color: #FFF;
}
/* end menu tabs */

/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }

/* additional classes */
.clear { clear: both; }
.green { color: #9EC630; }
.gray { color: #BFBFBF; }