defining sizes according to the full load, or resize of a page

Question

defining sizes according to the full load, or resize of a page

Navigation

#1 by (2 votes)

2

Well, I'm trying to set a width according to the width of the user's browser screen, however, the console does not point to any errors, but the code also does not run

var bannersWidth = document.querySelectorAll(".banner-holder .carousel figure");
for(var i = 0; i < bannersWidth; i++){
    bannersWidth[i].style.width == window.offsetWidth + "px";
}

I know it's out of a document.onload or window.onresize (I'll put in after the script completes)

What's wrong, why it's wrong and how can I fix it?

javascript css

asked by anonymous 29.05.2017 / 14:48

1 answer

What is the difference between stopPropagation and stopImmediatePropagation? Controller can have private methods?

score 2 · Accepted Answer

An alternative to doing this would be to set the width of the banners as follows:

.banner-holder{
   width:100%;
} 
.carousel figure{
   width:100%;
}

Or instead of setting css , get the window width window.innerWidth

for(var i = 0; i < bannersWidth.length; i++){
    bannersWidth[i].style.width == window.innerWidth + "px";
}

* Note that the Window object does not have the offsetWidth property, possibly that is why it does not work .

* Also will not work screen.width because it returns the width of the screen and according to the question you want the width of the browser.

Here is a working example:

function AjustaLarguras() {
  var bannersWidth = document.querySelectorAll(".banner-holder,.carousel,.figure");
  for (var i = 0; i < bannersWidth.length; i++) {
    bannersWidth[i].style.width = window.offsetWidth + "px";
  }
}

.banner-holder {
  height: 50px;
  border: 1px solid red;
}

.carousel {
  height: 50px;
  border: 1px solid green;
}

.figure {
  height: 50px;
  border: 1px solid blue;
}

<body onload="AjustaLarguras()">
  <div class="banner-holder">
  </div>
  <div class="carousel">
  </div>
  <div class="figure">
  </div>
</body>