Creare un accordion con animazione

Scritto il
Pubblicato inVarie

Utilizziamo i tag html5 details e summary per creare l’accordion:

<details name="group">
<summary>Descrizione 1</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</details>
<details name="group">
<summary>Descrizione 2</summary>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia...
</details>

Usiamo il codice css per creare l’animazione quando apro l’accordion:

details {
  --open-size: min(30vw, 600px);
}

/* Animazione di apertura accordion orizzontale */
::details-content {
  transition: width 0.5s ease, content-visibility 0.5s ease allow-discrete;
  width: 0;
}

[open]::details-content {
  width: var(--open-size);
}

Un esempio funzionante lo trovate qui

Generare una password casuale

Scritto il
Pubblicato inVarie
Utilizzando il metodo Math.random() di javascript in questo esempio creeremo una password casuale, di seguito il codice: 
<html>
 <head>
  <title>password casuale</title>
 </head>
<body>
<script type="text/javascript">
 function passwordCasuale(length) {
    const caratteri = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let pwd = "";
    for (let i = 0; i < length; i++) {
        pwd += caratteri.charAt(Math.floor(Math.random() * caratteri.length));
    }
    return pwd;
}
document.write(passwordCasuale(10));
 </script>
</body>
</html>

Come risolvere l’errore “call to undefined function mysql connect”

Scritto il
Pubblicato inPhp

Se ricevi questo errore vuol dire che hai eseguito l’aggiornamento da php5 a php7 e ora mysql_connect da errore questo vuol dire che stai utilizzando librerie deprecate.mysql_* funzioni con mysqli_* functions.

Per risolvere il problema abbiamo due possibilità:

  1. Modificare tutti gli script php che hanno le vecchie MySQL Function con le nuove funzioni (sto parlando di PDO e MySQLi).
  2. Con questo metodo è invece possibile bypassare il problema attraverso una semplice inclusione di uno script, una libreria che sovrascriva le vecchie funzioni MySQL

Lo script dovrà essere incluso nella prima riga di ogni pagina che richieda l’aggiornamento così:

include_once('mysql-fix.php');

Come attivare SMS dalle tue app con testo e numero precompilati

Scritto il
Pubblicato inVarie

Oggi è molto comune chiedere ai tuoi utenti di inviarti un messaggio di testo per avviare una conversazione, o ottenere informazioni da te.

Ma chiedere a loro di aprire la loro applicazione SMS, inserire il tuo numero, aggiungere il testo sono tutte azioni che creano attrito.

Fortunatamente, c’è il codice che gestisce questo per noi, puoi creare un tag <a> con un intento SMS e aggiungere sia il numero che il testo iniziale che vuoi che abbia:

<a href="sms://012345678?&body=ISCRIVITI ORA">SMS ISCRIVITI ORA allo 012345678</a>

Aprirà la tua applicazione SMS, aggiungerà quel testo al corpo e ti consentirà di inviarlo al numero che hai già lì.

Come si crea un pulsante che “pulsa”

Scritto il
Pubblicato inCss

Per ottenere l’effetto voluto useremo i css3 transform e animation. Per realizzare la grafica del pulsante utilizzeremo bootstrap.

Di seguito il codice html:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<button type="button" class="btn btn-primary btn-lg pulse">pulse</button>:

Questo è il codice css:


.pulse {
  -webkit-animation: pulse 1.5s infinite;
}
.pulse-button:hover {
  -webkit-animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  50% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
  }
}

Qui troverete una demo funzionante.

Copyright ©2026 RGwebdev

Home  | Collabora | Contatti | Login

 

Tema Seamless Buone Ricette, sviluppato da Altervista

Apri un sito e guadagna con Altervista - Disclaimer - Segnala abuso - Privacy Policy - Personalizza tracciamento pubblicitario