PDA

View Full Version : Drop Down Menu not functioning in Internet Explorer 7



Melayan
Oct 16th, 2008, 12:18 AM
Hi everyone. First time poster here. First off, I have very little knoweledge about this stuff. I use Frontpage 2003 to edit/maintain the site. There is supposed to be a webmaster to do this, but we don't have one. So it's just me. I've fumbled along to get as far as I have. Enough about that.

We recently purchased a frontpage template online to create our new site and it came with a program called Leo Mega DDM for doing the drop down menu.

**The problem is that the menu does not function correctly when viewed in Internet Explorer 7. The drop down portion does not drop down when you mouse over it. It has been tested and works fine in Firefox and Google Chrome.

When I preview the site in frontpage using IE7 I get this error (http://i251.photobucket.com/albums/gg300/melayan/error1.jpg).

This (http://i251.photobucket.com/albums/gg300/melayan/whats_wrong.jpg) is what it looks like in IE7.

This (http://i251.photobucket.com/albums/gg300/melayan/whats_right.jpg) is what it looks like in Firefox and Chrome.

The following is the code from the menu itself:


<!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">
<!--
LeoMega DDM 1.0
&#169;2005 LeoMega(www.leomega.com)
[email protected](For Support)
!-->
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>LeoMega DDM</title>
<!-- BEGIN COPY AREA FOR HEAD TAG AREA ----
<link rel="stylesheet" type="text/css" href="ddm_style.css"/>
<script type="text/javascript" src="ddm_menu.js"></script>
---- END COPY AREA FOR HEAD TAG AREA !-->
<script id="ddmjsh" type="text/javascript" src="ddm_menu.js"></script>
<link rel="stylesheet" type="text/css" href="ddm_style.css" />
</head>

<body>

<div align=center id=ddmcntr><script id="ddmstr" language="JavaScript1.2">document.write(leomegastr);</script></div><div id="seo" class="seodiv"><a href="index.htm" id=ddmlnk1>Home Page</a>, <a href="introduction.htm" id=ddmlnk2>Elected Officials</a>, <a href="adding_pages.htm" id=ddmlnk3>District 1</a>, <a href="style_sheets.htm" id=ddmlnk4>District 2</a>, <a href="license_agreement.htm" id=ddmlnk5>District 3</a>, <a href="assessor.htm" id=ddmlnk6>Assessor</a>, <a href="clerk.htm" id=ddmlnk7>Clerk</a>, <a href="probatejudge.htm" id=ddmlnk8>Probate Judge</a>, <a href="sheriff.htm" id=ddmlnk9>Sheriff</a>, <a href="treasurer.htm" id=ddmlnk10>Treasurer</a>, <a href="products.htm" id=ddmlnk11>Departments</a>, <a href="product2.htm" id=ddmlnk12>Finance</a>, <a href="product4.htm" id=ddmlnk13>GISC</a>, <a href="product5.htm" id=ddmlnk14>Human Resources</a>, <a href="product6.htm" id=ddmlnk15>Info Technology</a>, <a href="juvenile.htm" id=ddmlnk16>Juvenile Services</a>, <a href="legal.htm" id=ddmlnk17>Legal</a>, <a href="product1.htm" id=ddmlnk18>Bureau of Election</a>, <a href="product3.htm" id=ddmlnk19>Fire and Rescue</a>, <a href="purchasing.htm" id=ddmlnk20>Purchasing</a>, <a href="roads.htm" id=ddmlnk21>Roads</a>, <a href="whats_included.htm" id=ddmlnk22>History</a>, <a href="edhomepage.html" id=ddmlnk23>Economic Development</a>, <a href="comprehensive_plan.htm" id=ddmlnk24>Comprehensive Plan</a>, <a href="template2.htm" id=ddmlnk25>County News</a>, <a href="template3.htm" id=ddmlnk26>Courthouse Projects</a>, <a href="faq.htm" id=ddmlnk27>Job Openings</a>, <a href="site_map.htm" id=ddmlnk28>Agendas</a>, <a href="agendas_2004.htm" id=ddmlnk29>2004 Agendas</a>, <a href="agendas_2005.htm" id=ddmlnk30>2005 Agendas</a>, <a href="agendas_2006.htm" id=ddmlnk31>2006 Agendas</a>, <a href="agendas_2007.htm" id=ddmlnk32>2007 Agendas</a>, <a href="contact_info.htm" id=ddmlnk33>Area Services</a>, </div>
<div align="center" id="ddmcntr">
</div>

<script id="ddmfun" language="JavaScript1.2">LeoMegaDynamicMenu();</script>

</body>

</html>



Any help would be appreciated very much, thank you!

rangana
Oct 16th, 2008, 02:05 AM
Your purchased it? Have you contacted support already? [email protected](For Support)

Anyway, the snippet you've provided is incomplete.

We need to be able to see the entire script too.

Melayan
Oct 16th, 2008, 04:07 PM
Yes I tried the support, it comes back with undeliverable.

That's all the code from the drop down menu page itself. I'm not sure what else you might need. Could you be more specific?

Thank you for responding!

Melayan
Oct 16th, 2008, 05:13 PM
Ok I think I found the script to which you are referring. The ddm_menu.js file? here is the code for that: (It was too long for one post so I had to split it, the rest follows in the next post)


var leomegastr= "<table cellspacing=\"0\" cellpadding=\"0\" id=\"LeoMegamenu1\" class=\"ddm1\">";
leomegastr= leomegastr + "<tr>";
leomegastr= leomegastr + "<td>";
leomegastr= leomegastr + "<a class=\"item1\" target=\"_self\" href=\"index.htm\" id=1,0>Home Page</a>";
leomegastr= leomegastr + "</td>";
leomegastr= leomegastr + "<td>";
leomegastr= leomegastr + "<a class=\"item1\" target=\"_self\" & href=\"introduction.htm\" id=2,0>Elected Officials</a>";

leomegastr= leomegastr + "<div class=\"section\">";
leomegastr= leomegastr + "<a class=\"item2\" target=\"\" & href=\"adding_pages.htm\" id=2,1>District 1</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" & href=\"style_sheets.htm\" id=2,2>District 2</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" & href=\"license_agreement.htm\" id=2,3>District 3</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"_self\" & href=\"assessor.htm\" id=2,4>Assessor</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"_self\" & href=\"clerk.htm\" id=2,5>Clerk</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"_self\" & href=\"probatejudge.htm\" id=2,6>Probate Judge</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"_self\" & href=\"sheriff.htm\" id=2,7>Sheriff</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"_self\" href=\"treasurer.htm\" id=2,8>Treasurer</a>";
leomegastr= leomegastr + "</div>";
leomegastr= leomegastr + "</td>";
leomegastr= leomegastr + "<td>";
leomegastr= leomegastr + "<a class=\"item1\" target=\"_self\" & href=\"products.htm\" id=3,0>Departments</a>";

leomegastr= leomegastr + "<div class=\"section\">";
leomegastr= leomegastr + "<a class=\"item2\" target=\"\" href=\"product2.htm\" id=3,1>Finance</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" href=\"product4.htm\" id=3,2>GISC</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" href=\"product5.htm\" id=3,3>Human Resources</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" href=\"product6.htm\" id=3,4>Info Technology</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"_self\" href=\"juvenile.htm\" id=3,5>Juvenile Services</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" href=\"legal.htm\" id=3,6>Legal</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" & href=\"product1.htm\" id=3,7>Bureau of Election</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" & href=\"product3.htm\" id=3,8>Fire and Rescue</a>";


leomegastr= leomegastr + "<a class=\"item2\" target=\"\" & href=\"purchasing.htm\" id=3,9>Purchasing</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" & href=\"roads.htm\" id=3,10>Roads</a>";
leomegastr= leomegastr + "</div>";
leomegastr= leomegastr + "</td>";

leomegastr= leomegastr + "<td>";
leomegastr= leomegastr + "<a class=\"item1\" target=\"_self\" & href=\"whats_included.htm\" id=4,0>History</a>";

leomegastr= leomegastr + "<div class=\"section\">";
leomegastr= leomegastr + "<a class=\"item2\" target=\"\" href=\"edhomepage.html\" id=4,1>Economic Development</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" href=\"comprehensive_plan.htm\" id=4,2>Comprehensive Plan</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" & href=\"template2.htm\" id=4,3>County News</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" & href=\"template3.htm\" id=4,4>Courthouse Projects</a>";
leomegastr= leomegastr + "</div>";
leomegastr= leomegastr + "</td>";
leomegastr= leomegastr + "<td>";
leomegastr= leomegastr + "<a class=\"item1\" target=\"_self\" & href=\"faq.htm\" id=5,0>Job Openings</a>";
leomegastr= leomegastr + "</td>";
leomegastr= leomegastr + "<td>";
leomegastr= leomegastr + "<a class=\"item1\" target=\"_self\" & href=\"site_map.htm\" id=6,0>Agendas</a>";

leomegastr= leomegastr + "<div class=\"section\">";
leomegastr= leomegastr + "<a class=\"item2\" target=\"\" & href=\"agendas_2004.htm\" id=6,1>2004 Agendas</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" & href=\"agendas_2005.htm\" id=6,2>2005 Agendas</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" & href=\"agendas_2006.htm\" id=6,3>2006 Agendas</a>";

leomegastr= leomegastr + "<a class=\"item2\" target=\"\" & href=\"agendas_2007.htm\" id=6,4>2007 Agendas</a>";
leomegastr= leomegastr + "</div>";
leomegastr= leomegastr + "</td>";
leomegastr= leomegastr + "<td>";
leomegastr= leomegastr + "<a class=\"item1\" target=\"_self\" & href=\"contact_info.htm\" id=7,0>Area Services</a>";
leomegastr= leomegastr + "</td>";
leomegastr= leomegastr + "</tr>";
leomegastr= leomegastr + "</table>";


function LeoMegaMenu(id) {

/* Type of the menu: "horizontal" or "vertical" */
this.type = "horizontal";

/* Delay (in miliseconds >= 0): show-hide menu
* Hide must be > 0 */
this.delay = {
"show": 0,
"hide": 400
}
/* Change the default position of sub-menu by Y pixels from top and X pixels from left
* Negative values are allowed */
this.position = {
"level1": { "top": 0, "left": 0},
"levelX": { "top": 0, "left": 0}
}

/* fix ie selectbox bug ? */
this.fixIeSelectBoxBug = true;

/* Z-index property for .section */
this.zIndex = {
"visible": 500,
"hidden": -1
};

// Browser detection
this.browser = {
"ie": Boolean(document.body.currentStyle),
"ie5": (navigator.appVersion.indexOf("MSIE 5.5") != -1 || navigator.appVersion.indexOf("MSIE 5.0") != -1),
"ie6": (navigator.appVersion.indexOf("MSIE 6.0") != -1)
};

if (!this.browser.ie) {
this.browser.ie5 = false;
this.browser.ie6 = false;
}

/* Initialize the menu */
this.init = function() {
if (!document.getElementById(this.id)) { return alert("LeoMegaMenu.init() failed. Element '"+ this.id +"' does not exist."); }
if (this.type != "horizontal" && this.type != "vertical") { return alert("LeoMegaMenu.init() failed. Unknown menu type: '"+this.type+"'"); }
if (this.browser.ie && this.browser.ie5) { fixWrap(); }
fixSections();
parse(document.getElementById(this.id).childNodes, this.tree, this.id);
}

/* Search for .section elements and set width for them */
function fixSections() {
var arr = document.getElementById(self.id).getElementsByTagName("div");
var sections = new Array();
var widths = new Array();

for (var i = 0; i < arr.length; i++) {
if (arr[i].className == "section") {
sections.push(arr[i]);
}
}
for (var i = 0; i < sections.length; i++) {
widths.push(getMaxWidth(sections[i].childNodes));
}
for (var i = 0; i < sections.length; i++) {
sections[i].style.width = (widths[i]) + "px";
}
if (self.browser.ie) {
for (var i = 0; i < sections.length; i++) {
setMaxWidth(sections[i].childNodes, widths[i]);
}
}
}

function fixWrap() {
var elements = document.getElementById(self.id).getElementsByTagName("a");
for (var i = 0; i < elements.length; i++) {
if (/item2/.test(elements[i].className)) {
elements[i].innerHTML = '<div nowrap="nowrap">'+elements[i].innerHTML+'</div>';
}
}
}

/* Search for an element with highest width among given nodes, return that width */
function getMaxWidth(nodes) {
var maxWidth = 0;
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType != 1 || /section/.test(nodes[i].className)) { continue; }
if (nodes[i].offsetWidth > maxWidth) { maxWidth = nodes[i].offsetWidth; }
}
return maxWidth;
}

/* Set width for item2 elements */
function setMaxWidth(nodes, maxWidth) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType == 1 && /item2/.test(nodes[i].className) && nodes[i].currentStyle) {
if (self.browser.ie5) {
nodes[i].style.width = (maxWidth) + "px";
} else {
nodes[i].style.width = (maxWidth - parseInt(nodes[i].currentStyle.paddingLeft) - parseInt(nodes[i].currentStyle.paddingRight)) + "px";
}
}
}
}

