Allungare un box contenitore.

**Madsex** · 30-08-2011, 11:09

Come da titolo dovrei animare, al click su un link, un box contenitore. Sebbene riesca tranquillamente a farlo ho un problema legato al fatto che i contenitore sono di numero indefinito, quindi dovrei fare una cosa generica e non con id o classi specifiche. Vi mostro il codice che ho fatto e che funziona perfettamente ma solo con un elemento.

codice javascript:

codice:

<script type="text/javascript">
$(document).ready(function() {
	
	$("#animate").click(function() {
    $(".container").animate(
            {"height": "200px"},
            "fast");
    });
	
});
</script>

codice html:

codice:

<div class='container'>

Clicca

</div>

In pratica se si preme su clicca il div container si allunga. Ma se ho altri div container e altri "clicca" successivi a questo al click su un link sia allungano tutti i container. Insomma dovrei creare una cosa un po' dinamica, con un unica classe ma tanti div per quella classe che si comandano singolarmente con l'apposito link interno ad essi.

Grazie in anticipo per qualunque aiuto!

**Leonardo M.** · 30-08-2011, 11:20

cosi:

codice:

  <div class='container'>
      Clicca
  </div>

e lo script:

codice:

    $(".animate").click(
       function(){
           $(this).parents(".container").animate({
              "height": "200px"},
              "fast");
           });
       }
    );

parents jquery
http://api.jquery.com/parents/

Leonardo

**Madsex** · 30-08-2011, 12:52

Splendido, adesso funziona perfettamente, infatti mi sono andato a studiare pure un po' il link che mi hai dato.

Grazie.

Ps: approfitto del post già aperto, nel caso ne apro un altro. Mi stavo domandando, quando si usa animate per allungare il div, devo dare un' altezza precisa in px. Ma se non conosco l'altezza? O meglio, se il div si dovesse allungare in base al contenuto e non in base a un'altezza specifica. Come si può fare?

Grazie in anticipo!

**Leonardo M.** · 30-08-2011, 23:00

scusa la fretta... cercando ti tenere la tua struttura html più simile che posso, farei cosi:

codice:

<head>
    <title>auto height</title>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <style type="text/css"> 
        .pippo
        {
            width:400px;
            height:20px;
            overflow:hidden;
        }
        .bottone
        {
            height:20px;
            line-height:20px;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            $(".bottone").click(
                function() {

                    var altezzaTesto = $(this).parents(".testo").height();

                    $(this).parents(".pippo").animate({
                        height: altezzaTesto
                    }, 800, function() {
                        // Animation complete.
                    });
                }
            );
        });
    </script>
</head>
<body id="pippo">
    <div class="pippo">
        <div class="testo">
        <div class="bottone">bottone</div>        
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla, diam vestibulum consequat lacinia, lacus est euismod orci, et semper quam sem eu nisl. Nam semper eros purus, et fermentum lorem. Aliquam id luctus nibh. Quisque quis libero felis, nec tempor lacus. Nam a nibh diam, in euismod velit. Nulla et tellus in lacus pretium facilisis. Fusce vitae urna ac lacus molestie dapibus. Mauris tristique lacinia tortor, sit amet pharetra erat dapibus condimentum. Duis porta vestibulum ante, sit amet ornare sapien ullamcorper a. 
        </div>
    </div>
    <div class="pippo">
        <div class="testo">
        <div class="bottone">bottone</div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
    <div class="pippo">
        <div class="testo">
        <div class="bottone">bottone</div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla, diam vestibulum consequat lacinia, lacus est euismod orci, et semper quam sem eu nisl. Nam semper eros purus, et fermentum lorem.
        </div>
    </div>
</body>

cambiando la struttura in questa maniera

codice:

    <div class="pippo">
        <div class="bottone">bottone</div>
        <div class="testo">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>

cambierei cosi:

codice:

    $(this).next(".testo").animate({
          height: 'toggle'
     }, 800, function() { /* Animation complete. */ });

come sempre link http://api.jquery.com/animate/

Leonardo

Discussione: Allungare un box contenitore.

Strumenti discussione

Ricerca discussione

Visualizza

Allungare un box contenitore.

Permessi di invio