jQuery: rilevare un ridimensionamento del browser

StackOverflow https://stackoverflow.com/questions/2031872

  •  19-09-2019
  •  | 
  •  

Domanda

Sto usando questo script da Snipplr, Come vorrei impostare in modo che il div contenitore è 100px inferiore all'altezza newWindowHeight, come -100 o qualcosa del genere. 

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
    var newWindowHeight = $(window).height();
    $("#container").css("max-height", newWindowHeight );
}

});         
</script>
È stato utile?

Soluzione

Lo script che hai trovato troppo complicato la questione. Di seguito ha lavorato per me: 

$(function(){

    // Cache reference to our container
    var $container = $("#container");

    // A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    // Call updateMaxHeight when browser resize event fires
    $(window).on("resize", updateMaxHeight);

});

Un avvertimento è che l'evento resize viene chiamato un sacco quando si ridimensiona il browser; non è solo chiamato dopo che il browser è stata ridimensionata. Di conseguenza, si potrebbe avere la funzione di callback viene chiamata centinaia di volte -. Questa è generalmente una cattiva idea

La soluzione sarebbe quella di strozzare o antirimbalzo l'evento. Throttling significa che non lasciare che il callback essere licenziato più di x volte in un arco di tempo (forse 5 volte al secondo). Antirimbalzo significa il fuoco la richiamata dopo un certo lasso di tempo è passato dalla manifestazione ultima di ridimensionamento (attendere fino a 500 millisecondi dopo un evento di ridimensionamento).

jQuery non attualmente supporta l'opzione della valvola a farfalla o di rimbalzo, anche se ci sono i plugin. Altre biblioteche popolari potrebbe essere usato hanno queste caratteristiche , come ad esempio di sottolineatura: 

$(function(){

    // Cache reference to our container
    var $container = $("#container");

    // A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    // Version of updateMaxHeight that will run no more than once every 200ms
    var updateMaxHeightThrottled = _.throttle(updateMaxHeight, 200);

    // Call updateMaxHeightThrottled when browser resize event fires
    $(window).on("resize", updateMaxHeightThrottled);

});

Altri suggerimenti

Ho appena visto l'evento HTML chiamato "onResize" che appartiene al tag soprattutto Avrà maggiori prestazioni poi rilevamento Java con questo utilizzo credo. 

<body onresize="functionhere()">

Spero che vi aiuterà a ragazzi ..

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top