Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 451
  • Last Modified:

Jquery change order of divs

Hello experts.
I need some help to finish my code.
I want to change the order of my divs with my goup and godown functions.
Not the ajax function.
I did test this tutorial http://biostall.com/swap-and-re-order-divs-smoothly-using-jquery-swapsie-plugin but it is not what i was looking for because it is not really changing the order but adding a style to display the divs in different positions.
Maybe the insertAfter() can help but i'm not familiar with this.

Any help?
<div id="container">
<!-- First DIV-->
<div id="item_04446AE9-D82B-EC26-AA89CF89A88BBB3C" class="clearboth">
 <div></div>
 <div></div>
 <div></div>
 <div id="sub_04446AE9-D82B-EC26-AA89CF89A88BBB3C" class="clearboth" style="width:100%">
  <div></div>
  <div align="right" class="flright inline"style="width:50%">
   <!-- IF THIS IS FIRST DIV HIDE --->
   <a href="#" onclick="goup('04446AE9-D82B-EC26-AA89CF89A88BBB3C');return false;" title="Go up" style="display:none;" ><img src="img/arrowup.gif" alt="Go up" border="0"></a>
   <!-- IF THIS IS LAST DIV HIDE --->
   <a href="#" onclick="godown('04446AE9-D82B-EC26-AA89CF89A88BBB3C');return false;" title="Go down" ><img src="img/arrowup.gif" alt="Go Down" border="0"></a>
  </div>
 </div>
  <hr class="clearboth"><br /><br />
</div>
<!-- Second div -->
<div id="item_057E81DC-B73B-7CFE-D409ED4FDAE24C49" class="clearboth">
 <div></div>
 <div></div>
 <div></div>
 <div id="sub_057E81DC-B73B-7CFE-D409ED4FDAE24C49" class="clearboth" style="width:100%">
  <div></div>
  <div align="right" class="flright inline"style="width:50%">
  <!-- IF THIS IS FIRST DIV HIDE --->
   <a href="#" onclick="goup('057E81DC-B73B-7CFE-D409ED4FDAE24C49');return false;" title="Go up" ><img src="img/arrowup.gif" alt="Go up" border="0"></a>
   <!-- IF THIS IS LAST DIV HIDE --->
   <a href="#" onclick="godown('04446AE9-D82B-EC26-AA89CF89A88BBB3C');return false;" title="Go down" style="display:none;"  ><img src="img/arrowup.gif" alt="Go Down" border="0"></a>
  </div>
 </div>
  <hr class="clearboth"><br /><br />
</div>
</div>
<script type="text/javascript">
var godown = function (f){
	var id = f ;
	//ajax function to change order in database. If success Gon on
	//current div
	var div1 = $('#item_' + f);
	//i have to find the raget div
	var divnext = div1.next().attr("id");
	alert(divnext)
    // function to change order and to check if it is first or last to hide - show the atags
			}
var goup = function (f){
	var id = f ;
	//ajax function to change order in database. If success Gon on
	//current div
	var div1 = $('#item_' + f);
	//i have to find the raget div
	var divprev = div1.prev().attr("id");
	alert(divprev)
	// function to change order and to check if it is first or last to hide - show the atags
   
			}
</script>

Open in new window

0
Panos
Asked:
Panos
  • 3
  • 2
2 Solutions
 
käµfm³d 👽Commented:
Here's a simple example:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  </head>
  <body>
    <div id="div1">This is div 1</div>
    <div id="div2">This is div 2</div>
    <input type="button" onclick="doMove();" value="Move"></input>
    <script>
      function doMove() {
        $('#div2').detach().insertBefore('#div1');
      }
    </script>
  </body>
</html>

Open in new window

0
 
PanosAuthor Commented:
Hi kaufmed
It is working.
The only problem is now to show or hide the a tags if the new position is first or last.
Any idea how?
0
 
käµfm³d 👽Commented:
You can try something like:

function doMove() {
  var insertedDiv = $('#div2').detach().insertBefore('#div1');
  var parentsFirstChild = insertedDiv.parent().children(':first');

  if (insertedDiv.is(parentsFirstChild)) {
    insertedDiv.children('a').hide();
  }
}

Open in new window

0
 
PanosAuthor Commented:
Very good.
Thank you for your help
0
 
PanosAuthor Commented:
Thank you
regards
panos
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now