/* Parse nodes, create events, position elements */
function parse(nodes, tree, id) {
for (var i = 0; i < nodes.length; i++) {
if (1 != nodes[i].nodeType) {
continue;
}
switch (true) {
// .item1
case /\bitem1\b/.test(nodes[i].className):
nodes[i].id = id + "-" + tree.length;
tree.push(new Array());
nodes[i].onmouseover = itemOver;
nodes[i].onmouseout = itemOut;
break;
// .item2
case /\bitem2\b/.test(nodes[i].className):
nodes[i].id = id + "-" + tree.length;
tree.push(new Array());
nodes[i].onmouseover = itemOver;
nodes[i].onmouseout = itemOut;
break;
// .section
case /\bsection\b/.test(nodes[i].className):
// id, events
nodes[i].id = id + "-" + (tree.length - 1) + "-section";
nodes[i].onmouseover = sectionOver;
nodes[i].onmouseout = sectionOut;
// position
var box1 = document.getElementById(id + "-" + (tree.length - 1));
var box2 = document.getElementById(nodes[i].id);
var el = new Element(box1.id);
if (1 == el.level) {
if ("horizontal" == self.type) {
box2.style.top = box1.offsetTop + box1.offsetHeight + self.position.level1.top + "px";
if (self.browser.ie5) {
box2.style.left = self.position.level1.left + "px";
} else {
box2.style.left = box1.offsetLeft + self.position.level1.left + "px";
}
} else if ("vertical" == self.type) {
box2.style.top = box1.offsetTop + self.position.level1.top + "px";
if (self.browser.ie5) {
box2.style.left = box1.offsetWidth + self.position.level1.left + "px";
} else {
box2.style.left = box1.offsetLeft + box1.offsetWidth + self.position.level1.left + "px";
}
}
} else {
box2.style.top = box1.offsetTop + self.position.levelX.top + "px";
box2.style.left = box1.offsetLeft + box1.offsetWidth + self.position.levelX.left + "px";
}
// sections, sectionsShowCnt, sectionsHideCnt
self.sections.push(nodes[i].id);
self.sectionsShowCnt.push(0);
self.sectionsHideCnt.push(0);
if (self.fixIeSelectBoxBug && self.browser.ie6) {
nodes[i].innerHTML = nodes[i].innerHTML + '<iframe id="'+nodes[i].id+'-iframe" src="javascript:false;" scrolling="no" frameborder="0" style="position: absolute; top: 0px; left: 0px; display: none; filter:alpha(opacity=0);"></iframe>';
}
break;
}
if (nodes[i].childNodes) {
if (/\bsection\b/.test(nodes[i].className)) {
parse(nodes[i].childNodes, tree[tree.length - 1], id + "-" + (tree.length - 1));
} else {
parse(nodes[i].childNodes, tree, id);
}
}
}
}

/* event, item:onmouseover */
function itemOver() {
//debug("itemOver("+this.id+") , visible = " + self.visible);
self.itemShowCnt++;
var id_section = this.id + "-section";
if (self.visible.length) {
var el = new Element(self.visible.getLast());
el = document.getElementById(el.getParent().id);
if (/item\d-active/.test(el.className)) {
el.className = el.className.replace(/(item\d)-active/, "$1");
}
}
if (self.sections.contains(id_section)) {
clearTimers();
self.sectionsHideCnt[self.sections.indexOf(id_section)]++;
var cnt = self.sectionsShowCnt[self.sections.indexOf(id_section)];
var timerId = setTimeout(function(a, b) { return function() { self.showSection(a, b); } } (id_section, cnt), self.delay.show);
self.timers.push(timerId);
} else {
if (self.visible.length) {
clearTimers();
var timerId = setTimeout(function(a, b) { return function() { self.showItem(a, b); } } (this.id, self.itemShowCnt), self.delay.show);
self.timers.push(timerId);
}
}
}

/* event, item:onmouseout */
function itemOut() {
//debug("itemOut("+this.id+") , visible = " + self.visible);
self.itemShowCnt++;
var id_section = this.id + "-section";
if (self.sections.contains(id_section)) {
self.sectionsShowCnt[self.sections.indexOf(id_section)]++;
if (self.visible.contains(id_section)) {
var cnt = self.sectionsHideCnt[self.sections.indexOf(id_section)];
var timerId = setTimeout(function(a, b) { return function() { self.hideSection(a, b); } }(id_section, cnt), self.delay.hide);
self.timers.push(timerId);
}
}
}

