Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder thesmart1's Avatar
    Join Date
    Dec 2005
    Posts
    369
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Changing Width of an Element Using a Variable

    Is it possible to change the width of an element to the value of a variable using the getElementById method? If so, how?

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You mean a CSS width? Like

    <div id="adiv" style="position:absolute; width:400;">Hi</div>

    then

    var newWidth = 200;
    document.getElementById("adiv").style.width = newWidth + "px";

    david_kw

  • #3
    Regular Coder thesmart1's Avatar
    Join Date
    Dec 2005
    Posts
    369
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Whoa, what happened to bostjank's reply and then my reply after that? Well, anyway, yeah I got that, thanks, but I'm trying to make a decreasing progress bar but it's not working. And I found the page with the previous posts in my closed tabs list (in FF), so here it is (including the description of what I need now and what is happening):


    Quote Originally Posted by bostjank View Post
    Is this what you need?
    Code:
    function changeWidth(controlID,myWidth) {
        document.getElementById(controlID).style.width = myWidth + "px";
    }
    Quote Originally Posted by thesmart1 View Post
    Yes, thanks.

    I'm working on a time-based progress bar. It's supposed to make the width of the inner div decrease by 10% every .5 seconds (completely after 5 seconds). But it isn't decreasing at all.

    HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <title></title>
            <link rel="stylesheet" type="text/css" href="game.css">
            <script type="text/javascript" language="javascript" src="timebar.js">
        </head>
        <body onload="startbar()">
            <div id="outertimebar"><div id="innertimebar"></div></div>
        </body>
    </html>
    javascript:
    Code:
    progress=100;
    function progressbar(){
        progress=progress-10;
        document.getElementById('innertimebar').style.width=progress+"px";
        startbar();
        }
    function startbar(){
        t=setTimeout('progressbar()',500)
        }
    And in the CSS file, the divs have different background colors. I'm almost certain the problem lies in the progressbar() function.

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks like you have two threads going

    http://codingforums.com/showthread.php?t=104578

  • #5
    Regular Coder thesmart1's Avatar
    Join Date
    Dec 2005
    Posts
    369
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Huh... Oops. Well, I guess we'll move to the other thread, and if no one else replies to this one, or if a moderator deletes it, it'll disappear from the first page or the entire forum. So here again is the link to the other thread:

    http://codingforums.com/javascript-programming/104578-changing-width-element-using-variable.html


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •