You certainly would have to do that, as you can't style text nodes, only elements.
Processing the whole html before binding hover and putting some spans etc. Is ok You certainly would have to do that, as you can't style text nodes, only elements. Here's a function you could use to do it from script.(Unfortunately jQuery isn't much use here as it doesn't like handling text nodes.) // Wrap Text nodes in a new element of given tagname, when their // parents contain a mixture of text and element content. Ignore // whitespace nodes.
// function wrapMixedContentText(el, tag) { var elementcontent= false; for (var i= el.childNodes. Length; i-->0;) { var child= el. ChildNodesi; if (child.
NodeType===1) { elementcontent= true; wrapMixedContentText(child, tag); } } if (elementcontent) { for (var i= el.childNodes. Length; i-->0;) { var child= el. ChildNodesi; if (child.
NodeType===3 &&!child.data. Match('^\\s*$')) { var wrap= document. CreateElement(tag); el.
ReplaceChild(wrap, child); wrap. AppendChild(child); } } } } And here's some functions that you could use to select nodes between other nodes. (Again, jQuery doesn't currently have a function for this.
) // Get array of outermost elements that are, in document order, // between the two argument nodes (exclusively). // function getElementsBetweenTree(start, end) { var ancestor= getCommonAncestor(start, end); var before= ; while (start. ParentNode!
==ancestor) { var el= start; while (el. NextSibling) before. Push(el= el.
NextSibling); start= start. ParentNode; } var after= ; while (end. ParentNode!
==ancestor) { var el= end; while (el. PreviousSibling) after. Push(el= el.
PreviousSibling); end= end. ParentNode; } after.reverse(); while ((start= start. NextSibling)!
==end) before. Push(start); return before. Concat(after); } // Get the innermost element that is an ancestor of two nodes.
// function getCommonAncestor(a, b) { var parents= $(a).parents().andSelf(); while (b) { var ix= parents. Index(b); if (ix! ==-1) return b; b= b.
ParentNode; } return null; } Possible usage: var outer= document. GetElementById('myhighlightingimagesdiv'); wrapMixedContentText(outer, 'span'); var ps= $('#myhighlightingimagesdiv . P'); ps.
Each(function(pi) { // Go up to the next image in the list, or for the last image, up // to the end of the outer wrapper div.(There must be a node // after the div for this to work.) // var end= pi===ps. Length-1?Outer. NextSibling : pspi+1; var tweens= $(getElementsBetweenTree(this, end)); $(this).
Hover(function() { tweens. AddClass('highlight'); }, function() { tweens. RemoveClass('highlight'); }); }).
That's a lot of interesting code. I worked it around in a way it's working fast enough to react on hovers by adding lots of spans while generating the output html, but I'm going to look through all Your code, because I still want to know how can I possibly get these elements. Thanx for that lot of work.
I'd give You more than +1, but it won't let me ;) I think i'll make it a plugin if You're not planning to. – naugtur Mar 25 '10 at 12:17.
That is a totally unstructured piece of HTML, which is something you should always avoid. However, you add some data to the img you want to track for hovering, like this: ... ... text1 ... text2 ... You can now catch from the the "data-friends-group" attribute the class in common to all the elements you need to highlight. Now the rest is easy stuff.
$(document). Ready(function() { $("img. Master").
Each(function() { $friends = $(". " + $(this). Attr("data-friends-group")); $(this).
Hover( function(){ $friends. AddClass("highlighted"); }, function(){ $friends. RemoveClass("highlighted"); } ); }); }); Obviously, the class .
Ghtlighted will be the one with the background-color: yellow.
The html comes from an application that treats it like text and splits. I can only put my own code between parts and I need to highlight these parts. I figured out a workaround based on putting some spans in the text already, but it's a lot different.
+1 anyway and thanx for Your time. – naugtur Mar 25 '10 at 12:12.
I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.