bloccare ridimensionamento

**gpinodj** · 18-01-2016, 19:00

ho il seguente codice:

codice:

  <style type="text/css">
#box {
   width: 20px;
   height: 20px;
   background-color: #F00;
   transition: background-color 0.4s ease-in-out,
               width 0.4s ease-in-out 0.25s,
               height 0.4s ease-in-out 0.25s,
               margin-top 0.4s ease-in-out 0.25s,
               margin-left 0.4s ease-in-out 0.25s;
               
             
               
}






#box:active {
   margin-top: 100px;
   margin-left: 100px;
   background-color: #0F0;
   width: 500px;
   height: 500px;


    position: fixed;
  
   
   
}
 </style>

come faccio a fare in modo che al click il div si "apre" o si ridimensiona e non si rimpicciolisce più?

**KillerWorm** · 22-01-2016, 04:07

Io risolverei con un pizzico di JavaScript che, al click, applica semplicemente una classe:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      #box {
        width: 20px;
        height: 20px;
        background-color: #F00;
        transition: background-color 0.4s ease-in-out,
        width 0.4s ease-in-out 0.25s,
        height 0.4s ease-in-out 0.25s,
        margin-top 0.4s ease-in-out 0.25s,
        margin-left 0.4s ease-in-out 0.25s;
      }
      #box.aperto {
        margin-top: 100px;
        margin-left: 100px;
        background-color: #0F0;
        width: 500px;
        height: 500px;
        position: fixed;
      }
    </style>
  </head>
  <body>
    <div id="box" onclick="this.className='aperto'"></div>
  </body>
</html>

Discussione: bloccare ridimensionamento

Strumenti discussione

Ricerca discussione

Visualizza

bloccare ridimensionamento

Permessi di invio