/* event, section:onmouseover */
function sectionOver() {
//debug("sectionOver("+this.id+") , visible = " + self.visible);
self.sectionsHideCnt[self.sections.indexOf(this.id)]++;
var el = new Element(this.id);
var parent = document.getElementById(el.getParent().id);
if (!/item\d-active/.test(parent.className)) {
parent.className = parent.className.replace(/(item\d)/, "$1-active");
}
}

/* event, section:onmouseout */
function sectionOut() {
//debug("sectionOut("+this.id+") , visible = " + self.visible);
self.sectionsShowCnt[self.sections.indexOf(this.id)]++;
var cnt = self.sectionsHideCnt[self.sections.indexOf(this.id)];
var timerId = setTimeout(function(a, b) { return function() { self.hideSection(a, b); } }(this.id, cnt), self.delay.hide);
self.timers.push(timerId);
}

/* Show section (1 argument passed)
* Try to show section (2 arguments passed) - check cnt with sectionShowCnt */
this.showSection = function(id, cnt) {
if (typeof cnt != "undefined") {
if (cnt != this.sectionsShowCnt[this.sections.indexOf(id)]) { return; }
}
//debug("showSection("+id+", "+cnt+") , visible = " + this.visible);
this.sectionsShowCnt[this.sections.indexOf(id)]++;
if (this.visible.length) {
if (id == this.visible.getLast()) { return; }
var el = new Element(id);
var parents = el.getParentSections();
//debug("getParentSections("+el.id+") = " + parents);
for (var i = this.visible.length - 1; i >= 0; i--) {
if (parents.contains(this.visible[i])) {
break;
} else {
this.hideSection(this.visible[i]);
}
}
}
var el = new Element(id);
var parent = document.getElementById(el.getParent().id);
if (!/item\d-active/.test(parent.className)) {
parent.className = parent.className.replace(/(item\d)/, "$1-active");
}
if (document.all) { document.getElementById(id).style.display = "block"; }
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.zIndex = this.zIndex.visible;
if (this.fixIeSelectBoxBug && this.browser.ie6) {
var div = document.getElementById(id);
var iframe = document.getElementById(id+"-iframe");
iframe.style.width = div.offsetWidth + parseInt(div.currentStyle.borderLeftWidth) + parseInt(div.currentStyle.borderRightWidth);
iframe.style.height = div.offsetHeight + parseInt(div.currentStyle.borderTopWidth) + parseInt(div.currentStyle.borderBottomWidth);
iframe.style.top = -parseInt(div.currentStyle.borderTopWidth);
iframe.style.left = -parseInt(div.currentStyle.borderLeftWidth);
iframe.style.zIndex = div.style.zIndex - 1;
iframe.style.display = "block";
}
this.visible.push(id);
}

