ansaurus

Question

Answer 1

A:

substitute

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

with

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

and give it a try

Eineki 2010-01-31 16:14:02

nope...didnt work

MRAISKY 2010-01-31 16:16:34

Answer 2

+1 A:

This function doesn't look right:

If you're 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're 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"; 
}

Gabriel McAdams 2010-01-31 16:25:37

Answer 3

A:

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)

Ray 2010-01-31 16:33:50

Answer 4

+1 A:

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

BalusC 2010-01-31 16:56:08

ansaurus

tags:

views:

answers:

change width of a div dynamically

related questions