Forum Moderators: open
<p>
<span>Node A</span>
<span> Node Retrieval </span>
<span>Node B</span>
</p>
When I want the stuff between nodeA and nodeB, I should get the span node containing the " More " text. (If there was no span, a textNode should be returned)
Any ideas how to get this?
If there might not be a span around the 'retrieval' text node, then we'll need some way of identifying/referencing nodes A & B.
If the clicks are within the same node, I find the distance apart [in the HTML]. This is already completed.
Otherwise, I want to find the nodes bounded.
So...
<p id='container'>
<span id='nodeA'>blah</span>
<span id='nodeB'>blah</span>
<span id='nodeC'>blah</span>
</p>
<script type='text/javascript'>
a = document.getElementById('nodeA');
c = document.getElementById('nodeC');
parent = getFirstCommonParent(a,c);
bounds = foo (a,c, parent);
if (bounds[0] == document.getElementById('nodeB'))
alert ("The script worked!");
</script>
Remind me to research my problems next time...
<script type="text/javascript">
function foo(a,b,parent) {
var nodes = parent.childNodes;
var record = false;
var j = 0; var retVal = Array();
for (var i=0; i<nodes.length; i++)
if (nodes[i]==a)
record = true;
else if (nodes[i]==b)
record = false;
else
if (record)
retVal[j++] = nodes[i];
return retVal;
}
</script>
Anyways, to those interested, the point of this excersize is to create a Javascript WYSIWYG. This is part of the selection code... we have an anchor and a target, and need to figure out the text inbetween.
Why? Because we aren't going to use the Browser's selection capabilities. Likewise, we won't use browser caret's.... we're going to do it all w/ 100% Javascript [just because we can].
Anyways, the projects becoming fun. Hopefully, I'll be able to give it a DwMX style interface soon... then release under CCPL.
[pre]
window.onload = function()
{
a = document.getElementById('nodeA');
b = document.getElementById('nodeB')
c = document.getElementById('nodeC'); bounds = foo (a,c);
alert(
'The statement: \n "bounds[0]==b" is :\n' +
(bounds[0] == b) +'\n\n'+
'This is because of the presence of empty text nodes\n\n'+
'Let\'s try the statement: \n "bounds[1]==b"\n...'
)
alert(bounds[1] == b)
}
function foo(start,end)
{
var nodes = [];
var next = start.nextSibling;
while(next!=end)
{
[blue]//---- just for info -----------------------[/blue]
alert(
{1:"element",3:"text"}[next.nodeType]+"\n"+ (next.id¦¦next.nodeValue)
)
[blue]//------------------------------------------[/blue]
nodes.push(next);
next=next.nextSibling;
}
return nodes;
}
[/pre]
The two clicked nodes need to be siblings, else you'll need to define "bounded" more specifically.
(Just for the sake of argument)
I was considering your technique, or a version of it, till I realised that its easier to start at the 'start' node then walk along the siblings collecting them until you reach the 'end'.
This way, you don't need to loop through all the nodes in the container. The code is actually simpler too. (my version, your style)
[pre]
function foo(a,b) {
var retVal = Array();
var next = a.nextSibling;
while(next&&next!=b){
retVal.push(next);
next = next.nextSibling;
}
return retVal;
}
[/pre]I've also thrown in a quick check, just in case of a weird error,
lest we go off the end, never getting to b.
;-)
Right, and that's ingeniously solved the non-siblings problem too.... walk along siblings when you reach the end, go up a level, walk along siblings, etc....
And if b is contained in a sibling node, just check to see if b is a child of sibling, if it is, scan it as well.
[edited by: Bernard_Marx at 10:25 am (utc) on Nov. 23, 2004]
Something tells me..
Not quite as much as I'd like. A while ago, I took a course in Data Structure & Algorithms. All stacks, queues, linked lists, search algorithms and tail-chasing dragons. I failed (along with the larger proportion of the intake). Trying agin this year.
I didn't quite know how you were going to define selection for cases where the 'common ascestor' wasn't the parent element. As you point out, it should be fairly straight ahead from here.
I thought of a trick to make the function faster (by picoseconds), at the cost of some legibility. The sleight of hand involved is useful in most collection looping situations, so it's worth getting familiar with it...
[pre]
function foo(next,b) {
var retVal = Array();
while((next=next.nextSibling)&&next!=b)
retVal.push(next);
return retVal;
}
[/pre]Not using browser selection methods is commendable, yet it makes selection of individual sub-sections of text nodes impossible. Doesn't it?
Anyways, the whole code is like a linked list:
public Node get(int index) {
Node current = this.start;
for (int i=0; i<index; i++)
current = current.next;
}
Haven't tested out this yet, trying to get some billable hours in, but I'll give it a run. Anyone curious can see a periodic update at www.communicatezing.com/Stuff/wysiwyg/
The images don't exist at the moment (prob. use Ximian-Artwork). Oh, and right now it's Standard compliant only: in other words, Mozilla works, IE doesn't. Some parts are unfinished [select picture], but I've implemented the equivalent elsewhere. All-in-all, it's coming along pretty smoothly, things considerred.
[Ignore the CZ home page, yes it's done in DWMX]
As for faster... it all helps.
> Not using browser selection methods is commendable,
> yet it makes selection of individual sub-sections of
> text nodes impossible. Doesn't it?
Look and see... I'm working on my Selection routines today, so they should get better soon. :~)