/* Emulating an empty non-existent section, we have to hide elements, works like showSection() */
this.showItem = function(id, cnt) {
if (typeof cnt != "undefined") {
if (cnt != this.itemShowCnt) { return; }
}
this.itemShowCnt++;
if (this.visible.length) {
var el = new Element(id + "-section");
var parents = el.getParentSections();
//debug("showItem() getParentSections("+el.id+") = " + parents);
for (var i = this.visible.length - 1; i >= 0; i--) {
if (parents.contains(this.visible[i])) {
break;
} else {
this.hideSection(this.visible[i]);
}
}
}
}





Continued in next post...

Melayan
Oct 16th, 2008, 05:14 PM
Here is the rest of it:



/* Hide section (1 argument passed)
* Try to hide section (2 arguments passed) - check cnt with sectionHideCnt */
this.hideSection = function(id, cnt) {
if (typeof cnt != "undefined") {
if (cnt != this.sectionsHideCnt[this.sections.indexOf(id)]) { return; }
if (id == this.visible.getLast()) {
//debug("hideSectionAll("+id+", "+cnt+") , visible = " + this.visible);
for (var i = this.visible.length - 1; i >= 0; i--) {
this.hideSection(this.visible[i]);
}
return;
}
}
//debug("hideSection("+id+", "+cnt+") , visible = " + this.visible);
var el = new Element(id);
var parent = document.getElementById(el.getParent().id);
if (/item\d-active/.test(parent.className)) {
parent.className = parent.className.replace(/(item\d)-active/, "$1");
}
document.getElementById(id).style.zIndex = this.zIndex.hidden;
document.getElementById(id).style.visibility = "hidden";
if (document.all) { document.getElementById(id).style.display = "none"; }
if (this.fixIeSelectBoxBug && this.browser.ie6) {
var iframe = document.getElementById(id+"-iframe");
iframe.style.display = "none";
}
if (this.visible.contains(id)) {
if (id == this.visible.getLast()) {
this.visible.pop();
} else {
//throw "LeoMegaMenu.hideSection('"+id+"', "+cnt+") failed, trying to hide a section that is not the deepest visible section";
return;
}
} else {
//throw "LeoMegaMenu.hideSection('"+id+"', "+cnt+") failed, cannot hide element that is not visible";
return;
}
this.sectionsHideCnt[this.sections.indexOf(id)]++;
}

