div redimensionnement avec js ou jquery

Question

J'essaie de redimensionner la div en fonction de la taille actuelle de la fenêtre/iframe.

Par exemple

si la taille est de 1200 je veux redimensionner/ajuster la taille de la div

si la fenêtre est plus petite que 800 Je veux désactiver une partie droite de la barre si la winnow/iframe est trop petit.

Comment puis-je le faire en utilisant js ou javascript Il peut avoir 1 à 4 colonnes iframes, et pourrait être dans de nombreuses résolutions d'écran différentes.

Merci

J'ai essayé le code de requêtes des médias suivants ci-dessous, mais quand vous avez 2 iframe avec 500 x500 chacun ou je peux avoir un iframe et la taille de la fenêtre coudl être redimensionnée en fonction de moniteur/résolution etc .. I J'ai remarqué que si je corrige quelque chose ... Quelque chose change.

@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

Utilisez la fonction .resize()

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

Voici le code

Answer 2

Utilisez jquery pour référencer la div en utilisant $ ('# id') où id est l'id du div, vous devriez être en mesure de vérifier les dimensions de la fenêtre à l'aide window.innerWidth/window.innerHeight. Sur la base de la largeur/hauteur, vous devriez être en mesure de modifier le div en ajoutant css attributs pour modifier les dimensions de la div

Answer 3

window.onresize = function() { // this will fire every time the browser is resized.. 
    var bWidth = window.innerWidth; // get the viewport width. 
    var el = document.getElementById("#div"); // get the div you want to work with 
    if(bWidth <= 800) { 
     // viewport is less than or equal to 800 
    } else if(bWidth >= 1200) { 
     // viewport is greater than or equal to 1200 
    } 
} 

puis assurez-vous qu'il est allumé au premier coup ...

window.onload = function() { 
    this.onresize(); 
};