Setting Width of <div> with Javascript

Question

I have a <table> which is dynamically created so the width is unknown. I'm trying to add horizontal scroll bars to the top and bottom of it. My current code...

<div class="wrapper1">
    <div class="div1" width="<script type=\"text/javascript\">document.write(mytext);</script>">
    </div>
</div>

<div class="wrapper2">
   <div class="div2">
      <table id="table_width">
         *table content goes here*
      </table>
   </div>
 </div>

<script type="text/javascript">
$(function(){
$(".wrapper1").scroll(function(){
    $(".wrapper2")
        .scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
    $(".wrapper1")
        .scrollLeft($(".wrapper2").scrollLeft());
});
});

var mytext = document.getElementById("table_width").offsetWidth; //Method 1
var mytext = document.getElementById("table_width").style.width = width + 'px'; //Method 2
</script>

In the last few lines, I've tried two different methods to set the width of the containing <div> to be mytext.

Any ideas why either method isn't working? BTW, I'm not trying both methods at the same time the way it's shown here.

You have no element with ID table_width

Mitya
– Mitya

2015-10-24 18:46:08 +00:00
Commented Oct 24, 2015 at 18:46 — Mitya
– Mitya, Commented Oct 24, 2015 at 18:46
I'm not seeing an element in your HTML named table_width.

Marc
– Marc

2015-10-24 18:46:21 +00:00
Commented Oct 24, 2015 at 18:46 — Marc
– Marc, Commented Oct 24, 2015 at 18:46
Forgot to add that in... sorry. It's there now though.

gtilflm
– gtilflm

2015-10-24 18:52:50 +00:00
Commented Oct 24, 2015 at 18:52 — gtilflm
– gtilflm, Commented Oct 24, 2015 at 18:52

Rob · Accepted Answer · 2015-10-24 19:00:49Z

1

To find the width of an element you need to use window.getComputedStyle followed by getPropertyValue on that returned value. What you are doing now only gives you the CSS value which is not set.

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

answered Oct 24, 2015 at 19:00

Rob

15.2k30 gold badges49 silver badges73 bronze badges

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

1 Comment

gtilflm Over a year ago

I ended up using part of your suggest solution and part of @Avinash Kadimisetty's. Thus, the upvote for your answer. Thanks.

Avinash Kadimisetty · Accepted Answer · 2015-10-24 19:33:35Z

1

The problem could be this.

The script you have written to find mytext is being executed after the table is created. But by the time the div is created value of mytext is not known. So I would recommend doing this.

<!DOCTYPE html>


<div class="wrapper1">
   <div id="div1">
   </div>
</div>

<div class="wrapper2">
 <div class="div2">
   <table>
     *table content goes here*
   </table>
 </div>

 <script type="text/javascript">
   $(function(){
       $(".wrapper1").scroll(function(){
          $(".wrapper2")
      .scrollLeft($(".wrapper1").scrollLeft());
   });
$(".wrapper2").scroll(function(){
$(".wrapper1")
    .scrollLeft($(".wrapper2").scrollLeft());
 });
});

var mytext = document.getElementById("table_width").offsetWidth; //Method 1
var mytext = document.getElementById("table_width").style.width ; //Method 2

 document.getElementById('div1').width = mytext;
 </script>


</html>

The above code changes the width of the div after finding the value of mytext.

edited Oct 24, 2015 at 19:33

answered Oct 24, 2015 at 18:59

Avinash Kadimisetty

1432 silver badges14 bronze badges

2 Comments

gtilflm Over a year ago

This doesn't seem to be working on my end, but I see what you're trying to do. Is there an error in your code maybe?

gtilflm Over a year ago

I ended up using part of your suggest solution and part of @Rob's. Thus, the upvote for your answer. Thanks.

gtilflm · Accepted Answer · 2015-10-24 19:50:36Z

0

I ended up using parts of both of the suggested answers for this question. After a lot of fiddling, I ended up with this for the final Javascript...

var elem = document.getElementById("table_width");
var mytext = window.getComputedStyle(elem,null).getPropertyValue("width");
$('#div1').css({'width':mytext});
$('#div1').css({'overflow': 'scroll'});

answered Oct 24, 2015 at 19:50

gtilflm

1,4854 gold badges25 silver badges56 bronze badges

Collectives™ on Stack Overflow

Setting Width of <div> with Javascript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related