Interchanging multiple up and down when clicked up and down buttons respectively

Question

0.00/5 (No votes)

See more:

Hi There are multiple <div>tags in my page, i just want to move position of a <div> up when UP button is clicked.for example id the position of the div is 10 from top when UP button is clicked its position should be 9th and the 9th div should appear at the 10th position.similarly for DOWN button.Can anyone help me

Posted 16-Oct-11 21:31pm

radhika 5

Add a Solution

Comments

Muralikrishna8811 17-Oct-11 9:06am

hi you wanna develop that feature

you've to maintain database table for that.
means div position details.He can add div tag or place div tags in positions.

because that changes must effects from server in that website.

Muralikrishna8811 18-Oct-11 11:51am

hi ,

I developed one function like in that website.

if it works for you then i'll make remaining.

Muralikrishna8811 18-Oct-11 11:53am

try in IE

k

4 solutions

Solution 1

Hi,

just check this once for your requirement.

place your cursor in textbox then press buttons up and down you'll see your required output.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script language ="javascript" >
        function f1() {
//            $("#resdiv").append("<span onmouseenter="f2(this)" onmouseout="f3(this)" style="width:318px;">hello</span><br /><span onmouseenter="f2(this)" onmouseout="f3(this)" style="width:318px;">sdfsdfsdfsdf</span><br /><span onmouseenter="f2(this)" onmouseout="f3(this)" style="width:318px;">sdfsdf</span>");
        }
        function f2(tid) {
            
            tid.style.backgroundColor = "White";
            tid.style.color = "red";
        }
        function f3(tid) {
            tid.style.backgroundColor = "";
            tid.style.color = "";
        }
        var tmp = -1;
        function f4() {
            var len = document.getElementById("parntdiv").childNodes.length;

           
            if (parseInt(event.keyCode) == 40) {
                //down
                if (parseInt(tmp) ==parseInt(len)-1) {
                    tmp = 0;
                }
                else {
                    
                        tmp = parseInt(tmp) + 1;
                    
                }
              
             
            }
            if (parseInt(event.keyCode) == 38) {
                //up

                if (parseInt(tmp) <= 0) {
                    tmp = parseInt(len) - 1;
                }
                else {
                    tmp = parseInt(tmp) - 1;
                }

            }
            fq();
        }
        function fq() {
            var len = document.getElementById("parntdiv").childNodes.length;
           
            if (parseInt(tmp) != parseInt(len) - 1) {
                f3(document.getElementById("parntdiv").childNodes[parseInt(tmp) + 1]);
            }
            if (parseInt(tmp) == parseInt(len) - 1) {
                f3(document.getElementById("parntdiv").childNodes[0]);
            }

            f2(document.getElementById("parntdiv").childNodes[parseInt(tmp)]);
            document.getElementById("txtsearch").innerText = document.getElementById("parntdiv").childNodes[parseInt(tmp)].innerText;
            if (parseInt(tmp) > 0) {
                f3(document.getElementById("parntdiv").childNodes[parseInt(tmp) - 1]);
            }
            if (parseInt(tmp) == 0 || parseInt(tmp) == -1) {
                f3(document.getElementById("parntdiv").childNodes[parseInt(len) - 1]);
            }
            
        }
    </script>
  
    <style type="text/css">
        #txtsearch
        {
            width: 318px;
        }
    </style>
  
</head>
<body>
    <form id="form1" runat="server">
     <div id="dfsdf">
   
       <input type ="text" id="txtsearch" onkeyup="f1()" onkeydown="f4()"   /><br />
       
        <div id="parntdiv" style=" width:318px; background-color :Black ; color:White;">
          <div id="child1" onmouseenter="f2(this)" onmouseout="f3(this)">child one</div>
           <div id="child2" onmouseenter="f2(this)" onmouseout="f3(this)">child two</div>
            <div id="child3" onmouseenter="f2(this)" onmouseout="f3(this)">child three</div>
             <div id="child4" onmouseenter="f2(this)" onmouseout="f3(this)">child four</div>
             <div id="child5" onmouseenter="f2(this)" onmouseout="f3(this)">child five</div>
             <div id="child6" onmouseenter="f2(this)" onmouseout="f3(this)">child six</div>
        </div>
        <br />
        <div id="resdiv" style=" width:318px; background-color :Black ; color:White;"></div>
     </div>
    </form>
</body>
</html>

In the above code you can set those events for normal up and down keystrokes.

I hope you'll understood what I did.

All the Best

Posted 16-Oct-11 23:01pm

Muralikrishna8811

Comments

radhika 5 17-Oct-11 5:45am

Hi Murali,
Thanks for the reply.The above code does'nt match my requirement.See i have 2 buttons Up arrow and Down arrow for each div tag.For example when i click on up arrow of the child6 div tag then the child6 shoulh go up and the child5 div should come down.If i click again the up arrow of the child6 div tag then it should move to the child4 position and child4 should come down.Same thing when i click down the div tag should come down.Please try to send asap.

