reading width of element javascript

Question

i'm trying to read the width of a element then set the width of another element equal to that. For some reason javascript is not reading the width properly though and i'm not sure why.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="../StyleSheet.css" rel="stylesheet" type="text/css" />
    <link href="iflyreader.css" rel="stylesheet" type="text/css" />
    <title></title>


    <script type="text/javascript">
        function setCommentWidth() {

            var comment = document.getElementById("comments");
            var pleft = document.getElementById("leftcontainer");
            alert(pleft.style.width.toString());
            comment.style.width = parseInt(pleft.style.width) * 2; 

        }


    </script>
    </head>
    <body onclick="setCommentWidth()" >

    <form id="form1"   runat="server">
    <div id = "container" >
    <h2> Ifly Checkin Sheet</h2>


        <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
        <div class="row">

        <div class="rowcontainer" id ="leftcontainer">
        <p class="left">Last Name: <%# DataBinder.Eval(Container.DataItem, "lastname") %> </p>
        <p class="left">First Name: <%# DataBinder.Eval(Container.DataItem, "firstname") %> </p>
        <p class="left">Date: <%# DataBinder.Eval(Container.DataItem, "timestamp") %></p></div>
      <div class="rowcontainer"> <p class="right">Member Number: <%# DataBinder.Eval(Container.DataItem, "memnum") %> </p>
       <p class="right">Facility: <%# DataBinder.Eval(Container.DataItem, "facility") %> </p>
       <p class="right">Reason: <%# DataBinder.Eval(Container.DataItem, "reason") %> </p></div>

        <p id="comments"  >Comments: <%# DataBinder.Eval(Container.DataItem, "comments") %></p> 
          </div>
    </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
    </body>
    </html>

I think it might be something to do with my css declared values, but i'm not sure. Here's my stylesheet.

body
{
    background-color: #fff;
}


.cell {
  display:inline-block;
  margin-left:5px;
  margin-right:5px;
  padding:5px;
  width: 100px; 

}

.row  
{
 margin: 10px; 
 padding: 10px;
 display: inline-block;
 background-color: #888; 
border-radius: 5px; 

}

#container 
{
    margin-left: auto; 
    margin-right: auto; 
    width : 900px; 

    background-color: #fefefe;
    padding: 50px; 

}

p 
{


    font-weight: bold ;
    color: #fff;



}


p.left  
{
    text-align: left;
    width: auto;

}

p.right  
{
    text-align: right; 
    width: auto; 

}


.rowcontainer 
{
    display: inline-block;
}

What value does it alert? Anyways.. Try to give #comments the same padding as rowcontainer, or add the padding*2 of .rowcontainer to the width of #comments — BjarkeCK
– BjarkeCK, Commented Jun 15, 2012 at 15:00

Jia · Accepted Answer · 2012-06-15 15:25:39Z

2

try offsetWidth.

function setCommentWidth() {

        var comment = document.getElementById("comments");
        var pleft = document.getElementById("leftcontainer");
        alert(pleft.offsetWidth);
        comment.style.width = parseInt(pleft.offsetWidth) * 2; 

    }

answered Jun 15, 2012 at 15:25

Jia

3953 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jorge · Accepted Answer · 2012-06-15 15:45:02Z

0

There are quite a lot of possible mistakes in the code above, so I'll try to guess a bit:

First, if you want to change a width style via javascript, without using jquery, you should add the "px" to your value:

comment.style.width = parseInt(pleft.style.width) + "px";

Then, as your code is asp, it seems to me that you are repeating the area behind:

<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>

So if you try to use a repeated "id" value, it won't work, because "id" should be unique.

answered Jun 15, 2012 at 15:45

Jorge

8541 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

reading width of element javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related