sub-build-your-own-skelton-what-are-bones.html

<!-- i-C-a -->
<div data-role="page" id="sub-build-your-own-skelton-what-are-bones">
  <!-- <script src="js/slidebarnat.js"></script> -->
  <script src="js/slidebar_build_your_own_skelton.js"></script>
  <link rel="stylesheet" href="css/style_build_your_own_skelton.css" />
  <div class="menuhousing"></div>
  <div class="homebtnholder"><div class="homebtnskelton"></div></div>
  <div class="mpbtnholder"><div class="mpbtnskelton"></div></div>
  <div class="cpbtnholder"><div class="cpbtnskelton"></div></div>
  <div class="infobtnholder"><div class="infobtnskelton"></div></div>
  <div class="credsbtnholder"><div class="credsbtnskelton"></div></div>
  <div class="menubtnholder"><div class="menubtnskelton"></div></div>
  
  <div class="bptitleholder" style="padding-top:14px;"><h1>What are bones?</h1></div>
  
    <div data-role="content" class="kidzcontent">
      <div class="navskelton-content">
		<p>Bones are the hard part of your body that make up your skeleton!  But your bones are not solid.  If they were, they'd be too heavy for you to stand up and walk!  Inside, your bones are spongy and have lots of holes in them too!</p>
		<p>When you were born your skeleton had around 350 bones of all different shapes and sizes.  They can be long, short, flat or even irregular!</p>
		<p>But your bones are alive, growing and changing all the time. By the time you become an adult, you will only have 206 bones!</p>
      </div>        
      <div class="navbtn1">
        <p><a href="sub-build-your-own-skelton-what-are-they-made-of.html" data-transition="slide"><img src="css/images/9-12/Human_Body/Build_Your_Own_Skelton/What_Are_Bones/What_Are_They_Made_Of.png"></a></p>
      </div>
      <div class="navbtn2">
        <p><a href="sub-build-your-own-skelton-long-short-wobbly-and-strange.html" data-transition="slide"><img src="css/images/9-12/Human_Body/Build_Your_Own_Skelton/What_Are_Bones/Long_Short_Wobbly_Strange.png"></a></p>
      </div>
      <div class="navbtn3">
        <p><a href="sub-build-your-own-skelton-every-bone-has-home.html" data-transition="slide"><img src="css/images/9-12/Human_Body/Build_Your_Own_Skelton/What_Are_Bones/Every_Bone_Has_Home.png"></a></p>
      </div>
      <div class="navbtn4">
        <p><a href="sub-build-your-own-skelton-what-are-bones-bones-are-alive.html" data-transition="slide"><img src="css/images/9-12/Human_Body/Build_Your_Own_Skelton/What_Are_Bones/Bones_Are_Alive.png"></a></p>
      </div>
        
      <div class="botlogoholder"><a href="home.html" class="homelinkbh"><img src="css/images/9-12/Human_Body/bottomhomehb.png"></a></div>
    </div> <!-- end content -->  
    
  
  <!--<div class="audiopanel">-->
    <!-- images are in slidebarnat.js 
         note: change the ids to be able play the narration
    -->
    <div class="micbtnholder"><div class="micbtnskelton" id="playstopwhatarebones"></div></div>
    <div class="bskelton"><div class="rwskelton" id="whatarebonesaudiobbtn"></div></div>
    <div class="plskelton"><div class="plpsskelton" id="whatarebonesaudioplbtn"></div></div>
    <div class="fskelton"><div class="fwskelton" id="whatarebonesaudiofbtn"></div></div>
    <div id="actualaudio-whatarebones" style="visibility:hidden;"></div>
  <!--</div>-->
  <script>
  // sound setup is in home.html and index.js
    sound = new Audio(); // 'sound' is now an audio object
    var playing;
    var paused;
    (function() {
      playing = false;
      paused = true;
      if(sound.canPlayType('audio/mpeg')) {
        $('#actualaudio-whatarebones').html('<audio id="whatarebonesaudio" controls preload onpause="playsskelton()" onplay="pauseskelton()"><source src="audio/Build_Your_Own_Skelton/What_Are_Bones.mp3" type="audio/mpeg"></audio>');
      } 
    
      $("#sub-build-your-own-skelton-what-are-bones").swipe( { swipeRight:goBack, allowPageScroll:"auto"} );
    })();
    
    $('.homelinkbh').on('tap', function() { bgsoundskelton.pause(); bgsoundskelton.currentTime = 0; mainaudiobg.play(); });
    
    function goBack() {
      $.mobile.changePage("sub-build-your-own-skelton.html", {transition: "slide", reverse: true });
    }
    
    function playsskelton() {
         bgsoundskelton.play();
    }
       
    function pauseskelton() {
         bgsoundskelton.pause();
    }
    /* ******************** */
    /* this is the microphone button */
    $("#playstopwhatarebones").on('tap', function() {
      if(!playing) {
        whatarebonesaudio.play();
        $('.micbtnskelton').css('background-position-x', '-81px');
        playing = true;
        paused = false;
      } else {
        whatarebonesaudio.pause(); whatarebonesaudio.currentTime = 0;
        $('.micbtnskelton').css('background-position-x', '0px');
        playing = false;
        paused = true;
      }
    });
    
    $("#whatarebonesaudioplbtn").on('tap', function() {
      if(!paused) {
        whatarebonesaudio.pause();
        paused = true;
      } else {
        whatarebonesaudio.play();
        paused = false;
      }
      //$(".audiopanel").css({"backgroundPosition":"-197px 0px"});
    });
    
    $("#whatarebonesaudiofbtn").on('tap', function() {
      var ctime = whatarebonesaudio.currentTime;
      whatarebonesaudio.currentTime = ctime + 10;
    });
    
    $("#whatarebonesaudiobbtn").on('tap', function() {
      var ctime = whatarebonesaudio.currentTime;
      whatarebonesaudio.currentTime = ctime - 10;
    });
    
    $("#whatarebonesaudiopsbtn").on('tap', function() {
      whatarebonesaudio.pause();
      //$(".audiopanel").css({"backgroundPosition":"0px 0px"});
    });
    
    $('.navbtn1').on('tap', function() { 
      nav1Effects(); 
    });
    
    $('.navbtn2').on('tap', function() { 
      nav2Effects(); 
    });
    
    $('.navbtn3').on('tap', function() { 
      nav3Effects(); 
    });
    
    $('.navbtn4').on('tap', function() { 
      nav4Effects(); 
    });
    
  </script>
</div> <!--//home-->