Ok here is the pickle. I have got a navigation menu link list made
from a vertical <ultag. I have a piece of javascript that grabs the
title attribute of each link in the list and displays it as a <span>
inside the link. I am using a bit of CSS to attempt to make it so that
this <spanonly displays on mouseover. This bit working great in
Mozilla but not at all in IE6. What I am trying to figure out (aside
form how to make this work in IE6) is a way to position child elements
in the same space regardless of where thier parents are positioned on
the page. As it is now even if I use absolute position the <span>
appears where it is supposed to but it is offset by whichever link of
the original list the <spanis child to. I would like to have all of
these different <spanbits appear in the exact same place on the page
when you mouseover their parent in the link list. Here is my code so
far.
// HANDLE MULTIPLE LOAD FUNCTIONS
// CALL LOAD FUNCTIONS with addLoadEvent(functionname);
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
// STRIP TITLE ATTTRIBUTES FROM PRIMARY LINKS AND
// REPURPOSE SAME TEXT AS TRAILING SPAN ELEMENT
// IT EFFECTIVELY TRANSFORMS THIS:
// <ul id="primary">
// <li><a href="?q=" title="Go to the home page">Home</a></li>
// <li><a href="?q=about" title="Learn more about Bethlehem
Lutheran Church">About</a></li>
// </ul>
// INTO THIS:
// <ul id="primary">
// <li><a href="?q=">Home<span>Go to the home page</span></a></li>
// <li><a href="?q=about">About<span>Learn more
about...</span></a></li>
// </ul>
// ON THE FLY WITHOUT HACKING CORE MODULES
function primary_tooltips() {
if ( !document.getElementById ||
!document.createElement ||
!document.getElementsByTagName ) {
return;
}
var primary = document.getElementById('globalnav');
var links = primary.getElementsByTagName('a');
for ( var i = 0; i < links.length; i++ ) {
var tip = links[i].getAttribute('title');
links[i].removeAttribute('title');
var newSpan = document.createElement('span');
var newText = document.createTextNode(tip);
newSpan.appendChild(newText);
links[i].appendChild(newSpan);
}
}
addLoadEvent(primary_tooltips);
</script>
<style type="text/css" media="screen">
#globalnav #sidebar_left ul li a {
position:relative; /*this is the key*/
z-index:24;
}
#globalnav #sidebar_left ul li a:hover {
z-index:25;
}
#globalnav #sidebar_left ul li a span {
/* hide the span */
display: none;
}
#globalnav #sidebar_left ul li a:hover span {
/*the span will display just on :hover state*/
width: 20em;
display:block;
background-color: grey;
color: black;
text-align: left;
position:absolute;
left:300px;
}
#menu-caption {
background-color: #930503;
padding: 4px 5px 2px 5px;
}
/* MENU CONTENT ELEMENTS */
#globalnav {
float: 150px;
padding-bottom: 20px;
padding-right: 10px;
border-right: 1px solid #e6e6e6;
font-family: veranda, sans-serif;
}
#globalnav #sidebar_left ul {
margin: 0;
padding: 0;
text-align: right;
font-size: 14px;
}
#globalnav #sidebar_left ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E6E6E6;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}
#globalnav #sidebar_left ul li a {
text-decoration: none;
color: #737373;
font-weight: bold;
}
#globalnav #sidebar_left ul li a:hover {
color: #336699;
}
/* subnav */
#globalnav #sidebar_left ul li .menu {
margin-bottom: 2px;
margin-top: 6px;
}
#globalnav #sidebar_left ul li .menu li {
font-size: 12px;
margin-bottom: 6px;
padding-bottom: 0px;
border: none;
}
#globalnav #sidebar_left ul li .menu li a {
color: #8c8c8c;
font-weight: normal;
line-height: 11px;
}
#globalnav #sidebar_left ul .expanded a {
color: #336699;
}
#globalnav #sidebar_left ul li .menu li .active, #globalnav
#sidebar_left ul li .menu li a:hover {
color: #73994c;
}
</style>
<div id="globalnav">
<div class="column" id="sidebar_left">
<div class="block block-user" id="block-user">
<div class="content">
<ul class="menu">
<li class="leaf"><a href="/whats_happening" title=" Description for
what is happening">What's Happening</a></li>
<li class="leaf"><a href="/what_we_offer" title="">What We
Offer</a></li>
<li class="leaf"><a href="/research_education"
title="">Research/Education</a></li>
<li class="leaf"><a href="/workplace" title="">Workplace</a></li>
<li class="collapsed"><a href="/computers"
title="">Computers</a></li>
<li class="leaf"><a href="/support" title="">Support Your
Library</a></li>
<li class="leaf"><a href="/community" title="">Community</a></li>
<li class="collapsed"><a href="/node/add">create content</a></li>
<li class="leaf"><a href="/entertainment"
title="">Entertainment</a></li>
<li class="leaf"><a href="/library_stuff" title="test description
for Library Stuff!">Library Stuff</a></li>
<li class="leaf"><a href="/user/1">my account</a></li>
<li class="expanded"><a href="/admin">administer</a>
<ul class="menu">
<li class="leaf"><a href="/admin/access">access control</a></li>
<li class="leaf"><a href="/admin/aggregator">aggregator</a></li>
<li class="leaf"><a href="/admin/block">blocks</a></li>
<li class="leaf"><a href="/admin/category">categories</a></li>
<li class="leaf"><a href="/admin/node">content</a></li>
<li class="leaf"><a href="/admin/filters">input formats</a></li>
<li class="leaf"><a href="/admin/logs">logs</a></li>
<li class="leaf"><a href="/admin/menu"
class="active">menus</a></li>
<li class="leaf"><a href="/admin/modules">modules</a></li>
<li class="collapsed"><a href="/admin/settings">settings</a></li>
<li class="leaf"><a href="/admin/themes">themes</a></li>
<li class="leaf"><a href="/admin/path">url aliases</a></li>
<li class="leaf"><a href="/admin/user">users</a></li>
<li class="leaf"><a href="/admin/help">help</a></li>
</ul>
</li>
<li class="leaf"><a href="/logout">log out</a></li>
</ul>
</div>
</div>
</div>
</div>
_______________
<div><div><div><div><div><div><div><div><div><div> Have to love code
generated by CMS...
