I want to change the size of my slideshow as the device size changes;

Asked

Viewed 102 times

0

The HTML of my slide show is that I want you to change the style="width" every time you change the device size.

<div class="leftside">
    <div class="slideshow" id="slideshow">
        <div class="slideshowarea">
            <div class="slide">.</div>
            <div class="slide">.</div>
            <div class="slide">.</div>
            <div class="slide">.</div>
        </div>
    </div>
</div>

The CSS

.slideshow{
     height: 335px;
     background-color: #CCC;
     overflow: hidden;
}

.slideshowarea{
    width: 100000px;
    height: 335px;
    background-color: #DDD;
}

.slide{
    height: 335px;
    float: left;
}

Fis this script to grab the width and then set on all slides but is returning me error;

window.onload = function() {


    var slidewidth = document.getElementById('slideshow').offsetWidth;
    var objs = document.getElementsByClassName("slide");


    for (var i in objs) {
        objs[i].style.width = slidewidth;

    }
}

But it’s returning to me that mistake :

script.js:9 Uncaught TypeError: Cannot set property 'width' of undefined at window.onload (script.js:9) window.onload @ script.js:9

I’m beginner in the area, I’ve searched and I’ve tried a lot about it, I hope you can help me, it’s complicated the business.

javascript

  • Personal vlw for the answers I was able to solve by putting .. if(!isNaN(i)) objs[i].style.width = slidewidth+"px"; let’s study more on the subject;;

2 answers

1

When you use for..in, it will only interact with listed properties, such as getElementsByClassName returns a Htmlcollection inheriting unnumbered properties of Object.prototype and String.prototype.

for...in should not be used for iteration in an array where order is important, since it interacts in an arbitrary order.

Already the for..of, he creates a loop with the values of objects of the type Iterator (HTMLCollection, Array, NodeList, FileList etc..)

Example:

const itens = document.querySelectorAll("ul li");

for (let item in itens) {
  console.log( item )
}

console.log( "" );
console.log( "Agora com for..of" );
console.log( "" );

for (let item of itens) {
  console.log( item )
}
<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
  <li>Item #4</li>
  <li>Item #5</li>
</ul>

To capture any change when there is a change in screen size, just use the event resize.

window.addEventListener("resize", () => {
  console.log(" Houve uma mudança ");
}, false);

console.log( "Clique no item \"Página toda\"" );

0

As you only care about the contents of the collection, it may include a if by checking whether the value returned from for is a number. Just add if(!isNaN(i)) before the objs[i].style.width = slidewidth+"px";.

Something else, I forgot to add px style width.

window.onload = function() {
    var slidewidth = document.getElementById('slideshow').offsetWidth;
    var objs = document.getElementsByClassName("slide");

    for (var i in objs) {
       if(!isNaN(i)) objs[i].style.width = slidewidth+"px";
    }
}
.slideshow{
 height: 335px;
 background-color: #CCC;
 overflow: hidden;
  }

.slideshowarea{
 width: 100000px;
 height: 335px;
  background-color: #DDD;
}

.slide{
height: 335px;
float: left;
background: red;
}
<div class="leftside">
    <div class="slideshow" id="slideshow">
        <div class="slideshowarea">
            <div class="slide">.</div>
            <div class="slide">.</div>
            <div class="slide">.</div>
            <div class="slide">.</div>
        </div>
    </div>
</div>

Browser other questions tagged javascript

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