/* Element (.section, .item2 etc) */
function Element(id) {

this.menu = self;
this.id = id;

/* Get Level of given id
* Examples: menu-1 (1 level), menu-1-4 (2 level) */
this.getLevel = function() {
var s = this.id.substr(this.menu.id.length);
return s.substrCount("-");
}

/* Get parent Element */
this.getParent = function() {
var s = this.id.substr(this.menu.id.length);
var a = s.split("-");
a.pop();
return new Element(this.menu.id + a.join("-"));
}

/* Check whether an element has a parent element */
this.hasParent = function() {
var s = this.id.substr(this.menu.id.length);
var a = s.split("-");
return a.length > 2;
}

/* Check whether an element has a sub-section */
this.hasChilds = function() {
return Boolean(document.getElementById(this.id + "-section"));
}

/* Get parent section elements for current section */
this.getParentSections = function() {
var s = this.id.substr(this.menu.id.length);
s = s.substr(0, s.length - "-section".length);
var a = s.split("-");
a.shift();
a.pop();
var s = this.menu.id;
var parents = [];
for (var i = 0; i < a.length; i++) {
s += ("-" + a[i]);
parents.push(s + "-section");
}
return parents;
}

this.level = this.getLevel();
}

/* Clear all timers set with setTimeout() */
function clearTimers() {
for (var i = self.timers.length - 1; i >= 0; i--) {
clearTimeout(self.timers[i]);
self.timers.pop();
}
}

var self = this;
this.id = id; /* menu id */
this.tree = []; /* tree structure of menu */
this.sections = []; /* all sections, required for timeout */
this.sectionsShowCnt = [];
this.sectionsHideCnt = [];
this.itemShowCnt = 0;
this.timers = []; // timeout ids
this.visible = []; /* visible section, ex. Array("menu-0-section", ..) , succession is important: top to bottom */
}

/* Finds the index of the first occurence of item in the array, or -1 if not found */
if (typeof Array.prototype.indexOf == "undefined") {
Array.prototype.indexOf = function(item) {
for (var i = 0; i < this.length; i++) {
if (this[i] === item) {
return i;
}
}
return -1;
}
}

/* Check whether array contains given string */
if (typeof Array.prototype.contains == "undefined") {
Array.prototype.contains = function(s) {
for (var i = 0; i < this.length; i++) {
if (this[i] === s) {
return true;
}
}
return false;
}
}

/* Counts the number of substring occurrences */
if (typeof String.prototype.substrCount == "undefined") {
String.prototype.substrCount = function(s) {
return this.split(s).length - 1;
}
}

/* Get the last element from the array */
if (typeof Array.prototype.getLast == "undefined") {
Array.prototype.getLast = function() {
return this[this.length-1];
}
}

function LeoMegaDynamicMenu()
{
var ddm1 = new LeoMegaMenu('LeoMegamenu1');
ddm1.delay.show = 0;
ddm1.delay.hide = 400;
ddm1.position.levelX.left = 2;
ddm1.init();
}

Thanks again!

abduraooft
Oct 16th, 2008, 05:18 PM
Hi Melayanm, please edit your above posts and add
][/COLOR] tags around the codes, so that it'd be easy to read.

Melayan
Oct 16th, 2008, 05:36 PM
Hi Melayanm, please edit your above posts and add
][/COLOR] tags around the codes, so that it'd be easy to read.

Code tags added. Thank you!

rangana
Oct 17th, 2008, 02:13 AM
How about the CSS?

Melayan
Oct 17th, 2008, 06:31 PM
How about the CSS?

Ok, here is the ddm_style.css file:



