<!-- Demo content -->			
<div id="page-content">
    
    <h1>Нагалодження jQuery</h1>
  
  <ul>
    <li>Як використовувати alert()</li>
    <li>Як використовувати console.log()</li>
    <li>Як визначати значення прокрутки сторінки</li>
    <li>Як визначати зміну розмірів вікна</li>
  </ul>

  <p>Ширина вікна: <span id="windowWTxt">0</span>.</p>
  
  <p>Значення прокрутки: <span id="topOffsetTxt">0</span>.</p>

</div>
<!-- /Demo content --> 

body {
    background: url('https://ihatetomatoes.net/assets/icon-background.png') no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    color: #909090;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    height: 2000px;
}

a {
    color: #fff; 
    border-bottom: 1px #fff dotted;
    text-decoration: none;
}
a:hover {border-bottom: 1px #fff solid;}

#page-content {
    width: 80%;
    margin: 0 auto;
    max-width: 500px;
}
h1, h2, h3 {
    color: #efefef;
}
#intro {
    font-size: 18px;
    line-height: 24px;
}
    #intro strong {
        color: #fff;
    }
#gallery {
    list-style: none;
    margin: 0;
    padding: 0;
}
    #gallery li {
        float: left;
        margin-right: 10px;
    }
    #gallery li img {
      width: 100px;
      height: 100px;
      display: block;
    }
.highlight {
    color: #ebebeb;
    background-color: rgba(255,255,255,0.2);
    padding: 0 5px;
}

#windowWTxt,
#topOffsetTxt {
  color: #fff;
  font-weight: bold;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


.clearfix {
    *zoom: 1;
}

$(document).ready(function() {

  var $window = $(window),
      $topOffsetTxt = $('#topOffsetTxt'),
      $windowWTxt = $('#windowWTxt');

  console.log('Ваше повідомлення'); 
  
  // debugging code
  $window.on('scroll', function() {
    
    $topOffset = $(this).scrollTop();
	    
    console.log($topOffset);
    
    $topOffsetTxt.text($topOffset+'px');
    
	});

  $window.on('resize', function() {
    
    $windowWidth = $(this).width();
    
    console.log($windowWidth);
    
    $windowWTxt.text($windowWidth+'px');
    
  });
  
});