Tag Archive for jQuery

DOM Manipulation with jQuery

November 12, 2013 Uncategorized No comments

Prior to my start at Nashville Software School, I had little knowledge of jQuery. I had taken a course on it at CodeSchool, but that was it. I’ve now been using jQuery for a couple months and am really getting a handle on it. I am no expert, but I feel like my ability to manipulate DOM elements has become pretty strong.

We just had a game project that involved elements moving randomly within a grid (in our case, the grid was a table). Instead of these elements just appearing in the new td and disappearing from the original, I wanted to make them float over to their new position. I figured the movement would make everything seem much better.
I did a search for animating an element from one div to another and found this http://stackoverflow.com/questions/907279/jquery-animate-moving-dom-element-to-new-parent

I changed the variables in the top answer to better fit my project, but it still didn’t work. So I messed around with it and learned a lot about how it worked. It’s still a bit glitchy, but it’s very close. Here is my code with comments:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

function htmlAnimateMove($old, newPos) {
  // $old is the jQuery element that we want to move
  // newPos is the parent container we want to move $old to
 
  // the jQuery .offset() method retrieves the position of an element in relation to the document
  // instead of the closest positioned parent
  var newOffset = $(newPos).offset();
  // newOffset contains the positioning of newPos in relation to the document
 
  var oldOffset = $old.offset();
  // oldOffset contains the positioning of $old in relation to the document
 
  var $temp = $old.clone();
  $temp.appendTo('body').css('left', oldOffset.left).css('top', oldOffset.top).css('position', 'absolute');
  // we clone $old into $temp and append $temp to the body using the position in oldOffset
  // $temp should now be overlapping $old
 
  $old.hide();
  $(newPos).append($old.css('left', 0).css('top', 0));
  // hide $old and move it to the container defined in newPos
 
  // use jQuery .animate() method to move $temp to the position contained in newOffset
  $temp.animate( {'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){
 
    // after that animation has completed, show $old and remove $temp
    $old.show();
    $temp.remove();
  });
}
function htmlAnimateMove($old, newPos) {
  // $old is the jQuery element that we want to move
  // newPos is the parent container we want to move $old to

  // the jQuery .offset() method retrieves the position of an element in relation to the document
  // instead of the closest positioned parent
  var newOffset = $(newPos).offset();
  // newOffset contains the positioning of newPos in relation to the document

  var oldOffset = $old.offset();
  // oldOffset contains the positioning of $old in relation to the document

  var $temp = $old.clone();
  $temp.appendTo('body').css('left', oldOffset.left).css('top', oldOffset.top).css('position', 'absolute');
  // we clone $old into $temp and append $temp to the body using the position in oldOffset
  // $temp should now be overlapping $old

  $old.hide();
  $(newPos).append($old.css('left', 0).css('top', 0));
  // hide $old and move it to the container defined in newPos

  // use jQuery .animate() method to move $temp to the position contained in newOffset
  $temp.animate( {'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){

    // after that animation has completed, show $old and remove $temp
    $old.show();
    $temp.remove();
  });
}

It’s been really helpful to me to just go in and mess around and break things. It’s helped me understand how things actually work. I’m hoping that this explanation is helpful to others going through the same learning process.