.ddm1 {
font: normal normal 11px Verdana, Arial, sans-serif;
color: #FFF;
background: #3862A2;
display: block;
height: 30px;
vertical-align: middle;
padding-top: 3px;
}
a:link { color: #FFF; }
a:visited { color: #FFF; }

.ddm1 .item1,
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
padding: 4px 14px 4px 20px;
background: url("ddmon.gif") no-repeat left #E5DABF;
color: #202B4A;
text-decoration: none;
display: block;
white-space: nowrap;
position: relative;
}
.ddm1 .item1,
.ddm1 .item1:visited {
background: url("ddmoff.gif") no-repeat left #3862A2; /* Background Color of Main Menu*/
color: #FFF; /* Font Color of Main Menu*/
padding: 4px 14px 4px 20px;
}
}
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
background: url("ddmon.gif") no-repeat left #E5DABF; /* Hover Color of Main Menu*/
color: #202B4A; /* Hover Fonts Color of Main Menu*/
padding: 4px 14px 4px 20px;
}
.ddm1 .item2,
.ddm1 .item2:hover,
.ddm1 .item2-active,
.ddm1 .item2:visited,
.ddm1 .item2-active:hover {
padding: 2px 8px 4px 8px;
text-align: left;
color: #000000;
text-decoration: none;
display: block;
white-space: nowrap;
position: relative;
z-index: 500;
filter:alpha(opacity=100);
}
.ddm1 .item2 {
background: #B9C6D6; /* Background Color of Sub Menu*/
color: #000000; /* Fonts Color of Sub Menu*/
border-left: 1px solid #C09056;
border-right: 1px solid #C09056;
border-bottom: 1px solid #C09056;
}
.ddm1 .item2:hover,
.ddm1 .item2-active,
.ddm1 .item2-active:hover {
background: #3862A2; /* Hover Color of Sub Menu*/
color: #FFFFFF; /* Hover Fonts Color of Sub Menu*/
}
.ddm1 .arrow,
.ddm1 .arrow:hover {
padding: 3px 16px 4px 8px;
}
.ddm1 .item2 img,
.ddm1 .item2-active img{
position: absolute;
top: 4px;
right: 1px;
border: 0;
}
.ddm1 .section {
border: 1px solid #B9C6D6; /* Sub Menu BORDER Width and Color*/
position: absolute;
visibility: hidden;
z-index: -1;
}

* html .ddm1 td { position: relative; } /* ie 5.0 fix */
.seodiv {
display: none;
}

Melayan
Oct 17th, 2008, 06:33 PM
And here is the ddm_preview.htm file if it helps:


<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>- : : : - LeoMega Menu Preview - : : : </title>
<link rel="stylesheet" type="text/css" href="ddm_style.css" />
<script type="text/javascript" src="ddm_menu.js"></script>
</head>
<body>
<div align="right"></div>
<span id="menulyr" style="position:absolute; left:14px; top:21px; width:439px; height:19px; background-color:#FFFFFF; layer-background-color:#FFFFFF; border: 1px none #000000">
<p>
<script language="JavaScript1.2">document.write(leomegastr);LeoMegaDynamicMenu();</script>
</p>
</span>
</body>
</html>


Thank you :)

Melayan
Oct 20th, 2008, 04:21 PM
Is there any other information I can provide that might help?

rangana
Oct 21st, 2008, 01:56 AM
Hi Melayan,

I'm sorry for not coming back on this thread. Honestly, I forgot about this.

Anyway, drop down is showing to me on IE7 and is identical too on FF. What was really the problem?

Melayan
Oct 21st, 2008, 04:14 PM
Hi Melayan,

I'm sorry for not coming back on this thread. Honestly, I forgot about this.

Anyway, drop down is showing to me on IE7 and is identical too on FF. What was really the problem?

The problem is still there. How are you viewing it in IE7?

I just uploaded the new site and tested it and the drop down menu still does not drop.

Thank you for replying :)

rangana
Oct 22nd, 2008, 02:14 AM
On IE7, Elected Officials, Departments, History and Agenda shows the drop down, exactly the same as what FF is showing.

Do you have a link to the page you've uploaded?

Melayan
Oct 22nd, 2008, 09:10 PM
On IE7, Elected Officials, Departments, History and Agenda shows the drop down, exactly the same as what FF is showing.

Do you have a link to the page you've uploaded?

Well that is interesting! I have tried it on a half dozen pc's here and it doesn't work on any of them.