See this code is for moving the div tag up and down,

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">

var DHTML = (document.getElementById || document.all || document.layers);

function getObj(name){

if (document.getElementById){
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all){
this.obj = document.all[name];
this.style = document.all[name].style;
}

else if (document.layers){
this.obj = document.layers[name];
this.style = document.layers[name];
}
}

var SwitchD =294;

moved_up=0
moved_down=0

function move(amount,dir){
if (!DHTML) return;
if(moved_up==0&&dir=="down"){
var x = new getObj('ContentMain');
SwitchD += amount;
x.style.top = SwitchD;
moved_up=1;
moved_down=0;
}

if(moved_down==0&&dir=="up"){
var x = new getObj('ContentMain');
SwitchD += amount;
x.style.top = SwitchD;
moved_down=1;
moved_up=0;
}

}
//-->
</SCRIPT>

<Body>
Down
Up

<div id="ContentMain" style="position:absolute; left:115px; top:294px; z-index:30; width: 550px; height: 274px; overflow: visible;background-color:blue"></div>

</BODY>
</HTML>

i need when multiple div tags are present in the page then when we move a tag up the tag above should come down and vice versa

Thanks in advance

Muralikrishna8811 17-Oct-11 5:47am

Great ,

soon i'll post

radhika 5 17-Oct-11 6:12am

Hi Murali,
Could you please go through this site.

http://mysamplesite.page4.me

id: radhika.radhi67@gmail.com
password : 51897246

When you place the cursor in the content page of the body of the page you will find 2 arrows up and down.when u click up the content moves up.

Solution 2

Hi Murali,
Thanks for the reply.The above code does'nt match my requirement.See i have 2 buttons Up arrow and Down arrow for each div tag.For example when i click on up arrow of the child6 div tag then the child6 shoulh go up and the child5 div should come down.If i click again the up arrow of the child6 div tag then it should move to the child4 position and child4 should come down.Same thing when i click down the div tag should come down.Please try to send asap.Thanks in advance

Posted 16-Oct-11 23:28pm

radhika 5

Comments

Muralikrishna8811 17-Oct-11 5:36am

K you saying tag sorting based on positions right.

And one more thing is you can rply through "have a question or comment" option

K soon i'll back with solution

Muralikrishna8811 17-Oct-11 6:38am

Hi radhika check my solution now.

I hope It fulfill your requirement

Solution 3

Hi,

