Change Width Of A Div Dynamically
I am trying to change my 'inner' div's width dynamically on the click that the images are changed (which works) with a similar script. I cannot get the script to work, any help fix
Solution 1:
Don't do it the hard way. Get rid of the fixed width of the inner div (which is the cause of all that unnecessary JavaScript problems) and just solve it with help of a good shot of CSS. Even more, the inner div is technically superfluous. Here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html><htmllang="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><divid="carousel"><imgsrc="http://sstatic.net/so/img/logo.png"width="250"height="61"><imgsrc="http://sstatic.net/so/img/logo.png"width="250"height="61"><imgsrc="http://sstatic.net/so/img/logo.png"width="250"height="61"></div></body></html>Solution 2:
This function doesn't look right:
If you're trying to set the width of the images, then this:
functionsetStyle(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:
functionsetStyle(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're trying to set the width of the div itself, then it should look like this:
functionsetStyle(baseval) {
var div = document.getElementById("inner");
div.style.width = baseval + "px";
}
Solution 3:
Since "inner" is already a div, there is no need to call getElementsByTagName. So try this:
var innerDiv = document.getElementById("inner");
innerDiv.style.width = baseval + "px";
(Since 'style' is a keyword, I used a different variable name)
Solution 4:
substitute
style[i].style = baseval + "px";
with
style[i].style.width = baseval + "px";
and give it a try
Post a Comment for "Change Width Of A Div Dynamically"