Change object width with window size with jQuery

Question

I have some span objects that I insert into a table with jQuery with a specific width attribute. I want the widths of these objects to change as the window size changes, as the table has position relative.

Here is my code (The snippet doesn't show the issue very well - changing window size, but it gives an idea of the context):

$(document).ready(function() {
  var var1 = 2
  var element = $('td').filter(function() {
    var holidayText = $(this).contents()[0].textContent.trim();
    return parseInt(holidayText, 10) == var1;
  });
  //need this to adjust with table size
  var cell_width = element.width();

  var2 = 3;
  var width = var2 * cell_width;

  add_html = element.append('</br><span class="spanclass" style="width: ' + width + 'px; position: absolute"></span>');
});

div.class1 {
  position: relative;
}

table {
  border: 1px solid navy;
  width: 70%;
  text-align: center;
}

table th {
  text-align: center;
  width: 100px;
  height: 20px;
}

table td {
  width: 100px;
  height: 100px;
  vertical-align: top;
  text-align: right;
  border: 1px solid #c6c6ec;
  position: relative;
}

span.spanclass {
  background-color: purple;
  height: 14px;
  display: inline-block;
  padding: 2px;
  left: 0;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="class1">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
</div>

How do I get a width attribute / assign a new attribute that means this widths scales with the table/window size? Do I use em for this? Or as a percentage width?

Thanks

Did you try `$(window).resize(function() { //do something here });` ? — Cheslab, Mar 06 '17 at 10:26
if the width is relative to the cell its better to use percentage % — Chiller, Mar 06 '17 at 10:26
Might try a resize function. @Chiller how do I use .width() to return a percentage? — Ruth Young, Mar 06 '17 at 10:28
@RuthYoung here is a similar question http://stackoverflow.com/questions/18785951/how-to-get-width-of-a-div-in-percentage-using-jquery — Chiller, Mar 06 '17 at 10:41

Daniele De Matteo · Accepted Answer · 2017-03-06T10:55:19.640

2

You have to use $(window).resize().

I have changed your script and it's working for me: https://fiddle.jshell.net/71rd84jy/

Let me know. Cheers.

edited Mar 06 '17 at 10:55

answered Mar 06 '17 at 10:37

Daniele De Matteo

114
6

score 0 · Answer 2 · answered Mar 06 '17 at 10:49

Why use js in a first place?

$(document).ready(function() {
   var var1 = 2
   var element = $('td').filter(function() {
    var holidayText = $(this).contents()[0].textContent.trim();
     return parseInt(holidayText, 10) == var1;
   });
    add_html = element.append('</br><span class="spanclass"></span>');
});

div.class1 {
  position: relative;
}

table {
  border: 1px solid navy;
  width: 70%;
  text-align: center;
}

table th {
  text-align: center;
  width: 100px;
  height: 20px;
}

table td {
  width: 100px;
  height: 100px;
  vertical-align: top;
  text-align: right;
  border: 1px solid #c6c6ec;
  position: relative;
}

span.spanclass {
  background-color: purple;
  height: 14px;
  display: inline-block;
  padding: 2px;
  left: 0;
  z-index: 1;
  position: absolute;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
</div>

Notice box-sizing: border-box; - it make width 100% including 2px of padding, otherwise it would be [2px]+[100%]+[2px]

I'm using javascript because all the spans have different widths based off a calculation — Ruth Young, Mar 06 '17 at 10:55
@RuthYoung you can simply set non-100% width to each span you want, they will respect parents width. — Cheslab, Mar 06 '17 at 10:58
Can I get .width() to return a percentage value? Rather than px? @Cheslab — Ruth Young, Mar 06 '17 at 11:06
@RuthYoung No, you should calculate it by yourself. But why do you need to get width when you're setting it? — Cheslab, Mar 06 '17 at 11:52
the width is a calculation based on the width of a table cell multiplied by the number of cells it needs to cover which is another variable — Ruth Young, Mar 06 '17 at 12:33
@RuthYoung in this case you don't need to operate %. Set implicit width in px one time on document.ready and every time on window.resize — Cheslab, Mar 06 '17 at 12:41

Change object width with window size with jQuery

2 Answers2