Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Width

Change Width Of A Div Dynamically

Post a Comment
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>
<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>

Solution 2:

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

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"