The site is live now here (http://www.co.mckinley.nm.us/).

Is there something else that could be jacking it up for me? We all use Windows XP Pro and Intenet Explorer 7.

rangana
Oct 23rd, 2008, 02:08 AM
The link you've given shows Network Error at my end (as per time being).

Anyway, this is your code when compiled at my end (Please refer to the attachment).

Works fine on IE7 on XP and FF.

Also, just a thought, try to check if JS is disabled at you end.

Try a simple alert function to see if it runs:


<script type="text/javascript">
window.onload=function()
{
alert('Yes!. JS is enabled');
}
</script>


If a message appears, then you have JS enabled, if it's not then you need to enable it.

Melayan
Oct 23rd, 2008, 09:50 PM
The link you've given shows Network Error at my end (as per time being).

Anyway, this is your code when compiled at my end (Please refer to the attachment).

Works fine on IE7 on XP and FF.

Also, just a thought, try to check if JS is disabled at you end.

Try a simple alert function to see if it runs:


<script type="text/javascript">
window.onload=function()
{
alert('Yes!. JS is enabled');
}
</script>


If a message appears, then you have JS enabled, if it's not then you need to enable it.

Please try the site again here (http://www.co.mckinley.nm.us/). Not sure what was going on last night, I couldn't hit it from home either. Now I can though.

I tested the script thing and got the message so JS is enabled.

I had four friends outside our network try the site today and they can hit it, but the two people who use IE7 did not see functioning drop downs. The one with IE6 and the one with FF had no problems.

I am so confused with this. :(

rangana
Oct 24th, 2008, 01:50 AM
It's still giving me a Network Error.

Have you tried the attachment I've sent? It's working fine.

Melayan
Oct 24th, 2008, 06:39 PM
It's still giving me a Network Error.

Have you tried the attachment I've sent? It's working fine.

What do you want me to do with the attachment? Is that to replace my .js file?

rangana
Oct 25th, 2008, 04:56 AM
Save it as .htm/.html. It was my compilation on your code base on what you said from the previous posts on this thread.

jemeli
Jan 30th, 2009, 04:54 PM
Please, help me....

I have been fighting this problem for days now and I just canīt get it to work. I inserted a spry menu bar in Dreamweaver as an external css and it works fine in Safari, Firefox and Opera, but not in Internet Explorer. The links does show, looks fine, but when I go over the link that should open a submenu, nothing happens. Links background does not change as itīs suppose to and no submenu opens.... Iīll put my css here, in case someone can and feels like helping. Thankyou SO much if you can save my sanity...



@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

LAYOUT INFORMATION: describes box model, positioning, z-order

*******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
font-size: small;
color: #C53830;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
float: right;
font-weight: bold;
font-style: normal;
letter-spacing: 1px;
width: 615px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
cursor: default;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
color: #FFFFFF;
background-color: #c53830;
font-size: small;
width: 615px;
float: left;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
position: relative;
text-align: center;
cursor: default;
width: 123px;
float: left;
color: #c53830;
background-color: #FFFFFF;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
z-index: 1020;
cursor: default;
width: 123px;
position: absolute;
left: -1000em;

}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
height: 31px;
color: #FFFFFF;
background-color: #C53830;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
color: #C53830;
background-color: #FFFFFF;
float: none;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-position: left;
width: 123px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
height: 31px;
width: 123px;
margin: -1em 0 0 10em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
width: 123px;
color: #c53830;
background-color: #FFFFFF;
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #FFFFFF;
color: #c53830;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
line-height: normal;
width: 105px;
padding-top: 0.5em;
padding-right: 0.75em;
padding-bottom: 0.5em;
padding-left: 0.75em;
float: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus, #MenuBarHorizonta li.sfhover ul ul {
left: -999em;
background-color: #C53830;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
border-top-color: #C53830;
border-right-color: #C53830;
border-bottom-color: #C53830;
border-left-color: #C53830;
width: 105px;
float: none;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #c53830;
color: #FFF;
width: 105px;
}

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 85% 50%;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #C53830;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 85% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 85% 50%;
background-color: #C53830;
color: #FFFFFF;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 85% 50%;
}

/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
f\loat: left;
background: #transparent;
}
}

rangana
Jan 31st, 2009, 05:23 AM
jemeli, you should not hi-jack, someone else's thread.

Try search your problem about "SPRY dropdown" here in CF, if nothing exists that fixes your problem, please create a different thread.

Oh, and please surround your codes with
tags.

Excavator
Jan 31st, 2009, 05:35 AM
IE8 has a different idea for your dropdown:

http://mtaonline.net/~stewarta/Clipboard02.jpg

jemeli
Feb 2nd, 2009, 09:44 AM
Ok, Iīm sorry, I didnīt realise I stole someones threat. I will make a new threat.

abduraooft
Feb 2nd, 2009, 09:47 AM
Ok, Iīm sorry, I didnīt realise I stole someones threat. I will make a new threat.
It's not threat, it's thread (http://en.wikipedia.org/wiki/Threaded_discussion) :thumbsup:

mteofbel
Dec 13th, 2009, 07:08 PM
I saw on your website that you got your problem fixed. I am having the exact same issue. What did you do to get it to work? I tried the other js script that was posted and it worked, but I still can't get the dropdowns on IE. Thanks.

drhowarddrfine
Dec 13th, 2009, 08:01 PM
I saw on your website that you got your problem fixed. I am having the exact same issue. What did you do to get it to work? I tried the other js script that was posted and it worked, but I still can't get the dropdowns on IE. Thanks.

You won't get anywhere trying to revive someone elses year old thread. Start your own. Provide a link to your site. Then you'll get help.