[jQuery] ridimenzionare un div

**a.felix** · 04-04-2009, 10:25

Buon di', non riuscendo a risolvere un mio problema con i css...
ho pensato di farlo con uno script JQuery.

codice:

    function RidimenzionaDivContent() {
        var header = 50;
        var footer = 37;
        var spacing = 13;
        var WinSize = $(document).height();
        var divSize = (WinSize - (header + footer + spacing));

        //        window.alert(WinSize + " - new div size " + divSize);
        $("#content").animate({ width: "" + divSize + "px" }, 1000)//Funziona correttamente
        $("#content").animate({ height: "" + divSize + "px" }, 1000)//Non funziona correttamente
    };
    var resizeTimer = null;
    $(window).bind('resize', function() {
        RidimenzionaDivContent();
    });

Lo stesso codice funziona correttamente per la larghezza ma non per l'altezza..

avete sugggerimenti?

**a.felix** · 04-04-2009, 11:21

cosi' si ridimenziona avevo un important nei css..
ma si ridimenziona solo se la pagina la porto da piccola a grande ..viceversa no ...

codice:

    function RidimenzionaDivContent() {
        var header = 50;
        var footer = 37;
        var spacing = 92;
        var WinSize = $(document).height();
        var divSize = (WinSize - (header + footer + spacing));
        var Hstr = "" + divSize + "px";
        $("#content").animate({ height: Hstr }, 1000);
    };
    var resizeTimer = null;
    $(window).bind('resize', function() {
        RidimenzionaDivContent();
    });
    $(window).bind('load', function() {
        RidimenzionaDivContent();
    });

**a.felix** · 05-04-2009, 19:45

..e' una richiesta cosi' assurda??

**a.felix** · 06-04-2009, 13:13

sono un paio di giorni che sto' cercando di capire come mai del comportamento di questa pagina..

Devo far ridimezionare il dove centrale al 100% del possibile e in css non ho trovato soluzioni..
vedi post css

perche' il div si comporta correttamente allargando la pagina e non allo stesso modo quando la si ristringe?
qualcuno ha qualche input da darmi?

posto il codice..

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    <title>CSS Layout - 100% height</title>

    <script type="text/javascript" src="jquery-1.3.2.js"> </script>

    <script type="text/javascript">

    function RidimenzionaDivContent() {

        var header = 50;

        var footer = 37;

        var spacing = 80;

        var WinSize = $(document).height();

        var divSize = (WinSize - (header + footer + spacing));

        var Hstr = "" + divSize + "px";

        $("#content").animate({ height: Hstr }, 1000);

    };

    $(window).bind('resize', function() {

        RidimenzionaDivContent();

    });

    $(window).bind('load', function() {

        RidimenzionaDivContent();

    });

    </script> 

    <link rel="stylesheet" type="text/css" href="Css/layout1.css">

</head><body>

    <div id="container">



        <div id="footer">

            Footer

        </div>

        <div id="header">

            Header

        </div>

        <div id="content">

            Corpo

        </div>



    </div>

</body></html>

ps:il post viene da un precedente che ho gia' chiesto all'amministratore di cancellare perche' avevo eroneamente postato il codice errato e non potevo + modificarlo

**Xinod** · 06-04-2009, 15:21

probabilmente alla base del problema vi e' la differente interpretazione da parte di IE del gestore evento onresize: in pratica il browser non aspetta la fine del resize, ma esegue quanto specificato nel gestore evento all' avvio del resize, continuamente durante il resize e a fine resize

per farti capire con un esempio

codice:

var num=0;
$(window).bind('resize', function() {
  document.title=num++
});

con FF aumenta il valore in title solo a fine ridimensionamento,
con IE se inizi a draggare la finestra per ridimensionarla il valore aumenta continuamente

puoi risolvere settando una minima temporizzazione prima di procedere

codice:

var resizeTimer = null;
$(window).bind('resize', function() {
	if (resizeTimer) clearTimeout(resizeTimer);
	resizeTimer = setTimeout(function(){RidimenzionaDivContent()}, 100);
});

poi, secondo me dovresti scrivere
var WinSize = $('body').innerHeight();
piuttosto che var WinSize = $(document).height();

P.s. ridimenziona mette i brividi

**a.felix** · 06-04-2009, 18:01

Originariamente inviato da Xinod
P.s. ridimenziona mette i brividi

....io sono analfabeta...

e te sei.....UN GRANDEEEEEEEEEEEEEEEEEEEEe

dopo giorni che ci penavo ....e dopo aver visto piu' di una volta il codice che mi hai postato, ma non capendo perche' usare un temporizzatore....finalmete funziona!!!!!!

grazie 1000 della spiegazione Xinod

Discussione: [jQuery] ridimenzionare un div

Strumenti discussione

Ricerca discussione

Visualizza

[jQuery] ridimenzionare un div

Jquery strano comportamento

Permessi di invio