Jquery & Box2D problem

Jquery & Box2D problem

Hello,

I am working on a website where every text elements falls to the ground due to the gravity. I implemented gravity in my website, but the problem is that it won't stop falling. I want to set the ground to my own position and not to the bottom of the screen. Here is my problem.. I managed to do this with random shapes thanks to a tutorial. Though I have struggles with combining the different parts of codes in one code.

I have two different options. In this option the text starts falling, but it will never stop. I did read the ground values but for some reason nothing seems to change. (tutorial from  Box2D DOM animation in Javascript CSS3 )

Code: 
<HTML>
<HEAD>

<link rel="stylesheet" type="text/css" href="styletest.css">
<meta charset="utf-8">

                    <title>Ik wil vliegen in juni</title>
                    <meta name="description" content="Hoe kan gewichtloosheid worden bereikt doormiddel van ontwerp?" />
                    <meta property="og:title" content="Ik wil vliegen in juni" />
                    <meta property="og:image" content="https://raw.githubusercontent.com/kabk/go-theses-17-jamie-de-rooij/master/pug.jpg"/>
                    <meta property="dc:creator" content="Jamie de Rooij" />

<meta charset="utf-8"/>

</HEAD>



<BODY onload="setTimeout(init,2000);">



<canvas id="canvas" width="100%" height="100%"></canvas>


 <div id="header">
  <center><p>test</p></center>
  </div>

   <script type="text/javascript" src="Box2dWeb-2.1.a.3.js"></script>
   <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
   <script type="text/javascript" src="RequestAnimationFrame.js"></script>
   <script type="text/javascript" src="MouseAndTouch.js"></script>

      <script type="text/javascript">
      // Keep a reference to the Box2D World
    var world;

    // The scale between Box2D units and pixels
    var SCALE = 30;

    // Multiply to convert degrees to radians.
    var D2R = Math.PI / 180;

    // Multiply to convert radians to degrees.
    var R2D = 180 / Math.PI;

    // 360 degrees in radians.
    var PI2 = Math.PI * 2;
    var interval;

    //Cache the canvas DOM reference
    var canvas;

    //Are we debug drawing
    var debug = false;

    // Shorthand "imports"
    var b2Vec2 = Box2D.Common.Math.b2Vec2,
      b2BodyDef = Box2D.Dynamics.b2BodyDef,
      b2AABB = Box2D.Collision.b2AABB,
      b2Body = Box2D.Dynamics.b2Body,
      b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
      b2Fixture = Box2D.Dynamics.b2Fixture,
      b2World = Box2D.Dynamics.b2World,
      b2MassData = Box2D.Collision.Shapes.b2MassData,
      b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
      b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
      b2DebugDraw = Box2D.Dynamics.b2DebugDraw,
      b2MouseJointDef =  Box2D.Dynamics.Joints.b2MouseJointDef,
      b2EdgeShape = Box2D.Collision.Shapes.b2EdgeShape;

    function init() {

      //Create the Box2D World with horisontal and vertical gravity (10 is close enough to 9.8)
      world = new b2World(
      new b2Vec2(0, 10) //gravity
      , true //allow sleep
      );

      //setup debug draw
      var debugDraw = new b2DebugDraw();
      canvas = $("#canvas");
      debugDraw.SetSprite(canvas[0].getContext("2d"));
      debugDraw.SetDrawScale(SCALE);
      debugDraw.SetFillAlpha(0.3);
      debugDraw.SetLineThickness(1.0);
      debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
      world.SetDebugDraw(debugDraw);

      //Create DOB OBjects
      createDOMObjects();

      //Make sure that the screen canvas for debug drawing matches the window size
      resizeHandler();
      $(window).bind('resize', resizeHandler);

      //Simple solution; reload to reset
      $("#resetButton").click(function() {
        document.location.reload();
      });

      $("#debugDraw").click(function () {
        if ($("#debugDraw:checked").val()) {
          debug = true;
        } else {
          debug = false;
          canvas.width = canvas.width;
        }
        $("article").animate({opacity:debug ? 0.2 : 1},1000);
      })

      $("#removeText").click(function() {
        $(".panel p").hide()
      });

      //Create the ground
      var w = $(window).width(); 
      var h = $(window).height();

      createBox.position.x = 9;
      createBox.position.7x = 19;

      //Do one animation interation and start animating
      interval = setInterval(update,1000/60);
      update();
    }

    function createDOMObjects() {
      //iterate all div elements and create them in the Box2D system
      // #container div
      $("body > div").each(function (a,b) {
        var domObj = $(b);
        var domPos = $(b).position();
        var width = domObj.width() / 2 ;
        var height = domObj.height() / 2
        
              var x = (domPos.left) + width;
              var y = (domPos.top) + height;
              var body = createBox(x,y,width,height);
        body.m_userData = {domObj:domObj, width:width, height:height};
        
        //Reset DOM object position for use with CSS3 positioning
        domObj.css({'left':'0px', 'top':'0px'});
      });
    }

    function createBox(x,y,width,height, static) {
      var bodyDef = new b2BodyDef;
      bodyDef.type = static ? b2Body.b2_staticBody : b2Body.b2_dynamicBody;
      bodyDef.position.x = x / SCALE;
      bodyDef.position.y = y / SCALE

      var fixDef = new b2FixtureDef;
          fixDef.density = 1.5;
          fixDef.friction = 0.3;
          fixDef.restitution = 0.4;

      fixDef.shape = new b2PolygonShape;
      fixDef.shape.SetAsBox(width / SCALE, height / SCALE);
      return world.CreateBody(bodyDef).CreateFixture(fixDef);
    }

    //Animate DOM objects
    function drawDOMObjects() {
      var i = 0;
      for (var b = world.m_bodyList; b; b = b.m_next) {
             for (var f = b.m_fixtureList; f; f = f.m_next) {
            if (f.m_userData) {
              //Retrieve positions and rotations from the Box2d world
              var x = Math.floor((f.m_body.m_xf.position.x * SCALE) - f.m_userData.width);
              var y = Math.floor((f.m_body.m_xf.position.y * SCALE) - f.m_userData.height);

              //CSS3 transform does not like negative values or infitate decimals
              var r = Math.round(((f.m_body.m_sweep.a + PI2) % PI2) * R2D * 100) / 100;

              var css = {'-webkit-transform':'translate(' + x + 'px,' + y + 'px) rotate(' + r  + 'deg)', '-moz-transform':'translate(' + x + 'px,' + y + 'px) rotate(' + r  + 'deg)', '-ms-transform':'translate(' + x + 'px,' + y + 'px) rotate(' + r  + 'deg)'  , '-o-transform':'translate(' + x + 'px,' + y + 'px) rotate(' + r  + 'deg)', 'transform':'translate(' + x + 'px,' + y + 'px) rotate(' + r  + 'deg)'};

              f.m_userData.domObj.css(css);
            }
             }
          }
    };

    //Method for animating
    function update() {
      //I tried to use this cross browser animation snippet from Paul Irish, but it killed the performance/timing.
      //Ill have to look more at it later, when I have the time.
      //requestAnimFrame(update);

      updateMouseDrag();

      world.Step(
      1 / 60 //frame-rate
      , 10 //velocity iterations
      , 10 //position iterations
      );

      //If you experience strange results, enable the debug drawing
      if (debug) {
        world.DrawDebugData();
      }

      drawDOMObjects();

      world.ClearForces();
    }
   
    //Keep the canvas size correct for debug drawing
    function resizeHandler() {
      canvas.attr('width', $(window).width());
      canvas.attr('height', $(window).height());
    }
   </script>
   <script type="text/javascript" src="DebugMouseDrag.js"></script>



