Position by Reference?
Assume I have a bunch of elements on a page. <li>, <td>, <a>, <div>, etc. Not all block tags, not all inline, but elements nonetheless. Each of these elements has a common class of "tagged".
What I want to do is getElementsByClassName ('tagged') and draw a tiny "tag" element on the top left of each of these elements. Easy enough. The tricky bit, I think, is that I'd love the tag to reposition itself if any of those elements should be repositioned by some other routine. IE: if my <div class="tagged" id="todays_sale"> gets set to display="none", I'd like my tag object to hide with it.
I don't expect that to be automatic, but I'm wondering how I'd go about capturing the style changes as events? IE: document.getElementById ('todays_sale').style.top = '100px'; would call document.getElementById ('todays_sale').tag_obj.reposition ()
Or am I expecting way too much here? Hehe.
Thanks for any suggestions!
give your 'tag' elements a class whose display and visibility are set to 'inherit',
and let the computer keep track.
My 'tag' elements are <div> elements, which can't be nested in inline elements. I suppose they could be <span> elements, but I was hoping to have all 'tag' elements as direct children of <body>; related to their targets through script alone. But I may be able to pull off their being children of their targets.
Thanks! And I'm still open to other ideas :)
Well, you could wrap the tagged elements in relative positioned divs displayed inline for inline elements, and absolutely position the tag in the container div.
But a child span of the tagged elements is easier.
And wrapping the tagged elements in relative-positioned DIVs is out the question for LI- and TD-like elements, as they can't be wrapped. I'm feelin' good about the SPAN tag idea though :) Not sure what my reasoning was for not doing this in the first place...