defining sizes according to full load, or resize a page

Asked

Viewed 30 times

2

Well, I’m trying to set a width according to the width of the screen of the user browser, however, in the console is not pointed any error, 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 you’re out of one document.onload or window.onresize (I’ll put in after the script completion)

What’s wrong, why is wrong and how can I correct ?

javascript css

  • figure { max-width: 100% } does not answer ?

  • I will not use max-width because I need to position several, one after the other, to a Carousel

1 answer

2


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

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

Or rather than define the css, takes the width of the window directly window.innerWidth

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

*Note that the object Window does not own the property offsetWidth, possibly that’s why it doesn’t work.

*It won’t work either screen.width because it returns the width of the screen and according to the question you want the width of the browser.

Follow a functional 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>

  • Did not run :/ the "bannersWidth[i]" is not getting the value, no error is pointed at the console

  • I think I found the error, "bannersWidth" without the ". length"

  • @Murilogambôa put an example in the answer, I hope it helps.

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.