cambiare dimensioni di un DIV

**Mariastella1975** · 11-06-2013, 10:24

Ciao a tutto, ho una riga di codice che non riesco a far funzionare e per questo chiedo un vostro consiglio.
Ho il seguente css:

codice:

#angoliquadro
{
    background: #CCDDEE;
    color: #336699;
    font: normal 12px verdana;
    width: 750px;
    padding: 20px 20px 20px 20px;
    border: solid 3px #336699;
}

poi ho il div in questione con del codice al suo interno

codice:

<div id="angoliquadro" style="position: absolute; left: 145px; top: 460px">
//codice
</div>

All'interno del div ho delle caselle di testo, che tramite javascript vengono nascoste o mostrate a seconda dell'occorrenza.
In quasto caso il div (che ha un bordo colorato) diventa o troppo piccolo a contenere le caselle di testo o troppo grande da lasciare troppo spazio in fondo.
Nella funzione javascript che gestisce la visibilità delle caselle di testo ho inserito una riga di codice che dovrebbe modificarmi l'altezza del div; questo è il codice:

codice:

document.getElementById("angoliquadro").style.height="2900px";

Purtroppo non funziona, il box rimane sempre della stessa grandezza.
Mi sapete dire dove sbaglio?
Grazie.

Ms.

**cavicchiandrea** · 11-06-2013, 10:39

Ma l'ampiamento del div quando accade? Se questo deve avvenire al caricamento del documento dovrai usare l'evento onload

**Mariastella1975** · 11-06-2013, 10:42

No, non voglio farlo al caricamento della pagina, lo vorrei fare in javascript sulla stessa pagina; è possibile farlo?
In pratica io uso javascript per rendere visibile e nascondere delle caselle di testo contenute in questo div e vorrei che il box si adattasse alle caselle visualizzate.
Se non è chiaro vi mando il link del mio sito dove c'è un esempio.
Grazie.
Ms.

**br1** · 11-06-2013, 10:43

Non so cosa possa esservi d'altro nella tua pagina reale, ma a me funziona perfettamente:

codice:

<HTML>
<HEAD>
<style>
#angoliquadro
{
    background: #CCDDEE;
    color: #336699;
    font: normal 12px verdana;
    width: 750px;
    padding: 20px 20px 20px 20px;
    border: solid 3px #336699;
}
</style>
</HEAD>
<BODY>
<div id="angoliquadro" style="position: absolute; left: 145px; top: 460px">
//codice
</div>
<button onclick="document.getElementById('angoliquadro').style.height='2900px';">clicca</button>
</BODY>
</HTML>

**Mariastella1975** · 11-06-2013, 11:03

Grazie Br1.
In effetti il mio codice funziona, hai perfettamente ragione.
Purtroppo per rendere il div un pò più bello, ho fatto in modo da arrotondarne gli angoli; per fare ciò ho utilizzato un file esterno (curvycorners.js) che sicuramente conoscete; questo è il codice che non ho scritto ne post precedente.
Se elimino questa parte di codice. il dimensionamento del div da javascript funziona benissimo.
Adesso non vi chiedo di analizzare l'errore nel file curvycorners.js perchè sarebbe incorretto da parte mia; mi chiedevo soltanto se qualcuno abbia già avuto un'esperienza del genere.
Grazie.
Ms.

codice:

<meta>
        <script type="text/javascript" src="../curvycorners.js"></script>
</meta>




<script type='text/javascript'>

window.onload = function() {
    var impostazioni = {
        tl: { radius: 15 },
        tr: { radius: 15 },
        bl: { radius: 15 },
        br: { radius: 15 },
        antiAlias: true
    }
    curvyCorners(impostazioni, document.getElementById("angolipiepagina"));
}
</script>

**cavicchiandrea** · 11-06-2013, 11:16

Ma scusa perché non usi i css3 border-radius per arrotondare i bordi invece che js?

**Mariastella1975** · 11-06-2013, 11:20

Non uso i css3 border-radius semplicemente perchè non lo sapevo, non sono pratica in programmazione e, quando trovo qualcosa di facile che mi funziona, l'applico subito.
Adesso che me l'hai detto vado su internet a trovare un pò di documentazione e cerco di applicarla.
Grazie mille cavicchiandrea.
M.S.

**Mariastella1975** · 11-06-2013, 11:57

Ciao Cavicchiandrea, ho visto un po i css3 border-radius, effettivamente non è difficile applicarli.
Ho già fatto un esempio:

codice:

<html>
    <head>
        <style>
        #rettangolo {
    width: 300px;
    height: 200px;
    background-color: #EFAE54;
    border-radius: 20px;
} 
        </style>
    </head>
    <body>
        <div id="rettangolo"></div>
    </body>
</html>

Funziona benissimo e è anche meglio di come l'avevo fatto io.
L'unico problema, che non è neanche piccolo, è la compatibilità con la versione di internet explorer inferiore alla 9, infatti sul mio computer ho ancora la versione 8 ed il codice non funziona, su crome tutto Ok.
Adesso non mi preoccupo per me, mi chiedo quanti miei clienti possano ancora avere versioni di IE inferiori alla 9 e se valga la pena cambiare il mio codice con questo.
Mi dai qualche suggerimento.
grazie mille.
Ms.

**cavicchiandrea** · 11-06-2013, 13:27

Non l'avevo precisato che i css3 nelle verisoni antecedenti alla 9 di IE non funzionava perché non lo ritenevo cosi importante, comunque decidi tu cosa è più importante lo script curvycorners.js con le difficoltà di gestire l'altezza del div o usare i css3 e l'utente che con IE < 9 vedrà il div con gli angoli

Discussione: cambiare dimensioni di un DIV

Strumenti discussione

Ricerca discussione

Visualizza

cambiare dimensioni di un DIV

Permessi di invio