check this once

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" >
        var crt;
        function f2(tid) {
            clrall();
            tid.style.backgroundColor = "White";
            tid.style.color = "red";
            crt = tid;
        }
        function clrall() {
            var len = document.getElementById("parntdiv").childNodes.length;
            for (var i = 0; i < parseInt(len); i++) {
                f3(document.getElementById("parntdiv").childNodes[i]);
            }
        }
        function f3(tid) {
            tid.style.backgroundColor = "";
            tid.style.color = "";
        }
        function chk(tid) {
            clrall();
            tid.style.backgroundColor = "White";
            tid.style.color = "red";
        }
        function updiv() {

            var len = document.getElementById("parntdiv").childNodes.length;
            var int;
            for (var i = 0; i < parseInt(len); i++) {
                if (crt.innerText == document.getElementById("parntdiv").childNodes[i].innerText) {
                    if (parseInt(i) == 0) {
                    }
                    else {
                        int = i;
                    }
                }

            }
            moveup(int);
        }
        function moveup(tid) {
            var pre, curt;

            curt = document.getElementById("parntdiv").childNodes[tid];

            pre = document.getElementById("parntdiv").childNodes[parseInt(tid) - 1].innerText;

          document.getElementById("parntdiv").childNodes[parseInt(tid) - 1].innerText = curt.innerText;
          document.getElementById("parntdiv").childNodes[tid].innerText = pre;
          f2(document.getElementById("parntdiv").childNodes[parseInt(tid) - 1]);
        }
        function downdiv() {
            var len = document.getElementById("parntdiv").childNodes.length;
            var int;
            for (var i = 0; i < parseInt(len); i++) {
               
                if (crt.innerText == document.getElementById("parntdiv").childNodes[i].innerText) {


                    int = i;
                    
                }

            }
            movedown(int);
        }
        function movedown(tid) {

            var ct = document.getElementById("parntdiv").childNodes[tid].innerText;
           
            document.getElementById("parntdiv").childNodes[tid].innerText = document.getElementById("parntdiv").childNodes[parseInt(tid) + 1].innerText;
            document.getElementById("parntdiv").childNodes[parseInt(tid) + 1].innerText = ct;
            f2(document.getElementById("parntdiv").childNodes[parseInt(tid) + 1]);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type ="button" value =" UP " onclick="updiv()" /><br />
        <input type="button" value =" DOWN " onclick ="downdiv()" /><br />
          <div id="parntdiv" style=" width:318px; background-color :Black ; color:White;">
          <div id="child1" onclick="f2(this)">child one</div>
           <div id="child2" onclick="f2(this)">child two</div>
            <div id="child3" onclick="f2(this)">child three</div>
             <div id="child4" onclick="f2(this)">child four</div>
             <div id="child5" onclick="f2(this)">child five</div>
             <div id="child6" onclick="f2(this)">child six</div>
        </div>
    </div>
    </form>
</body>
</html>

Some little modifications are required in the above code for full use.

All the Best

Posted 17-Oct-11 0:37am

Muralikrishna8811

Comments

radhika 5 17-Oct-11 6:56am

HI murali,
Its not working.

Muralikrishna8811 17-Oct-11 6:57am

select one div among those divs then click down or up button

Muralikrishna8811 17-Oct-11 6:57am

any error

Muralikrishna8811 17-Oct-11 7:06am

check in IE

radhika 5 17-Oct-11 7:35am

Its not working in IE too Murali

Muralikrishna8811 17-Oct-11 7:36am

any javascript error

Muralikrishna8811 17-Oct-11 7:40am

k check this page once

http://tool-man.org/examples/sorting.html

radhika 5 17-Oct-11 7:41am

ok

Muralikrishna8811 17-Oct-11 7:47am

http://www.1stwebdesigner.com/freebies/drag-drop-jquery-plugins/

in the above link you can get source code.
from that only i develop in basic javascript

Muralikrishna8811 17-Oct-11 8:58am

yeah I c that website

radhika 5 17-Oct-11 7:49am

you plz find this i want the same feature

http://mysamplesite.page4.me id: radhika.radhi67@gmail.com password : 51897246

When you place the cursor in the content page of the body of the page you will find 2 arrows up and down.when u click up the content moves up.

Muralikrishna8811 17-Oct-11 8:03am

Hi,

that is not working in client side .
it must effects from server side .

maintain some position table in DB with div ids.

when page loads ,in server side just replace those position values
from database.

if you want that in client side I can do in jquery

radhika 5 18-Oct-11 0:16am

Hi Murali,

Could you please do in jquery?

Muralikrishna8811 18-Oct-11 4:39am

I can do in Jquery but there is a problem here

how do you store div positions information in database or xml file.

with specific user

radhika 5 18-Oct-11 4:43am

Hi murali
Did you see the site i sent you?

Muralikrishna8811 18-Oct-11 4:46am

yeah i c that site.

it maintains state of controls .

because positions are just be same where we placed in before
on refresh page.
you've task like that or just trying to do that?

radhika 5 18-Oct-11 4:50am

I have task like that please help me,I have a very little knowledge on javascript

Muralikrishna8811 18-Oct-11 4:53am

k sure.

radhika 5 18-Oct-11 4:54am

Thank you

radhika 5 18-Oct-11 4:52am

I need to do exactly the same task.

Muralikrishna8811 18-Oct-11 5:03am

k

Muralikrishna8811 18-Oct-11 5:46am

login is not wrking

Muralikrishna8811 18-Oct-11 8:26am

k let me try

radhika 5 19-Oct-11 0:34am

Hi Murali
When I click on Up button the div is just disppearing

Muralikrishna8811 19-Oct-11 4:28am

is your task complete or not.

radhika 5 19-Oct-11 6:46am

Completed but one more doubt

Muralikrishna8811 19-Oct-11 13:33pm

yeah sure,

I can try to clear it

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Muralikrishna8811 · Accepted Answer · 2011-10-18T05:48:00

Solution 4

Hi,

check this once

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script language="javascript">

        function moveup(tid) {

            var len = document.getElementById("maindiv").childNodes.length;
            var w;
            for (var y = 0; y < parseInt(len); y++) {
                if (document.getElementById("maindiv").childNodes[y].innerHTML == document.getElementById(tid).innerHTML) {
                    w = y;
                }
            }
            chang(w);

        }
        function chang(g) {
            if (parseInt(g) > 1) {
                var fg = document.getElementById("maindiv").childNodes[g].innerHTML;
                document.getElementById("maindiv").childNodes[g].innerHTML = document.getElementById("maindiv").childNodes[parseInt(g) - 2].innerHTML;
                document.getElementById("maindiv").childNodes[parseInt(g) - 2].innerHTML = fg;
            }
        }
    
    </script>
    <style type="text/css">
        #maindiv
        {
            height: 497px;
        }
    </style>
</head>
<body >
    <form id="form1" runat="server">
   <div id="maindiv">
      <div id="Div1" style=" background-color :Black; color :Red; width:400px; height :100px;">
        <input type ="button" id="btnup" value ="UP" onclick="moveup(this.parentNode.id)"  />

        <br />
        This is first content
     </div><br />
     <div id="Div2" style=" background-color :Black; color :Red; width:400px; height :100px;">
       <input type ="button" id="Button1" value ="UP" onclick="moveup(this.parentNode.id)"  />

       <br />
        This is second content
     </div><br />
     <div id="Div3" style=" background-color :Black; color :Red; width:400px; height :100px;">
       <input type ="button" id="Button2" value ="UP" onclick="moveup(this.parentNode.id)"  />

       <br />
       This is third content
     </div><br />
     <div id="Div4" style=" background-color :Black; color :Red; width:400px; height :100px;">
       <input type ="button" id="Button3" value ="UP" onclick="moveup(this.parentNode.id)"  />

       <br />
       This is fourth content
     </div>
   </div>
   <br />
 

    </form>
</body>
</html>

All the Best

Posted 18-Oct-11 5:48am

Muralikrishna8811

Comments

radhika 5 19-Oct-11 5:18am

Hi Murali

How can we get the id of the element above the element whose id is known?

Muralikrishna8811 19-Oct-11 5:21am

that means parent id

i'm trying in another way don't worry abt it

radhika 5 19-Oct-11 5:49am

OK
For parent id u have given "this.parent.id" i got this.
But how to get the Id of the element which is above the known element when both elements are at same level?

radhika 5 19-Oct-11 6:36am

Hi murali i got it.

i just changed childNodes[parseInt(g) - 2] to childNodes[parseInt(g) - 3]

radhika 5 19-Oct-11 6:37am

Thank you soo much

radhika 5 19-Oct-11 6:38am

You are trying another way na.Please send it once you finish.

Muralikrishna8811 19-Oct-11 13:32pm

can i send it to your mailid

because its having long code

radhika 5 20-Oct-11 2:45am

OK

radhika 5 20-Oct-11 2:47am

radhika.radhi67@gmail.com is my mail id.
One more doubt how to delete a div dynamically

radhika 5 20-Oct-11 6:30am

Hi Murali,
The code which you have sent is not working.

Muralikrishna8811 20-Oct-11 6:51am

any errors

radhika 5 20-Oct-11 7:04am

No errors but functionality is not working

Muralikrishna8811 20-Oct-11 7:06am

are you add Jquery file to your project

radhika 5 20-Oct-11 7:11am

I added but its not working.could you please come to team viewer?

Muralikrishna8811 20-Oct-11 7:34am

Sorry I've no team Viewer

It can works any where

I dono why it not wrks for you.
check Jquery is working or not
by placing alert() between statments

radhika 5 24-Oct-11 2:46am

Hi murali,

I wrote code for deleting the div.But when I refresh the page same divs are being appearing on the page.What should I do?

Muralikrishna8811 24-Oct-11 7:07am

Hi,
how you write code for delete
divtag array has divjust place in first in pageload

radhika 5 24-Oct-11 7:24am

function del(buttonObj)
{

var node = buttonObj;
do {
node = node.parentNode.parentNode;
}
while
(node.nodeType != 1 && node.nodeName != 'div');
node.parentNode.removeChild(node);
}

I have sent the div Id as parameter ie buttonobj

Muralikrishna8811 24-Oct-11 8:07am

you are doing it in client side

so deletion operation is not effects server side

Muralikrishna8811 24-Oct-11 8:10am

what about my server side coding

is it works or not

radhika 5 24-Oct-11 8:20am

no its not working.Y i dont know

radhika 5 24-Oct-11 8:20am

How to do it at server side?

Muralikrishna8811 24-Oct-11 8:22am

after changing you've to post that change effect to server and then save it in some variable

radhika 5 24-Oct-11 8:23am

how?

Muralikrishna8811 24-Oct-11 8:27am

its long and logic process

Muralikrishna8811 24-Oct-11 8:30am

'm working on your requirement

If it complete I can ping you k

Muralikrishna8811 24-Oct-11 8:35am

Hi,

check this link for once

http://www.paradiseministry.org/kc/default2.aspx

radhika 5 24-Oct-11 8:44am

yes its working

Muralikrishna8811 24-Oct-11 8:49am

same coding

it can works for you too
wait I'll update remaining operations also

Muralikrishna8811 24-Oct-11 8:56am

check for delete operation now

radhika 5 25-Oct-11 0:34am

Hi Murali,

Its working fine.Can I get the code for up,down and delete.

radhika 5 25-Oct-11 1:00am

Hi murali,

Once i delete the div it should be deleted permanently even if I open in other system.

Muralikrishna8811 25-Oct-11 4:29am

hi I send that code to your mailid

check it
Its just for testing that's y I don't make full feature

B'coz that is not my site to Use their
database

radhika 5 25-Oct-11 4:48am

send me the jquery code too.the one which u sent early was not working