<script src=scroll.min.js></script>


<script>
$(document).ready(function() {

  /* Every time the window is scrolled ... */
  $(window).scroll( function(){

    /* Check the location of each desired element */
    $('#navbar, .part').each( function(i){

      var bottom_of_object = $(this).position().top + $(this).outerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height();

      /* If the object is completely visible in the window, fade it it */
      if( bottom_of_window > bottom_of_object ){

        $(this).animate({'opacity':'1'},700);

      }
    });
  });
});
</script>


<script>
$(window).on('resize', function() {
  winHeight = $(window).height(),
  docHeight = $(document).height();

  max = docHeight - winHeight;
  progressBar.attr('max', max);

  value =  $(window).scrollTop();
  progressBar.attr('value', value);
});
</script>


  </BODY>
</HTML>
In my other code I don't know how to change the random shapes into my own divs. It does fall till the ground I positioned myself.
(source:  https://github.com/hecht-software/box2dweb )

Code: 
<html>
   <head>
      <title>Box2dWeb example</title>
   </head>
   <body onload="init();">
      <canvas id="canvas" width="600" height="3000"></canvas>
   </body>
   <script type="text/javascript" src="Box2D.js"></script>
   <script type="text/javascript">
      var world;
      
      function init() {
         var   b2Vec2 = Box2D.Common.Math.b2Vec2
         	,	b2BodyDef = Box2D.Dynamics.b2BodyDef
         	,	b2Body = Box2D.Dynamics.b2Body
         	,	b2FixtureDef = Box2D.Dynamics.b2FixtureDef
         	,	b2Fixture = Box2D.Dynamics.b2Fixture
         	,	b2World = Box2D.Dynamics.b2World
         	,	b2MassData = Box2D.Collision.Shapes.b2MassData
         	,	b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
         	,	b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
         	,	b2DebugDraw = Box2D.Dynamics.b2DebugDraw
            ;
         
         world = new b2World(
               new b2Vec2(0, 10)    //gravity
            ,  true                 //allow sleep
         );
         
         var fixDef = new b2FixtureDef;
         fixDef.density = 1.0;
         fixDef.friction = 0.5;
         fixDef.restitution = 0.2;
         
         var bodyDef = new b2BodyDef;
         
         //create ground
         bodyDef.type = b2Body.b2_staticBody;
         bodyDef.position.x = 9;
         bodyDef.position.y = 50; //grond positie
         fixDef.shape = new b2PolygonShape;
         fixDef.shape.SetAsBox(10, 0.5);
         world.CreateBody(bodyDef).CreateFixture(fixDef);
         
         //create some objects
         bodyDef.type = b2Body.b2_dynamicBody;
         for(var i = 0; i < 10; ++i) {
            if(Math.random() > 0.5) {
               fixDef.shape = new b2PolygonShape;
               fixDef.shape.SetAsBox(
                     Math.random() + 0.1 //half width
                  ,  Math.random() + 0.1 //half height
               );
            } else {
               fixDef.shape = new b2CircleShape(
                  Math.random() + 0.1 //radius
               );
            }
            bodyDef.position.x = Math.random() * 10;
            bodyDef.position.y = Math.random() * 10;
            world.CreateBody(bodyDef).CreateFixture(fixDef);
         }
         
         //setup debug draw
         var debugDraw = new b2DebugDraw();
			debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
			debugDraw.SetDrawScale(30.0);
			debugDraw.SetFillAlpha(0.3);
			debugDraw.SetLineThickness(1.0);
			debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
			world.SetDebugDraw(debugDraw);
         
         window.setInterval(update, 1000 / 60);
      };
      
      function update() {
         world.Step(
               1 / 60   //frame-rate
            ,  10       //velocity iterations
            ,  90       //position iterations
         );
         world.DrawDebugData();
         world.ClearForces();
      };
   
   </script>
   
   
</html>
I also tried this one:  jGravity - A jQuery plugin to add gravity to your site :: tinyBIGideas . But I need my text to fall lower than only the bottom of the window. 

I really hope someone can help me out, since the deadline is coming closer and closer. Thank you for taking your time for reading this and hopefully someone can help me out!!