Swapping HTML elements

[Pradeep Kumar]

Hi all,

We got 'n' number of text lines along with up and down arrow buttons. On
clicking a text line the color of the text should get changed. Clicking on
the up arrow button the selected text line should move above the previous
text line.

Eg. We have three text lines
aaaaa

bbbbb

cccccc

on clicking 'bbbb' the color of 'bbbb' should change and on clicking on the
up arrow button bbbb should be displayed above 'aaaa' the list should look
like

bbbb

aaaa

ccccc


All help should be welcome.



Thanx and Regards

Pradeep Kumar

[Neo]

Hi!
try the SWAP element... example .. <a href="http://storm.prohosting.com/~4g"
onclick="this.action(blah, blah); SWAP=''>abc</a>

or

define some classes in the style sheets and use this:
<div class="currentClass" onclick="this.className='newClass';">element</div>

+

There are hundreds of other methods.
Author: Neo
This article was posted by Neo.
( http://storm.prohosting.com/~4g )


"Pradeep Kumar" <pkp_pradeep@yahoo.com> wrote:
>
>Hi all,
>
>We got 'n' number of text lines along with up and down arrow buttons. On
>clicking a text line the color of the text should get changed. Clicking
on
>the up arrow button the selected text line should move above the previous
>text line.
>
>Eg. We have three text lines
>aaaaa
>
>bbbbb
>
>cccccc
>
>on clicking 'bbbb' the color of 'bbbb' should change and on clicking on
the
>up arrow button bbbb should be displayed above 'aaaa' the list should look
>like
>
>bbbb
>
>aaaa
>
>ccccc
>
>
>All help should be welcome.
>
>
>
>Thanx and Regards
>
>Pradeep Kumar
>
>

[Dan]

swapNode will swap two nodes in the DOM. I've used it to swap two table rows,
but haven't tried text. It should work though. If you want to swap text,
put "SPAN" tags around each section you want to swap and assign id's to each.

text1.swapNode(text2)

Dan


"Pradeep Kumar" <pkp_pradeep@yahoo.com> wrote:
>
>Hi all,
>
>We got 'n' number of text lines along with up and down arrow buttons. On
>clicking a text line the color of the text should get changed. Clicking
on
>the up arrow button the selected text line should move above the previous
>text line.
>
>Eg. We have three text lines
>aaaaa
>
>bbbbb
>
>cccccc
>
>on clicking 'bbbb' the color of 'bbbb' should change and on clicking on
the
>up arrow button bbbb should be displayed above 'aaaa' the list should look
>like
>
>bbbb
>
>aaaa
>
>ccccc
>
>
>All help should be welcome.
>
>
>
>Thanx and Regards
>
>Pradeep Kumar
>
>

[Tim Paulaskas]

Wost case scenario, not the most efficient but it is off the top of my head.

When they click on the, I am assuming you are using the SELECT with OPTION
tags, on one you will now the selectedIndex. Then when the click on the up
or down arrows you will know what action to take place. You can use an array
that is dimensioned the same number of elements in the select and is populated
duplicate. Then all you would have to do is change x-1 = that and x = this
and then clear the object and repopulate from the array.

However, I am thinking that you might be able to just do the same thing in
without to much fan far too. Let's say you want to move it up and the selectedIndex
is 5. Move the text and value properties of x-1 to temporary variables. Set
document.form.element.options[x-1].text and .value equal to the current selectedIndex
.text and .value properties. Once that is done set the document.form.element.options[x].text
and .value properties to be what is currently in the temp variables. Make
sure you set x = to the .selectedIndex value.

Now that only problem with both of those solutions is that the selectedIndex
is either erased or sitting on the wrong line. So make sure that you set
the selectedIndex property to x-1 (if your going up) so that it stays on
the line the originally selected.

You will have to add code to make sure that your not already at the top of
the list or at the bottom.

Hope that helps.
Tim

"Pradeep Kumar" <pkp_pradeep@yahoo.com> wrote:
>
>Hi all,
>
>We got 'n' number of text lines along with up and down arrow buttons. On
>clicking a text line the color of the text should get changed. Clicking
on
>the up arrow button the selected text line should move above the previous
>text line.
>
>Eg. We have three text lines
>aaaaa
>
>bbbbb
>
>cccccc
>
>on clicking 'bbbb' the color of 'bbbb' should change and on clicking on
the
>up arrow button bbbb should be displayed above 'aaaa' the list should look
>like
>
>bbbb
>
>aaaa
>
>ccccc
>
>
>All help should be welcome.
>
>
>
>Thanx and Regards
>
>Pradeep Kumar
>
>