Does not function when loaded as html document


#1

I copied each of the code type to a separate file, html to html, etc. when I load the html, it displays totally different from what is displayed in the console of the lesson. I only commented the background image to prevent it from loading and changed the file names to article_scroll.html, .css, .js. All the other code is unchanged. May I please know what's causing the erroneous processing. Thanks.








  <div class="article current">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">FLIGHT</p>
      </div>
      <div class="col-xs-6">
        <p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 23</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
        <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Commercial Aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">CSeries Supplier Scramble</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>CSeries Supplier Scramble</h1>
        <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW business aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">Flying the Gulfstream G650</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>Flying the Gulfstream G650</h1>
        <p>Gulfstream is turning up the heat in the large-cabin business aircraft competition with its new G650 flagship, the largest, fastest, farthest-ranging...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">FLIGHT</p>
      </div>
      <div class="col-xs-6">
        <p class="title">New retirements cut RAF VC10 fleet to four</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>New retirements cut RAF VC10 fleet to four</h1>
        <p>The UK Royal Air Force has retired another two of its Vickers VC10 tankers, with the pair's departure reducing its inventory of the Rolls-Royce...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">FLIGHT</p>
      </div>
      <div class="col-xs-6">
        <p class="title">Virgin can deliver more value for Delta than for SIA: Bastian</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Jul 17</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>Virgin can deliver more value for Delta than for SIA: Bastian</h1>
        <p>Delta Air Lines president Ed Bastian is confident that the carrier can extract far more value from its shareholding in Virgin Atlantic compared with...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Defense</p>
      </div>
      <div class="col-xs-6">
        <p class="title">Freedom Experiences Two More Power Outages</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>Freedom Experiences Two More Power Outages</h1>
        <p>The Littoral Combat Ship (LCS-1) USS Freedom’s first overseas deployment to Southeast Asia has been marred by two more power outages...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">FLIGHT</p>
      </div>
      <div class="col-xs-6">
        <p class="title">FedEx to acquire up to 30 United 757s</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>FedEx to acquire up to 30 United 757s</h1>
        <p>United Airlines is to sell up to 30 Boeing 757s to freight operator FedEx Express, with deliveries of the twinjets set to start this year.</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>


var main = function() {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();

$(this).addClass('current');
$(this).children('.description').show();

});

$(document).keypress(function(event) {
if(event.which === 111) {
$('.description').hide();

  $('.current').children('.description').show();
}

else if(event.which === 110) {
  var currentArticle = $('.current');
  var nextArticle = currentArticle.next();
  
  currentArticle.removeClass('current');
  nextArticle.addClass('current');
}

});
}

$(document).ready(main);

body {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/reader/bg.png');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

p {
margin: 0;
}

.row {
margin: 0;
}

.articles {
margin-top: 30px;
margin-bottom: 30px;
}

.article {
color: #222;
background: rgba(255,255,255,.9);
border-spacing: 2px;
border-color: gray;
font-family: arial,sans-serif;
border-bottom: 1px #e5e5e5 solid;
}

.current .item {
background: rgba(206,220,206,.9);
}

.item {
cursor: pointer;
padding-top: 7px;
padding-bottom: 7px;

}

.item .source {
margin-left: 20px;
}

.item .title {
font-weight: bold;
}

.item .pubdate {
margin-right: 20px;
}

.item .pubdate {
text-align: right;
}

.description {
display: none;
padding-top: 10px;
padding-bottom: 10px;
}

.description h1 {
margin-top: 0px;
font-size: 23px;
}


#2

Hi Hintor2,

You need to change links that start out with // to http:// for it to work properly :)