Why is the width of the browser window displayed larger than it actually is?

U

Umid2015-12-22 20:19:24

JavaScript

Umid, 2015-12-22 20:19:24

Hello, I'm not a specialist in web programming, and maybe my mistake is obvious, but I don't see it.
The fact is that I wrote a slider using jquery, a couple of ideas about the slider came up, and now I'm rewriting it in pure js.
I decided to make the slider adaptive: I need to find out the width of the window.
When writing alert(document.documentElement.clientWidth); in the console on this site 1263 is displayed, in the output of the same code on my LaddingPage 1410 is displayed.
Why??
html code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Game</title>
  <link rel="stylesheet" href="styles/reset.css">
  <link rel="stylesheet" href="styles/style.css">
  <link rel="stylesheet" href="styles/animate.css">
  <script src="scripts/jquery.js"></script>
  <script src="scripts/wow.min.js"></script>
</head>
<body>
  <div class="wrapper">
    <div class="header">
      <p class="Arrow wow fadeInLeft" data-wow-delay=".2s">Э----------></p>
      <p class="webText firstT wow fadeInLeftBig" data-wow-delay=".4s">Лучшие услуги</p>
      <p class="webText secondT wow fadeInLeftBig" data-wow-delay="1s">По созданию сайтов</p>
      <p class="webText thirdT wow fadeInLeftBig" data-wow-delay="1.6s">В Узбекистане</p>
      
      <h1  class="whyAreWe">Наши преимущества</h1>

      <!-- Слайдер -->
      <div class="sliderWrap">
        <div class="slider">
          <div class="fullWidthBlock">
            <div class="firstBlock block">
              <h2>Адаптивный дизайн</h2>
              <p><img src="img/adap.png" alt="adap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem tempore nihil consequatur? Pariatur aperiam ratione facere exercitationem mollitia numquam. Distinctio natus perferendis accusantium praesentium, architecto, asperiores illo at ipsum veritatis fuga ullam laudantium hic recusandae ut rem placeat minima, eaque necessitatibus enim, libero cupiditateullam laudantium hic!</p>
            </div>
          </div>

          <div class="fullWidthBlock">
            <div class="secondBlock block">
              <h2>Высокое качество</h2>
              <p><img src="img/quality.png" alt="qiality">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem tempore nihil consequatur? Pariatur aperiam ratione facere exercitationem mollitia numquam. Distinctio natus perferendis accusantium praesentium, architecto, asperiores illo at ipsum veritatis fuga ullam laudantium hic recusandae ut rem placeat minima, eaque necessitatibus enim, libero cupiditateullam laudantium hic!</p>
            </div>
          </div>

          <div class="fullWidthBlock">
            <div class="thirdBlock block">
              <h2>Доступные цены</h2>
              <p><img src="img/price.png" alt="price">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem tempore nihil consequatur? Pariatur aperiam ratione facere exercitationem mollitia numquam. Distinctio natus perferendis accusantium praesentium, architecto, asperiores illo at ipsum veritatis fuga ullam laudantium hic recusandae ut rem placeat minima, eaque necessitatibus enim, libero cupiditateullam laudantium hic!</p>
            </div>
          </div>
        </div>
      </div>

      <!-- /////////////// -->
      
    <!-- //Навигация -->

      <div class="nav">
        <ul class="icons">
        <div class="activeLine"></div>
          <li class="adap icon active" data-num="1" data-line-pos="0"><img src="img/adap.png" alt="adap"></li>
          <li class="quality icon " data-num="2" data-line-pos="170"><img src="img/quality.png" alt="qiality"></li>
          <li class="price icon" data-num="3" data-line-pos="340"><img src="img/price.png" alt="price"></li>
        </ul>
      </div>
    <!-- ............ -->

    </div>
  </div>

<script src="scripts/index.js"></script>
<script>
  new WOW().init();
</script>
</body>
</html>

css

@import "../fonts/Alexander/alexander.css";

body{
  background: url('../img/bg-img.png');
}

/*/*HEADER///////////////////////*/

.webText{
  color:green;
  font-size: 3em;
  position: absolute;
  font-family: 'Alexander';
}

.Arrow{
  color:red;
  font-size:6em;
  padding:0;
  margin:0 0 50px 40px;
}

.firstT{
  right:276px;
  top:10px;
}

.secondT{
  right:105px;
  top:55px;
}

.thirdT{
  right: 60px;
  top: 100px;
}

/*/////////////////////////////////*/

.sliderWrap{
  overflow:hidden;
  margin:auto;
}

.slider{
  position: relative;
  left:0;

  transition:left 1.1s;
}

.block{
  width:60%;
  min-width:350px;
  margin:auto;
  font-family: 'Alexander';
  float: left;
}

.block>h2{
  font-size:2em;
  color:gray;
  margin:10px auto auto 40px;
}

.block>p{
  color:yellow;
  font-size:2em;
  font-weight:normal;
  float: left;
}

.block>p>img{
  width:400px;
  float: left;
}

.needWidth{
  width:100%;
}

/*/////////////////////////////////*/



.whyAreWe{
  font-size:4em;
  margin-left:100px;
  color:aqua;
  font-family: 'Alexander';
  font-weight: bold;
}

.icons{
  margin:auto;
  width:510px;
}

.icons>li{
  float: left;
  margin:5px 10px;
}

.icons>li>img{
  width:150px;
  height: 150px;
  border-radius:50%;
}


.clearFix{
  clear:both;
}

.activeLine{
  width:170px;
  border:2px solid orange;
  position: relative;
  left: 0;
  transition:left 1.1s;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

U

Uwe_Boll, 2015-12-22
@DarCKoder

for images in the slider, define the following properties

display: block;
width: 100%;
max-width: 100%;
max-heght: 100%

and set the size of the slider itself as a percentage
and don't bother with the width on JS