Visualizzazione risultati 1 fino 8 di 8
Like Tree4Likes
  • 1 Post By alemoppo
  • 1 Post By GraphOGLRisorse
  • 1 Post By GraphOGLRisorse
  • 1 Post By alemoppo

Discussione: Rendere l'infografica facilmente condivisibile

  1. #1
    piovonotorte non è connesso Utente Blog
    Data registrazione
    24-03-2022
    Messaggi
    13

    Predefinito Rendere l'infografica facilmente condivisibile

    Ciao a tutti ragazzi
    vorrei un aiutino per rendere l'infografica facilmente condivisibile.

    Sono riuscito a mettere l'infografica sul sito e grazie ad "embeded Code Generator" sono riuscito a mettere al di sotto dell'infografica un text area con il codice <p> </p> dell'infografica.

    Ho pensato di rendere la procedura di copia ancora più facile ed ho trovato questo codice su w3school

    Codice HTML:
    <p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
    
    <input type="text" value="Hello World" id="myInput">
    <button onclick="myFunction()">Copy text</button>
    
    <script>
    function myFunction() {
      /* Get the text field */
      var copyText = document.getElementById("myInput");
    
      /* Select the text field */
      copyText.select();
      copyText.setSelectionRange(0, 99999); /* For mobile devices */
    
      /* Copy the text inside the text field */
      navigator.clipboard.writeText(copyText.value);
      
      /* Alert the copied text */
      alert("Copied the text: " + copyText.value);
    }
    </script>




    ho pensato di andare a sostituire al posto di Hello World il codice <p> </p> di embeded Code Generator quindi ottengo

    value ="<p> </p>" id="myInput">

    ma mi esce nella metà pagina di prova del sito w3schol , nella parte dove si testa il codice, il campo con il paragrafo <p> </p> di embed code generator
    ma affiacato da " id="myInput">

    cioè c'è questa id="myInput" che non dovrebbe comparire .

    https://ibb.co/crmYNL4

    come posso risolvere?
    Ultima modifica di piovonotorte : 06-05-2022 alle ore 18.20.05

  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    19,968

    Predefinito

    Devi utilizzare le entità html:

    Codice HTML:
    <input type="text" value="&lt;p&gt;testo paragrafo&lt;/p&gt" id="myInput">
    <button onclick="myFunction()">Copy text</button>
    
    <script>
    function myFunction() {
      /* Get the text field */
      var copyText = document.getElementById("myInput");
    
      /* Select the text field */
      copyText.select();
      copyText.setSelectionRange(0, 99999); /* For mobile devices */
    
      /* Copy the text inside the text field */
      navigator.clipboard.writeText(copyText.value);
      
      /* Alert the copied text */
      alert("Copied the text: " + copyText.value);
    }
    </script>
    Ciao!
    piovonotorte likes this.

  3. #3
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    3,181

    Predefinito

    Salve,
    in alternativa all'uso di input, può usare anche textarea.

    Con textarea non mi risulta che ci siano erroi di visualizzazione, sia con l'uso delle entità html che senza.

    Codice HTML:
    <p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
    
    <textarea id="myInput" style="height:50px;width:50%;justify-content:center;">senza entità html <p>Hello World!</p> 
    con entità html &lt;p&gt;Hello World!&lt;/p&gt</textarea>
    <button onclick="myFunction()" style="position:relative;top:-5px;">Copy text</button>
    
    <script>
    function myFunction() {
      /* Get the text field */
      var copyText = document.getElementById("myInput");
    
      /* Select the text field */
      copyText.select();
      copyText.setSelectionRange(0, 99999); /* For mobile devices */
    
      /* Copy the text inside the text field */
      navigator.clipboard.writeText(copyText.value);
      
      /* Alert the copied text */
      alert("Copied the text: " + copyText.value);
    }
    </script>
    Per ciò che vuole fare, non è sbagliato usare input, ma in generale è preferibile l'uso di textarea.

    Cordiali saluti.
    piovonotorte likes this.

  4. #4
    piovonotorte non è connesso Utente Blog
    Data registrazione
    24-03-2022
    Messaggi
    13

    Predefinito

    Citazione Originalmente inviato da alemoppo Visualizza messaggio
    Devi utilizzare le entità html:

    Codice HTML:
    <input type="text" value="<p>testo paragrafo</p>" id="myInput">
    <button onclick="myFunction()">Copy text</button>
    
    <script>
    function myFunction() {
      /* Get the text field */
      var copyText = document.getElementById("myInput");
    
      /* Select the text field */
      copyText.select();
      copyText.setSelectionRange(0, 99999); /* For mobile devices */
    
      /* Copy the text inside the text field */
      navigator.clipboard.writeText(copyText.value);
      
      /* Alert the copied text */
      alert("Copied the text: " + copyText.value);
    }
    </script>
    Ciao!
    grazie per avermi risposto

    bella l'idea ma cmq non mi funziona bene...compare sempre </p>" id="myInput">
    anche eliminando <p> del codice di "embeded Code Generator"

    peccato mi piaceva come idea
    Ultima modifica di piovonotorte : 09-05-2022 alle ore 13.27.11

  5. #5
    piovonotorte non è connesso Utente Blog
    Data registrazione
    24-03-2022
    Messaggi
    13

    Predefinito

    Citazione Originalmente inviato da GraphOGLRisorse Visualizza messaggio
    Salve,
    in alternativa all'uso di input, può usare anche textarea.

    Con textarea non mi risulta che ci siano erroi di visualizzazione, sia con l'uso delle entità html che senza.

    Codice HTML:
    <p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
    
    <textarea id="myInput" style="height:50px;width:50%;justify-content:center;">senza entità html <p>Hello World!</p> 
    con entità html <p>Hello World!</p></textarea>
    <button onclick="myFunction()" style="position:relative;top:-5px;">Copy text</button>
    
    <script>
    function myFunction() {
      /* Get the text field */
      var copyText = document.getElementById("myInput");
    
      /* Select the text field */
      copyText.select();
      copyText.setSelectionRange(0, 99999); /* For mobile devices */
    
      /* Copy the text inside the text field */
      navigator.clipboard.writeText(copyText.value);
      
      /* Alert the copied text */
      alert("Copied the text: " + copyText.value);
    }
    </script>
    Per ciò che vuole fare, non è sbagliato usare input, ma in generale è preferibile l'uso di textarea.

    Cordiali saluti.
    ciao grazie della risposta
    "embeded Code Generator" fornisce già un codice che permette sotto l'infografica di visualizzare un testo da copiare.
    Nel modo che hai scritto mi verrebbero due textarea una sotto l'altra

  6. #6
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    3,181

    Predefinito

    Citazione Originalmente inviato da piovonotorte Visualizza messaggio
    ciao grazie della risposta
    "embeded Code Generator" fornisce già un codice che permette sotto l'infografica di visualizzare un testo da copiare.
    Nel modo che hai scritto mi verrebbero due textarea una sotto l'altra
    Io non riscontro problemi con la versione da me proposta, così come per le altre.

    Creai un file di esempio con tutto il codice, in modo da ricreare il problema riscontrato, quindi riporti qui il link. Così possaiamo cercaere di trovare la soluzione.

    Cordiali saluti.
    Ultima modifica di GraphOGLRisorse : 09-05-2022 alle ore 20.22.07
    piovonotorte likes this.

  7. #7
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    19,968

    Predefinito

    Citazione Originalmente inviato da piovonotorte Visualizza messaggio
    bella l'idea ma cmq non mi funziona bene...compare sempre </p>" id="myInput">
    anche eliminando <p> del codice di "embeded Code Generator"
    In effetti sarebbe utile vedere la tua prova, a me funziona correttamente.

    Ciao!
    piovonotorte likes this.

  8. #8
    piovonotorte non è connesso Utente Blog
    Data registrazione
    24-03-2022
    Messaggi
    13

    Predefinito

    Vorrei porvi una domanda su questa possibilità di rendere disponibile e facilmente condivisibile l'infografica presente in un sito. Ovviamente l'infografica deve essere di qualità e dare importanti info facilmente leggibili, ma effettivamente questa possibilità di condivisione aiuta l'aumento di visita del nostro sito?




    OGGI POI
    a mente fresca ho ripetuto questa soluzione e penso di aver risolto il problema

    Citazione Originalmente inviato da GraphOGLRisorse Visualizza messaggio
    Salve,
    in alternativa all'uso di input, può usare anche textarea.

    Con textarea non mi risulta che ci siano erroi di visualizzazione, sia con l'uso delle entità html che senza.

    Codice HTML:
    <p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
    
    <textarea id="myInput" style="height:50px;width:50%;justify-content:center;">senza entità html <p>Hello World!</p> 
    con entità html <p>Hello World!</p></textarea>
    <button onclick="myFunction()" style="position:relative;top:-5px;">Copy text</button>
    
    <script>
    function myFunction() {
      /* Get the text field */
      var copyText = document.getElementById("myInput");
    
      /* Select the text field */
      copyText.select();
      copyText.setSelectionRange(0, 99999); /* For mobile devices */
    
      /* Copy the text inside the text field */
      navigator.clipboard.writeText(copyText.value);
      
      /* Alert the copied text */
      alert("Copied the text: " + copyText.value);
    }
    </script>

    ho ripetuto questa soluzione e penso di aver risolto.
    Il codice che da Embed Code Generator crea una textarea con il paragrafo <p> ....</p> da copiare per poter condividere facilmente l'infografica.
    Con la soluzione di GraphOGLRisorse , si può benissimo andare a copiare il codice ricevuto da Embed Code Generator ,nella textarea proposta, ed andare ad eliminare la textarea precedente. In più il pulsante viene ad essere adattato dallo stesso codice del sito, con i colori e lo stile dell'ambiente.

    Quindi posso dire che abbiamo risolto. GRAZIE GRAZIE
    Ultima modifica di piovonotorte : 12-05-2022 alle ore 12.43.50

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •