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

Question

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

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

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

<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>

CSS

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

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

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

javascript

asked by anonymous 21.02.2018 / 00:32

2 answers

How do I allocate more memory in the app execution? Set Enabled ActionList Property to True

score 1 · Answer 1

When you use for..in , it will only interact with the enumerated properties, as getElementsByClassName returns an HTMLCollection that inherits unlisted properties from 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.

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 catch any change when there is a change in screen size, just use the for..of event.

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

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

score 0 · Answer 2

Because you are only interested in the contents of the collection, you can include if by checking whether the returned value of for is a number. Just add if(!isNaN(i)) before objs[i].style.width = slidewidth+"px"; .

Something else, was missing px to 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>