index_part1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/styles.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    
   
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Publication Name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container">

      <div class="row ">
        <h1>NCAA Investigation Characters</h1>
        <p class="lead">Who was involved in the investigation and where are they now?</p>
      </div>

      <div class="row">
        <div class="col-md-3 bg-blue">
          sidebar
        </div>
        <div class="col-md-9">
          <ul><span id="person"></span> </ul>
          
        </div>
      </div>
    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    
     
    <script>
      $(document).ready(function() {
	$("#message").text("DOM Loaded and Ready");
        startLoadXml();
	
		
      });
      
      
      function startLoadXml() {
  $("#message").text("loadXML has begun!");
  $.ajax({
    type: "GET",
    url: "ncaa.xml",
    dataType: "xml",
    success: parseXml
  });
} //close loadXML



function parseXml(xml)
{
	var htmlBottom = "";
	
	
  $(xml).find("person").each(function(index)
  { 
  	//Builds bottom of page content
	htmlBottom += '<div class="fltrt"><img src="' + $(this).find("photo").text() + '" width="100" height="100" alt="portrait"/></div>';
	htmlBottom += '<ul class="characters"><li>';
	htmlBottom += '<h3 id=' + $(this).attr("last") + '>' + $(this).attr("name") + '</h3></li>'; 
	htmlBottom += '<ul class="subcharacters"><li>Location: ' + $(this).find("location").text() + '</li>';
	htmlBottom += '<li>Occupation: ' + $(this).find("occupation").text() + '</li>';
	htmlBottom += '<li>' + $(this).find("role").text() + '</li>';
	htmlBottom += '<a href="#top">Return to Top Menu</a>';
	htmlBottom += '</ul></ul>';


	
  });
  

  
  $("#person").append(htmlBottom);
}
    </script>
    
    
  </body>
</html>