I'm trying to create floating text (kind of like what happens with the title attribute) using CSS. Can this be done in Mozilla? This code almost works...
The problem is how to get the co-ordinates for where to place it since people may be using different fonts at different sizes or different zoom levels...for that you need JavaScript I think.
<script type="text/javascript"> // <![CDATA[ function getPos(elm, side) { var pos, pElm; side = side.substring(0, 1).toUpperCase() + side.substring(1); eval('pos = elm.offset' + side); pElm = elm.offsetParent; while (pElm) { eval('pos += pElm.offset' + side); pElm = pElm.offsetParent; } return pos; }
function hover(e) { if (e.target.className == 'hov') { var elm = e.target.childNodes[1]; var top = getPos(e.target, 'top'); var left = getPos(e.target, 'left'); var bottom = e.target.offsetHeight + top; elm.style.top = bottom + 'px'; elm.style.left = left + 'px'; elm.style.display = 'inline'; } }
function unhover(e) { if (e.target.className == 'hov') { var elm = e.target.childNodes[1]; elm.style.display = 'none'; } }
function makeHovers() { var spans = document.getElementsByTagName('span'), i; for (i = 0; i < spans.length; ++i) { if (spans[i].className == 'hov') { spans[i].onmouseover = hover; spans[i].onmouseout = unhover; spans[i].removeAttribute('title'); } } }
window.onload = makeHovers; // ]]> </script>
...
<div> <br />Filler <br />This is <span class="hov">Test 1<span class="hov2">Hover test 1</span></span> which should show hovering text. <br />More Filler <br />This is <span class="hov">Test 2<span class="hov2">Hover test 2</span></span> which should also show hovering text. <br />Even More Filler <br/ > <br />The intent is to create floating text that shows <u>below</u> the item. Is there a way to remove that added space? </div>
Should degrade relatively gracefully and use the title attribute if JavaScript is turned off or unsupported.
Shelumi`El
Jordan
S.D.G
"[M]en are usually satisfied with bad argument only when their convictions rest on other grounds." --John Oman
Um the float is working fine. The weirdness is that its adding a space after the original tag. Am I the only one that is seeing this? Are you telling me that a position: relative CSS styled tag is SUPPOSED to take up space even though it is floating at a place almost completely unrelated to that space?
Yes, Racer. A relatively-positioned element is first rendered in the flow of the page, then removed from it and repositioned according to where it was rendered.
A true "floated" element (float: left; or float: right;) is removed from the flow of the page first, then rendered in relation to other elements that can clear it.
Racer wrote:So can I make a position: absolute that is positioned relative to the item that contains it?
Only if the item that contains it has been positioned (or else it will be relative to the viewport). A solution is to put "position: relative;" on the container and give it no offsets.
mozillaZine is an independent Mozilla community and advocacy site. We're not affiliated or endorsed by the Mozilla Corporation but we love them just the same.