Question

I am trying to resize the div based on the current window /iframe size.

For example

if the size is 1200
i want to resize/adjust the size of the div

if the window is smaller then 800
I want to disable right part of the bar if the winnow/iframe is too small.

How can i do it using js or javascript
It can have 1 to 4 iframes columns, and could be in many different screen resolutions.

Thanks

I tried the following media queries code below, but when you have 2 iframe with 500 x500 each or i can have one iframe and the window size coudl be resized based on monitor /resolution etc.. I noticed that if i fix something .. somethingelse changes.

    @media screen and (min-width: 1200px) and (max-width: 1510px)  {
      #topbar {
    background-color: #E5EBF1;
        border: 0 solid red;
        font-size: 11px;
        height: 31px;
        padding: 0 0 0 2px;
        position: relative;
        width: 100%;
        z-index: 1111;
    }
    .objects-b {
      /*
      float: right;
      width: 64%;
      border: 0px solid green;
      margin: 0;
      padding: 7px 0 */
      display:none;
     }

     #topbar .hierarchialgroups-b {
        float: left;
      width: 240px;
      bordeR: 3px solid red;
    }
    .rest-b {
      /*
      padding: 0;
      margin: 0;
      border: 0px solid blue;
      width: 616px;
      align: right */
      display:none;
    }
    }
    @media screen and (min-width: 440px) and (max-width: 880px)  {
      #topbar {
    background-color: #E5EBF1;
        border: 0 solid red;
        font-size: 11px;
        height: 31px;
        padding: 0 0 0 2px;
        position: relative;
        width: 60%;
        z-index: 1111;
    }
    .objects-b {

      display:none;
     }

     #topbar .selectgroups-b {
        float: left;
      width: 39%;
      bordeR: 1px solid yellow;
    }
    .rest-b {

      display:none;
    }
    }

HTML BIT

    <div id="tbar" >

    <div class="hierarchialgroups-b"><strong>Showing:</strong><select
      id="groupselect">
      <option value="0" selected>...loading groups</option>
    </select></div>

    <div class="objects-b">
    <ul class="rest-b">
      <li><strong>Size Represents</strong>: #&nbsp;Objects</li>
      <li><strong>Color Represents</strong>: Group Impacts</li>
      <li><span class="color1">&nbsp;</span>Normal</li>
      <li><span class="color2">&nbsp;</span>Degraded</li>
      <li><span class="color3">&nbsp;</span>Critical</li>
    </ul>

    </div>

Answer 1

Use .resize() function

$(window).resize(function() {
    var height=$(window).height();
    var width=$(window).width();
    $('#div').css({"width":width,"height":height});
});

Here is the code