...

View Full Version : Another Suckerfish Menu Problem



tlarson
01-14-2008, 05:47 PM
I just read a post (http://www.codingforums.com/showthread.php?t=131214) where the user was having a problem with a suckerfish menu. I'm having a very similar problem with Internet Explorer with Vista on a site that I maintain for a PBS television station (http://www.lakelandptv.org) where my menus are showing up in the wrong positions, however my css is based on a bit different suckerfish code:

HTML:

<div class="moduletable">
<script type="text/javascript" language="JavaScript" src="http://www.lakelandptv.org/templates/lakeland/js/menu.js"></script>
<div class="menu-suckerfish-horizontal">
<ul id="menulist_root-suckerfish-horizontal" class="mainlevel-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php" class="mainlevel_active-suckerfish-horizontal">
<span class="expanded">Home</span></a>
<ul id="menulist_1-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=14&amp;Itemid=62" class="sublevel-suckerfish-horizontal">Digital Television (DTV)</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_contact&amp;Itemid=63" class="sublevel-suckerfish-horizontal">Contact Us</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=90&amp;Itemid=160" class="sublevel-suckerfish-horizontal">Employment</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_jcalpro&amp;Itemid=119" class="sublevel_current-suckerfish-horizontal" id="active_menu-suckerfish-horizontal">Events Calendar</a></li>
<li><a href="http://209.191.211.227:81/fmi/iwp/cgi?-db=PreferencePoll%2007&amp;-loadframes" class="sublevel-suckerfish-horizontal">Preference Poll</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=68&amp;Itemid=128" class="sublevel-suckerfish-horizontal">Privacy Policy</a></li>
</ul>
</li>
<li><a href="#" onclick="javascript: window.open('https://www.lakelandptv.org/', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false" class="mainlevel-suckerfish-horizontal"><span class="expanded">Support</span></a>
<ul id="menulist_2-suckerfish-horizontal">
<li><a href="#" onclick="javascript: window.open('https://www.lakelandptv.org/', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false" class="sublevel-suckerfish-horizontal">Join/Renew</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=20&amp;Itemid=51" class="sublevel-suckerfish-horizontal">Employer Gift</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=21&amp;Itemid=52" class="sublevel-suckerfish-horizontal">Business Support</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=23&amp;Itemid=67" class="sublevel-suckerfish-horizontal">Member Benefits</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=75&amp;Itemid=133" class="sublevel-suckerfish-horizontal">Future Planning</a></li>
</ul>
</li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=24&amp;Itemid=103" class="mainlevel-suckerfish-horizontal"><span class="expanded">Programs</span></a>
<ul id="menulist_3-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=24&amp;Itemid=38" class="sublevel-suckerfish-horizontal">Programs A-Z</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_wrapper&amp;Itemid=101&amp;schedule=1" class="sublevel-suckerfish-horizontal">TV Schedule</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=47&amp;Itemid=118" class="sublevel-suckerfish-horizontal">Lakeland Kids</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=35&amp;Itemid=97" class="sublevel-suckerfish-horizontal">Local Productions</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_wrapper&amp;Itemid=170&amp;schedule=1" class="sublevel-suckerfish-horizontal">The War</a></li>
</ul>
</li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=35&amp;Itemid=97&amp;show=3" class="mainlevel-suckerfish-horizontal"><span class="expanded">Lakeland News at Ten</span></a>
<ul id="menulist_4-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=blogcategory&amp;id=15&amp;Itemid=34" class="sublevel-suckerfish-horizontal"><span class="expanded">News</span></a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=44&amp;Itemid=110" class="sublevel-suckerfish-horizontal">Weather</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=blogcategory&amp;id=17&amp;Itemid=36" class="sublevel-suckerfish-horizontal"><span class="expanded">Sports</span></a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=38&amp;Itemid=107" class="sublevel-suckerfish-horizontal">Meet the News Team</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=35&amp;Itemid=97&amp;show=3" class="sublevel-suckerfish-horizontal">Watch a Newscast</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=archivesection&amp;id=1&amp;Itemid=121" class="sublevel-suckerfish-horizontal"><span class="expanded">News Archives</span></a></li>
</ul>
</li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_weblinks&amp;Itemid=23" class="mainlevel-suckerfish-horizontal"><span class="expanded">Links</span></a>
<ul id="menulist_5-suckerfish-horizontal">
<li><a href="http://www.lakelandptv.org/index.php?option=com_content&amp;task=view&amp;id=53&amp;Itemid=123" class="sublevel-suckerfish-horizontal">Government Contacts</a></li>
<li><a href="http://click.linksynergy.com/fs-bin/stat?id=v9Mowj676bY&amp;offerid=119262.10000025&amp;type=3" target="_blank" class="sublevel-suckerfish-horizontal">Shop PBS</a></li>
<li><a href="http://www.lakelandptv.org/index.php?option=com_wrapper&amp;Itemid=163&amp;schedule=1" class="sublevel-suckerfish-horizontal">War Story Collection</a></li>
</ul>
</li>
</ul>
</div>
</div>

CSS:

/** IE bugs: a:link, a:visited, a:hover need to be styled as well; does not display separator... workaround? */
/** customize colors here */
a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal,
a.mainlevel-suckerfish-horizontal:link, a.mainlevel_active-suckerfish-horizontal:link, a.mainlevel_current-suckerfish-horizontal:link,
a.mainlevel-suckerfish-horizontal:visited, a.mainlevel_active-suckerfish-horizontal:visited, a.mainlevel_current-suckerfish-horizontal:visited {
background-color: 000000;
color: white;
font-weight: bold;

}

a.mainlevel-suckerfish-horizontal:hover, a.mainlevel_active-suckerfish-horizontal:hover, a.mainlevel_current-suckerfish-horizontal:hover {
background-color: #000000;
color: WHITE;
font-weight: bold;

}

a.sublevel-suckerfish-horizontal, a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal,
a.sublevel-suckerfish-horizontal:link, a.sublevel_active-suckerfish-horizontal:link, a.sublevel_current-suckerfish-horizontal:link,
a.sublevel-suckerfish-horizontal:visited, a.sublevel_active-suckerfish-horizontal:visited, a.sublevel_current-suckerfish-horizontal:visited {
color: white;
background-image: url("../images/grey-40.png");
}

a.sublevel-suckerfish-horizontal:hover, a.sublevel_active-suckerfish-horizontal:hover, a.sublevel_current-suckerfish-horizontal:hover {
background-color: #000000;
color: WHITE;
font-weight: bold;

}

ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal,
ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal:link, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal:link, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal:link,
ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal:visited, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal:visited, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal:visited {
background-color: blue;
color: white;
font-weight: bold;

}

ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal:hover, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal:hover, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal:hover {
background-color: #E0E0E0;
color: White;
font-weight: bold;

}

ul.mainlevel-suckerfish-horizontal ul .expanded {
display: block;
background-image: url("../images/arrow_right.gif");
background-position: right center;
background-repeat: no-repeat;
padding-right: 10px;
}


/** customize style / layout here */

a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal, span.mainlevel-suckerfish-horizontal,
a.mainlevel-suckerfish-horizontal:link, a.mainlevel_active-suckerfish-horizontal:link, a.mainlevel_current-suckerfish-horizontal:link,
a.mainlevel-suckerfish-horizontal:visited, a.mainlevel_active-suckerfish-horizontal:visited, a.mainlevel_current-suckerfish-horizontal:visited,
a.mainlevel-suckerfish-horizontal:hover, a.mainlevel_active-suckerfish-horizontal:hover, a.mainlevel_current-suckerfish-horizontal:hover,
a.sublevel-suckerfish-horizontal, a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal, span.sublevel-suckerfish-horizontal,
a.sublevel-suckerfish-horizontal:link, a.sublevel_active-suckerfish-horizontal:link, a.sublevel_current-suckerfish-horizontal:link,
a.sublevel-suckerfish-horizontal:visited, a.sublevel_active-suckerfish-horizontal:visited, a.sublevel_current-suckerfish-horizontal:visited,
a.sublevel-suckerfish-horizontal:hover, a.sublevel_active-suckerfish-horizontal:hover, a.sublevel_current-suckerfish-horizontal:hover {
font-weight: bold;
font-size: 100%;
text-align: left;
text-decoration: none;
display: block;
padding: 0.3em 0.3em 0.3em 0.5em; /* top, right, bottom, left */
height: 1em;
line-height: 1em;
white-space: nowrap;
border-bottom: 1px solid #000000; /***** Change is here *****/
}

a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal, span.mainlevel-suckerfish-horizontal {
float: left;
width: auto;
}

a.sublevel-suckerfish-horizontal, a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal, span.sublevel-suckerfish-horizontal {
font-size: 90%;
border-top: 0px solid silver;
}

#active_menu-suckerfish-horizontal,
a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal,
a.mainlevel_active-suckerfish-horizontal:link, a.mainlevel_current-suckerfish-horizontal:link,
a.mainlevel_active-suckerfish-horizontal:visited, a.mainlevel_current-suckerfish-horizontal:visited,
a.mainlevel_active-suckerfish-horizontal:hover, a.mainlevel_current-suckerfish-horizontal:hover,
a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal,
a.sublevel_active-suckerfish-horizontal:link, a.sublevel_current-suckerfish-horizontal:link,
a.sublevel_active-suckerfish-horizontal:visited, a.sublevel_current-suckerfish-horizontal:visited,
a.sublevel_active-suckerfish-horizontal:hover, a.sublevel_current-suckerfish-horizontal:hover {
font-weight: bold;
}

ul.mainlevel-suckerfish-horizontal, .mainlevel-suckerfish-horizontal ul {
padding: 0;
margin: 0;
list-style: none;
}

ul.mainlevel-suckerfish-horizontal {
width: auto;
z-index: 101;
}

ul.mainlevel-suckerfish-horizontal ul {
z-index: 102;
}

ul.mainlevel-suckerfish-horizontal ul ul {
z-index: 103;
}


ul.mainlevel-suckerfish-horizontal li {
padding: 0;
margin: 0;
background: none;
list-style: none;
float: left;
position: relative;
margin-right: 1px;
}

ul.mainlevel-suckerfish-horizontal li li {
position: relative;
width: 168px;
margin: 0;
}

ul.mainlevel-suckerfish-horizontal li li ul {
left: 10em;
top: 0;
}

ul.mainlevel-suckerfish-horizontal ul {
display: none;
position: absolute;
top: 1.65em;
left: 0;
}

ul.mainlevel-suckerfish-horizontal li > ul {
top: 1.65em;
left: auto;

}

ul.mainlevel-suckerfish-horizontal li:hover ul,
ul.mainlevel-suckerfish-horizontal li.hover ul {
display: block;
}


ul.mainlevel-suckerfish-horizontal li:hover ul ul,
ul.mainlevel-suckerfish-horizontal li.hover ul ul {
display: none;
}

ul.mainlevel-suckerfish-horizontal li:hover ul li:hover ul,
ul.mainlevel-suckerfish-horizontal li.hover ul li.hover ul {
display: block;
}


ul.mainlevel-suckerfish-horizontal, ul.mainlevel-suckerfish-horizontal li li {
clear: left;
}

/** separator */
span.mainlevel-suckerfish-horizontal, span.sublevel-suckerfish-horizontal {
border-width: 0px;
padding: 0px;
}

JS:

// based on http://www.alistapart.com/articles/dropdowns and http://www.htmldog.com/articles/suckerfish/dropdowns/
if ((document.all) && (document.getElementById)) {
function MenuListElementHoverFix() {
var _this = this;

if (typeof(Array.prototype.push) == 'undefined') {
// IE < 5.5 does not support push/pop
function push() {
var j = this.length;
for (var i = 0; i < push.arguments.length; ++i) {
this[j] = push.arguments[i];
j++;
}
}
function pop() {
var i = this[this.length - 1];
this.length--;
return i;
}
Array.prototype.push = push;
Array.prototype.pop = pop;
}

this.className = 'hover'; // change the class name to use here if you are not happy with it
this.classNameSuffix = ' ' + this.className;
this.removeClassNameRegExp = new RegExp("\\b ?" + this.className + "\\b");
this.hoverElementStack = new Array();

this.onmouseover = function() {
if (!_this.isHover(this)) {
if (this.getAttribute('is_hover_class_removing') != 'true') {
this.className += _this.classNameSuffix;
}
this.setAttribute('is_hover', 'true');
}
}
this.isHover = function(element) {
return (element.getAttribute('is_hover') == 'true');
}
this.checkNonHoverState = function(element) {
if (!_this.isHover(element)) {
element.className = element.className.replace(_this.removeClassNameRegExp, '');
}
element.removeAttribute('is_hover_class_removing');
}
this.checkLastNonHoverState = function() {
var hoverElement = null;
if (_this.hoverElementStack.length > 0) {
hoverElement = _this.hoverElementStack.pop();
}
for (var i = _this.hoverElementStack.length - 1; i >= 0; i--) {
// we need to apply the "non-hover" class to the children first - else the result is mixed in the IE
var o = _this.hoverElementStack[i];
while (o != null) {
o = o.offsetParent;
if (o == hoverElement) {
_this.checkNonHoverState(_this.hoverElementStack[i]);
break;
}
}
}
if (hoverElement != null) {
_this.checkNonHoverState(hoverElement);
}
}
this.onmouseout = function() {
// all this mess to not change the class immediately (which would cause flickering in the IE)
this.setAttribute('is_hover', 'false');
if (this.getAttribute('is_hover_class_removing') != 'true') {
this.setAttribute('is_hover_class_removing', 'true');
_this.hoverElementStack.push(this);
window.setTimeout(_this.checkLastNonHoverState, 100);
}
}
this.fixElement = function(elementRoot) {
for (var i=0; i < elementRoot.childNodes.length; i++) {
var node = elementRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onmouseover = this.onmouseover;
node.onmouseout = this.onmouseout;
}
this.fixElement(node);
}
};
this.findElement = function(elementRoot) {
for (var i=0; i< elementRoot.childNodes.length; i++) {
var node = elementRoot.childNodes[i];
if (node.nodeName == "UL") {
if ((node.id != '') && ((node.id.indexOf("menu") >= 0) || (node.id.indexOf("nav") >= 0))) {
this.fixElement(node);
continue; // do not iterate through children of already fixed element
}
}
this.findElement(node);
}
};
this.fix = function() {
var node = document.body;
if (node) {
_this.findElement(node);
}
}
this.addOnLoad = function() {
if (window.attachEvent) {
window.attachEvent("onload", this.fix);
} else {
window.onload = this.fix;
}
}
}
(new MenuListElementHoverFix()).addOnLoad();
}

Any help would be greatly appreciated.

Thank you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum