Click here to Skip to main content
14,692,430 members
Please Sign up or sign in to vote.
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
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

Hi,

check this once

<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
   
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
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 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
   
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.
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
   
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
Hi,

check this once

<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
   
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
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
Muralikrishna8811 17-Oct-11 8:58am
   
yeah I c that website
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
radhika 5 18-Oct-11 4:52am
   
I need to do exactly the same task.
Muralikrishna8811 18-Oct-11 4:53am
   
k sure.
radhika 5 18-Oct-11 4:54am
   
Thank you
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

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

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900