change width of a div dynamically

Question

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 fixing it, or changing it would be appreciated. I am a noob in javascript so please be nice ;-)

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

BalusC · Accepted Answer · 2010-01-31 16:56:08Z

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>

Gabriel McAdams · Accepted Answer · 2010-01-31 16:25:37Z

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"; 
}

Ray · Accepted Answer · 2010-01-31 16:40:06Z

1

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)

edited Jan 31, 2010 at 16:40

answered Jan 31, 2010 at 16:33

Ray

21.9k6 gold badges51 silver badges67 bronze badges

Comments

Eineki · Accepted Answer · 2010-01-31 16:14:02Z

0

substitute

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

with

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

and give it a try

answered Jan 31, 2010 at 16:14

Eineki

14.9k6 gold badges55 silver badges62 bronze badges

Collectives™ on Stack Overflow

change width of a div dynamically

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related