Swapping HTML elements


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 4 of 4

Thread: Swapping HTML elements

  1. #1
    Pradeep Kumar Guest

    Swapping HTML elements


    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



  2. #2
    Neo Guest

    Re: Swapping HTML elements


    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
    >
    >



  3. #3
    Dan Guest

    Re: Swapping HTML elements


    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
    >
    >



  4. #4
    Tim Paulaskas Guest

    Re: Swapping HTML elements


    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
    >
    >



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center