All geek questions in one place

Dynamically change div width

I am trying to dynamically change my “internal” div width per click so that the images change (which works) with a similar script. I can't get the script to work, any help fixing it, or changing it would be appreciated. I am noob in javascript, so please be beautiful; -)

<script type="text/javascript"> function setBase(baseval) { var images = document.getElementById("mylist").getElementsByTagName("img"); for (var i = 0; i < images.length; i++) { images[i].src = baseval + ((i<9)?0+i:i) + ".jpg"; } } </script> <script type="text/javascript"> function setStyle(baseval) { var style = document.getElementById("inner").getElementsByTagName("div"); for (var i = 0; i < images.length; i++) { style[i].style = baseval + "px"; } } </script> </head> <body> <div id="mylist" style=" height: 481px; width: 700px; overflow-x: auto; "> <div id="inner" style="width: 7300px "> <img src="carousel_img/1/1.jpg" height="450" /> <img src="carousel_img/1/2.jpg" height="450" /> <img src="carousel_img/1/3.jpg" height="450" /> <img src="carousel_img/1/4.jpg" height="450" /> <img src="carousel_img/1/5.jpg" height="450" /> <img src="carousel_img/1/6.jpg" height="450" /> <img src="carousel_img/1/7.jpg" height="450" /> <img src="carousel_img/1/8.jpg" height="450" /> <img src="carousel_img/1/9.jpg" height="450" /> <img src="carousel_img/1/10.jpg" height="450" /> <img src="carousel_img/1/0.jpg" height="450" /> <img src="carousel_img/1/11.jpg" height="450" /> </div> </div> <p> <a href="#" onclick="setBase('carousel_img/1/'); setStyle('7300'); return false;">Set A</a> <a href="#" onclick="setBase('carousel_img/3/'); setStyle('6300'); return false;">Set B</a> </p>
+4
source share
4 answers

Do not do it with difficulty. Get rid of the fixed width of the inner div (which is the cause of all unnecessary JavaScript problems) and just solve it with a good CSS snapshot. Moreover, the inner div is technically superfluous. Here is SSCCE , just copy ' paste'n'run it:

 <!doctype html> <html lang="en"> <head> <title>SO question 2172338</title> <style> #carousel { width: 150px; height: 100px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } </style> </head> <body> <div id="carousel"> <img src="http://sstatic.net/so/img/logo.png" width="250" height="61"> <img src="http://sstatic.net/so/img/logo.png" width="250" height="61"> <img src="http://sstatic.net/so/img/logo.png" width="250" height="61"> </div> </body> </html>
+2
source

This function does not look right:

If you are trying to set the width of the images, then this:

 function setStyle(baseval) { var style = document.getElementById("inner").getElementsByTagName("div"); for (var i = 0; i < images.length; i++) { style[i].style = baseval + "px"; } }

should look like this:

 function setStyle(baseval) { var images = document.getElementById("inner").getElementsByTagName("img"); for (var i = 0; i < images.length; i++) { images[i].style.width = baseval + "px"; } }

Otherwise, if you are trying to set the width of the div itself, then it should look like this:

 function setStyle(baseval) { var div = document.getElementById("inner"); div.style.width = baseval + "px"; }
+2
source

Since "inner" is already a div, there is no need to call getElementsByTagName. So try the following:

 var innerDiv = document.getElementById("inner"); innerDiv.style.width = baseval + "px";

(Since "style" is a keyword, I used a different variable name)

+1
source

replace

 style[i].style = baseval + "px";

from

  style[i].style.width = baseval + "px";

and try

0
source

Source: https://habr.com/ru/post/1299884/

More articles:


All Articles