div resizing with js or jquery
<p>I am trying to resize the div based on the current window /iframe size.</p>

<p>For example </p>

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

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

<p>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. </p>

<p>Thanks</p>

<p>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. </p>

<pre><code>    @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

    &lt;div id="tbar" &gt;

    &lt;div class="hierarchialgroups-b"&gt;&lt;strong&gt;Showing:&lt;/strong&gt;&lt;select
      id="groupselect"&gt;
      &lt;option value="0" selected&gt;...loading groups&lt;/option&gt;
    &lt;/select&gt;&lt;/div&gt;

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

    &lt;/div&gt;
</code></pre>
