La data/ora di oggi è Mar 19 Mar 2024 - 8:45

9 risultati trovati per "javascript"

Effetto .fadeOut per le pagine del forum (Dissolvenza)

Effetto .fadeOut per le pagine del forum (Dissolvenza)


Descrizione

Tramite questo tutorial è possibile inserire sul proprio forum, un effetto di transizione fadeOut su tutte le pagine.

Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Gif11

Installazione

Per fare tutto questo è però necessario aggiungere un nuovo codice #javascript. Segui il seguente percorso:

Pannello di amministrazione Moduli HTML & JAVASCRIPT "Gestione dei codici Javascript"  


  • Titolo: a tua scelta
  • Dove: in tutte le pagine (o dove si preferisce)
  • Codice:
    Codice:
    [code]    jQuery(document).ready(function() {jQuery("a").click(function(event){event.preventDefault();linkLocation = this.href;jQuery("body").fadeOut(1000, redirectPage);jQuery(document).ready(function(){jQuery('body').before('<div class=pagcarreg style="text-align:center"><img src="http://img96.imageshack.us/img96/8636/carregando3.gif" border=0></div>');});
        });function redirectPage() {window.location = linkLocation;
        }});[/code]


Personalizzazione

Volendo, è possibile personalizzare o cambiare l'immagine di caricamento.
Sarà sufficiente cercare all'interno del codice l'immagine https://2img.net/r/ihimizer/img96/8636/carregando3.gif e modificarla con una a piacimento

Buona giornata!  :zen:

Da Niko
il Lun 1 Mar 2021 - 9:06
 
Cerca in: Header del forum
Argomento: Effetto .fadeOut per le pagine del forum (Dissolvenza)
Risposte: 0
Visite: 620

Effetto .fadeOut per le pagine del forum

Effetto .fadeOut per le pagine del forum


Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Logo Effetto .fadeOut per le pagine del forum

Descrizione

Tramite questo tutorial è possibile inserire sul proprio forum, un effetto di transizione fadeOut su tutte le pagine.

Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Gif11

Installazione

Per fare tutto questo è però necessario aggiungere un nuovo codice #javascript. Segui il seguente percorso:

Pannello di amministrazione Moduli HTML & JAVASCRIPT "Gestione dei codici Javascript"  


  • Titolo: a tua scelta
  • Dove: in tutte le pagine (o dove si preferisce)
  • Codice:
    Codice:
    [code]    jQuery(document).ready(function() {jQuery("a").click(function(event){event.preventDefault();linkLocation = this.href;jQuery("body").fadeOut(1000, redirectPage);jQuery(document).ready(function(){jQuery('body').before('<div class=pagcarreg style="text-align:center"><img src="http://img96.imageshack.us/img96/8636/carregando3.gif" border=0></div>');});
        });function redirectPage() {window.location = linkLocation;
        }});[/code]


Personalizzazione

Volendo, è possibile personalizzare o cambiare l'immagine di caricamento.
Sarà sufficiente cercare all'interno del codice l'immagine https://2img.net/r/ihimizer/img96/8636/carregando3.gif e modificarla con una a piacimento

Buona giornata!  :zen:

Da Niko
il Gio 24 Set 2015 - 14:56
 
Cerca in: Header del forum
Argomento: Effetto .fadeOut per le pagine del forum
Risposte: 0
Visite: 1732

Conto alla rovescia senza personalizzazione

Conto alla rovescia senza personalizzazione



Grazie a questo tutorial avrete la possibilità di realizzare un conto alla rovescia.

Aspetto




Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Tutori10

Preparazione



Per prima cosa bisogna andare in:
Pannello di amministrazioneHashtag javascript su Forum dei Forum: Aiuto per Forumattivo Arrow10Moduli Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Arrow10Gestione di codice Javascript


Ora clicca Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo 713205 Crea un nuovo javascript e compila il modulo nel seguente modo:

  • Titolo: Scegli un titolo che è desideri.
  • Posizionamento: su tutte le pagine.
  • JavaScript:

Codice:
var horloge=function(cible,options){
         if(!(cible.tagName||(cible instanceof jQuery&&cible[0].tagName)))return false;
         this.cible=cible;
         this.options=options||this.optionsParDefaut();
         };
         horloge.prototype={
       /*récupération de l'heure*/
       heure:function(){
         var d=new Date(),date=[],i,h,m,s,r=this,t,u,v=this.options.f_H;
         h=d.getHours();m=d.getMinutes();s=d.getSeconds();
         date["h"]=h<10?"0"+h:""+h;
         date["m"]=m<10?"0"+m:""+m;
         date["s"]=s<10?"0"+s:""+s;
         for(i in date){
         for(t=0;t<date[i].length;t++){date[i+(t+1)]=date[i][t];}
         }
         /*Actions*/
         t=v.match(/\{[jhms][0-9]?\}/g);
         for(i in t){
         v=v.replace(t[i],(u=date[t[i].slice(1,-1)])?u:"mode "+t[i]+" inconnu")
         }
         this.cible instanceof jQuery?this.cible.html(v):this.cible.innerHTML=v;
         /**/
         setTimeout(this.heure.bind(this),1000)
         },
         /*mode a rebours*/
         a_rebours:function(date_cible){
         var d=new Date(),date=[],dc=date_cible,dfs,i,j,h,m,s,r=this,t,u,v=this.options.f_C;
         dc=dc.split(/\D/);
         if(dc.length!=6){this.options.cible.html("Date non valide");return false};
         dc=dc.map(function(e){return parseInt(e)});
         dc=((t=dc[2])<10?"0"+t:t)+"-"+((t=dc[1])<10?"0"+t:t)+"-"+((t=dc[0])<10?"0"+t:t)+"T"+((t=dc[3])<10?"0"+t:t)+":"+((t=dc[4])<10?"0"+t:t)+":"+((t=dc[5])<10?"0"+t:t);
         dc=new Date(dc);
         dfs=parseInt((dc.getTime()>d.getTime())?(dc.getTime()-d.getTime())/1000:0);
         s=dfs%60;dfs-=s;
         j=parseInt(dfs/0x15180);dfs-=j*0x15180;
         h=parseInt(dfs/3600);dfs-=h*3600;
         m=dfs/60;
         date["j"]=""+j;
         while(date["j"].length<parseInt(this.options.n_J)){
         date["j"]="0"+date["j"];
         }
         date["h"]=h<10?"0"+h:""+h;
         date["m"]=m<10?"0"+m:""+m;
         date["s"]=s<10?"0"+s:""+s;
         for(i in date){
         for(t=0;t<date[i].length;t++){
         date[i+(t+1)]=date[i][t];
         }
         }
         /*Actions*/
         t=v.match(/\{[jhms][0-9]?\}/g);
         for(i in t){
         v=v.replace(t[i],(u=date[t[i].slice(1,-1)])?u:"mode "+t[i]+" inconnu")
         }
         this.cible instanceof jQuery?this.cible.html(v):this.cible.innerHTML=v;
         /**/
         this.instance_a_rebours=setTimeout(this.a_rebours.bind(r,date_cible),1000);
         if(0>=parseInt((dc.getTime()>d.getTime())?(dc.getTime()-d.getTime())/1000:0)){clearTimeout(this.instance_a_rebours);this.fin_a_rebours()}
         },
         fin_a_rebours:function(){},
       optionsParDefaut:function(){return {
       /*options de base*/
       /*taille fixe jours*/
       n_J:3,
       /*format Horloge*/
       f_H:'{h}:{m}:{s}',
       /*format Compte a rebours*/
       f_C:'{j} jours {h}:{m}:{s}'
       }}
       };

Convalida :new:

La sintassi



var x=new horloge(cible[,{options}]);


In questo codice "target" è obbligatorio ed è un elemento della pagina che riceverà il contenuto dell'orologio, quindi se avete un div con id "my-orologio" è possibile scrivere scrivere:
Codice:
var x=new horloge(document.getElementById("mon-horloge"));

oppure
Codice:
var x=new horloge($("#mon-horloge"));

Non importa il parametro "options", in quanto non è necessario. Adesso l'orologio rimarrà "vuoto" e dovremo indicare quale dei due metodi bisogna eseguire.

Il primo si chiama "heure" (heure = ora in italiano juasjuas ) semplicemente serve per visualizzare il tempo e per visualizzarlo bisogna fare:
Codice:
x.heure();

Il secondo si chiama "a_rebours" ed è possibile creare un conto alla rovescia, dando una data in formato francese in questo modo:
Codice:
JJ/MM/AAAA-hh:mm:ss

Per esempio:
Codice:
x.a_rebours("25/12/2015-00:00:00")


Installazione


Ora che abbiamo visto la sintassi di base, per mettere l'orologio nel forum bisogna utilizzare il seguente codice HTML:
Codice:
<span id="id_horloge"></span>

E' possibile inserire questo codice in annunci o in un widget.

Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo 997260 Se si utilizza l'editor, assicurarsi di essere in modalità di modifica (ecco l'icona Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo 1544916183) doit être sur fond blanc (éditeur en mode source) e bisogna inserire il codice in questo modo:
Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Screen11
In caso contrario, bisogna fare clic sull'icona per passare alla modalità di modifica.

Una volta che la parte HTML è fatta, è possibile ancora creare un nuovo {#}JavaScript{/#} come prima:
[b][b][b][b][b][b][b][b][b]Pannello di amministrazioneHashtag javascript su Forum dei Forum: Aiuto per Forumattivo Arrow10Moduli Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Arrow10Gestione di codice Javascript[/b][/b][/b][/b][/b][/b][/b][/b][/b]


Ora bisogna aggiungere il seguente codice per visualizzare l'ora:
Codice:
$(function(){
var x=new horloge($("#id_horloge"));
x.heure();
});

oppure il codice per il conto alla rovescia:
Codice:
$(function(){
var x=new horloge($("#id_horloge"));
x.a_rebours("25/12/2015-00:00:00");
});

Ovviamente si può cambiare la data e "id_horloge" in base alle proprie esigenze Wink.

Personalizzazione


Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Tutori10 Se non ti accontenti di questo semplice orologio testuale, puoi passare alla seconda parte per imparare a personalizzarlo Wink.


Da MartinoPio
il Mer 9 Set 2015 - 10:51
 
Cerca in: Tutorial
Argomento: Conto alla rovescia senza personalizzazione
Risposte: 0
Visite: 2209

mettere a destra le vari opzioni dei topic

Ciao,

MattiaDes ha scritto:Ma sono box molto larghi, non penso davvero possano riuscire a starci sulla destra..

concordo pienamente - non avevo ancora letto gli altri messaggi ma anche io avevo pensato lo stesso :bene:

MattiaDes ha scritto:Le parte delle opzioni sono racchiuse in poche variabili via template.. non c'è molto da fare

Sinceramente non so proprio come rendere fattibile la tua richiesta
Sarebbe comodo se si potessero prendere pezzi di un templates e metterli altrove, ma non è possibile


Ho provato a valutare anche con il #CSS e con #Javascript ma c'è ben poco da poter fare in questo caso Rolling Eyes
ci sono poche variabili e non porterebbero al risultato desiderato

:zen:
Da Niko
il Ven 24 Lug 2015 - 17:03
 
Cerca in: I problemi risolti con l'aspetto del forum
Argomento: mettere a destra le vari opzioni dei topic
Risposte: 12
Visite: 1768

Messaggi privati precedenti e successivi con un bottone

Messaggi privati precedenti e successivi con un bottone


Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Magic MP precedenti e successivi

Questa risorsa vi permetterà di inserire due bottoni nei messaggi privati per visualizzare il messaggio precedente o quello successivo Wink


Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Navmp11



Codice javascript

Andiamo verso

Pannello di amministrazione Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Arrow10 Moduli Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Arrow10 Gestione del codice javascript

  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(function(){
    var maxMP=50;/*2%/MP*/
    var a=["inbox","savebox"],b,dl=document.location.toString(),cc=1,cI=0,collect=[],SPP=false;
    var fpidP=function(dossier){var dossier=dossier,stop=stop||false;
    if(!stop)$.get("/privmsg?folder="+dossier+"&start="+cI,(function(dossier,d){
        var c,$d=$(d),i,l=dossier,$navMP=$("<div>",{id:"navMP"}),precedent,suivant;
        c=$("form[action^='/privmsg'] a[href^='/privmsg?folder="+l+"&mode=read&p=']",$d);
        if(!SPP){
    SPP=$("form[action^='/privmsg'] a[href*='&start=']",$d).length?parseInt(/&start=(\d+)/.exec($("a[href*='&start=']",$d)[0].href)[1]):50;
        }
        for(i=0;i<c.length;i++){
    collect[cI+i]=c[i];
    }
     for(i=0;i<collect.length;i++){
     if(collect[i].href.indexOf('&p='+pid)!=-1){
      if(i!==collect.length-1)$navMP.append($('<a>',{id:"navMP-precedent",href:collect[i+1].href,title:collect[i+1].textContent}));
      if(i!==0)$navMP.append($('<a>',{id:"navMP-suivant",href:collect[i-1].href,title:collect[i-1].textContent}));
      /*Evitons les requetes inutiles...*/
      stop=i<collect.length-1;
      break;
      };
     }
     cI+=SPP;cc++;
     if(cc<=Math.ceil(maxMP/SPP)&&!stop){fpidP(dossier);}
    $("#navMP").length?$("#navMP").html($navMP.html()):$("form[action^='/privmsg']").before($navMP);
       
      }).bind(null,dossier))};
    for(b in a){
     if(dl.indexOf("/privmsg\?folder="+a[b]+"&mode=read&p=")!=-1){
      var pid=/&p=(\d+)/.exec(dl)[1];
      fpidP(a[b]);
     }
    }
    });


Non dimenticatevi di salvare Wink

Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo 997260 Il codice #javascript è compatibile con tutte le versioni (phpbb2/3-invision-punbb), se volete decidere personalmente dove inserire i bottoni precedente/successivo, modificate il template privmsgs_read_body e aggiungete questa stringa di codice html dove volete visualizzare i bottoni:

Code: Selezionare il contenuto
<div id="navMP"></div>

Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo 997260 La visualizzazione dei bottoni può richiedere più o meno tempo a seconda della velocità e della configurazione del numero di soggetti per pagina del tuo forum: maggiore è il numero di soggetti per pagina, maggiore sarà il tempo che ci vorrà per caricare la pagina pazienza
È possibile verificare il valore del numero di soggetti per pagina andando verso:

Pannello di amministrazione Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Arrow10 Generale Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Arrow10 Messaggi e emailHashtag javascript su Forum dei Forum: Aiuto per Forumattivo Arrow10 Configurazione Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Arrow10 Soggetti per pagina

Il codice CSS

Pannnello di amministrazioneHashtag javascript su Forum dei Forum: Aiuto per Forumattivo Arrow10 Visualizzazione Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Arrow10 Colori Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Arrow10 Foglio di stile CSS

Aggiungete il codice css:
Codice:
#navMP>a{
  display:inline-block;
  padding-left:10px;
  padding-right:10px;
  font-size:16px;
  line-height:16px;
  color:#eee;
  background:#BDC8D0;
  text-decoration:none !important;
  border:1px solid #aaa;
}
#navMP>a:hover{
  color:#fff;
  background:#CDD8E0;
  text-decoration:none !important;
}
#navMP-precedent{
  border-radius:8px 0 0 8px;
}
#navMP-suivant{
  float:right;
  border-radius:0 8px 8px 0;
}
 
#navMP-precedent::before{
  content:"Précédent"
}
#navMP-suivant::before{
  content:"Suivant"
}

Non esitate a modificare il codice secondo le vostre preferenze

Da Niko
il Lun 29 Giu 2015 - 16:36
 
Cerca in: Tutorial
Argomento: Messaggi privati precedenti e successivi con un bottone
Risposte: 0
Visite: 2353

Versione mobile per il portale, come fare

Ciao @beo

potrei avere un codice #javascript da qualche parte.. ma non ti assicuro nulla Embarassed

(anche perchè devo trovarlo) :thanks:
Da Niko
il Gio 11 Giu 2015 - 18:32
 
Cerca in: Argomenti chiusi con l'aspetto del forum
Argomento: Versione mobile per il portale, come fare
Risposte: 21
Visite: 2720

Migliorare il sistema di @tag utente

Migliorare il sistema di @tag utente



Di default, il sistema per taggare i membri consiste nell'inserire il nickname di un utente, preceduto da un @ a spesso ci sono errori e tag sbagliati verso altri membri. Questo tutorial vi fornirà tre diversi modi per rendere questo sistema #user-friendly ! Wink

Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Captur29

Informazioni

Il metodo di installazione è con i codici #javascript quindi assicuratevi che sia attivato e andate verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice javascript-

I primi due codici script sono ottimizzati per tutte le versioni (se non avete modificato in modo troppo pesante i templates). Vedrete all'inziio dei codici una variabile a seconda della vostra versione: assicuratevi di cambiare il valore secondo la versione del vostro forum :bene:

0 : PHPBB2
1 : PHPBB3
2 : PUNBB
3 : INVISION

Ora... si comincia! :W:

  • @ prima dell'username nel profilo
  • Bottone per taggare i membri
  • Bottone SCEditor per taggare i membri


@ prima dell'username nel profilo

Questa modifica ti permetterà di aggiungere il simbolo @ prima del nickname nel profilo all'interno dei messaggi. Cliccando il segno @ verrà automaticamente inserito il nickname taggato nell'editor !

Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Taggeg10

Crea un nuovo codice javascript :new:

  • Titolo: a tua scelta
  • Dove: In tutte le pagine
  • Codice:
    Codice:
    /* VERSIONI DEI FORUM
     * 0 = PHPBB2
     * 1 = PHPBB3
     * 2 = PUNBB
     * 3 = INVISION
     */
    $(function() {
      var version = 0;
     
      if (/mode=reply/.test(window.location.search) && my_getcookie('fa_mention')) {
        document.post.message.value += '@"' + my_getcookie('fa_mention') + '" ';
        my_setcookie('fa_mention',''); 
      } if (!/\/t\d+/.test(window.location.pathname)) return;
     
      for (var a = $(['.name strong a', '.postprofile dt strong a', '.username a', '.postprofile dt a ~ a'][version]), b, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'); i<j; i++) {
        b = document.createElement('A');
        b.title = 'Tagga ' + $(a[i]).text();
        b.style.marginRight = '3px';
        b.className = 'fa-mention';
        b.innerHTML = '@';
        b.href = '#';
        b.onclick = function() {
          var n = this.title.replace(/^.*?\s/,'');
         
          if ($.sceditor) t.insertText('@"' + n + '" ');
          else {
            my_setcookie('fa_mention', n);
            window.location.href = '/post?t=' + window.location.pathname.replace(/\/t(\d+)-.*/,'$1') + '&mode=reply';
          }
         
          return false;
        };
     
        a[i].parentNode.insertBefore(b, a[i]);
      }
     
      $(function(){
        if (!$.sceditor) return;
        t=$(t).sceditor('instance');
      });
    });


Modifiche : All'inizio del codice troverete delle variabili. Assicuratevi che nel codice sia assegnata la versione del vostro forum Wink

Se volete migliorare lo stile del simbolo @ potete farlo con i codici CSS! (Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS)
Codice:
/* default styles */
a.fa-mention {
  color:#333;
}

/* hover styles */
a.fa-mention:hover {
  color:#666;
}


Se volete cambiare il simbolo @ con un qualunque altro simbolo, cercate b.innerHTML = '@'; e cambiate il simbolo @

quando avrai finito, salva le modifiche Very Happy

Bottone per taggare i membri

Queste modifiche ti permetteranno di aggiungere un bottone! Cliccando il bottone il nome verrà aggiunto nell'editor

Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Imgmen10

Crea un nuovo codice javascript :new:
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    /* FORUM VERSIONS
     * 0 = PHPBB2
     * 1 = PHPBB3
     * 2 = PUNBB
     * 3 = INVISION
     */
    $(function() {
      var version = 0,
          image = 'http://i19.servimg.com/u/f19/18/21/60/73/mentio10.png';
     
      if (/mode=reply/.test(window.location.search) && my_getcookie('fa_mention')) {
        document.post.message.value += '@"' + my_getcookie('fa_mention') + '" ';
        my_setcookie('fa_mention',''); 
      } if (!/\/t\d+/.test(window.location.pathname)) return;
     
      for (var a = $(['.post-options', '.profile-icons', '.post-options', '.posting-icons'][version]), b, c, d = ['.name strong a', '.author a', '.username a', '.author a'][version], e, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'), l = version == 1 || version == 3; i<j; i++) {
        b = document.createElement('IMG');
        b.src = image;
        b.alt = 'Mention';
        b.title = 'Tagga ' + $(a[i]).closest('.post').find(d + ':not(.fa-mention)').text();
        b.className = 'i_icon_mention';
        b.onclick = function() {
          var n = this.title.replace(/^.*?\s/,'');
         
          if ($.sceditor) t.insertText('@"' + n + '" ');
          else {
            my_setcookie('fa_mention', n);
            window.location.href = '/post?t=' + window.location.pathname.replace(/\/t(\d+)-.*/,'$1') + '&mode=reply';
          }
        };

        if (l) {
          c = document.createElement('LI');
          c.appendChild(b);
        }
       
        a[i].insertBefore(l ? c : b, a[i].firstChild);
      }
     
      $(function(){
        if (!$.sceditor) return;
        t=$(t).sceditor('instance');
      });
    });


Modifica : come per il codice precedente, all'inizio del codice è necessario modificare la versione del proprio forum assegnando il numero corretto

In aggiunta potrete anche cambiare l'immagine che verrà visualizzata nel bottone, cambiandolo a vostra scelta Wink

quando avete fatto le modifiche desiderate, salvate 🇳🇪

Bottone SCEditor per taggare membri

Questa modifica ti permetterà di aggiungere un bottone BBcode nell'editor per menzionare membri e amici Wink
Potrai inserire il nome dell'utente o, se hai aggiunto degli amici, scegliergli da una lista predefinita. Una volta finito, clicca per aggiungere il membro nel tag Wink

Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Scemen11

Crea un nuovo codice javascript :new:

  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(function(){
      if (!$.sceditor || /\/privmsg/.test(window.location.pathname)) return;
      var storage = window.localStorage, s = document.createElement('SELECT'), amis;
     
      if (storage && storage.faAmis && storage.faAmisExp > +new Date - 29*59*1000 && storage.faAmisUser == _userdata.username) s.innerHTML = storage.faAmis;
      else {
        $.get('/privmsg?mode=post', function(d) {
          amis = $('select[name="userfriend"]', d)[0] || 0;
     
          if (amis) {
            amis.firstChild.innerHTML = 'Select a friend';
            s.innerHTML = amis.innerHTML;
          }
     
          if (storage) {
            storage.faAmis = amis ? amis.innerHTML : 0;
            storage.faAmisUser = _userdata.username;
            storage.faAmisExp = +new Date;
          }
        });
      }
     
     
      $.sceditor.command.set('mention', {
        dropDown : function(editor, caller, callback) {
          var a = document.createElement('DIV'), b = document.createElement('INPUT'), c = document.createElement('INPUT');
          b.type = 'button';
          b.value = 'Inserisci';
          b.className = 'button';
     
          c.type = 'text';
          c.id = 'fa-mention';
     
          a.innerHTML = '<div><label for="fa-mention">Username :</label></div>' + ( s.innerHTML ? '<div><label>Tagga un amico :</label></div>' : '' ) + '<div></div>';
          a.firstChild.appendChild(c);
          a.lastChild.appendChild(b);
     
          if (s.innerHTML != 0) {
            s.value = '';
            a.getElementsByTagName('DIV')[1].appendChild(s);
            s.onchange = function() {
              c.value = s.value;
            };
          }
     
          b.onclick = function() {
            c.value && callback(c.value);
            editor.closeDropDown(true);
          };

          editor.createDropDown(caller, 'insertmention', a);
        },

        exec : function(c) { mention(c, this) },
        txtExec : function(c) { mention(c, this) },
     
        tooltip : 'Tagga un membro'
      });
     
      toolbar = toolbar.replace(/quote,/,'mention,quote,');
     
      function mention(c, e) {
        $.sceditor.command.get('mention').dropDown(e, c, function(pseudo) {
          e.insertText('@"' + pseudo + '" ');
        });
      }
    });


Ora aggiungiamo un po' di stile nel nostro foglio di stile CSS e salviamo le modifiche :new:
Codice:
/* button image */
.sceditor-button-mention div { background-image:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }

/* drop down input */
#fa-mention {
  background:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}


Ora... cosa aspettate? Taggate i vostri membri e amici ! Di festa :W:


Da Niko
il Gio 21 Mag 2015 - 18:25
 
Cerca in: Tutorial
Argomento: Migliorare il sistema di @tag utente
Risposte: 0
Visite: 2555

Più opzioni per i tuoi #hashtag

Più opzioni per i tuoi #hashtag



Definizione

Questo tutorial vi permetterà di scoprire due modi per migliorare l'utilizzo del sistema di #hashtag presente sul tuo forum Forumattivo. Entrambe le funzioni utilizzano il codice #javascript quindi assicurati di averlo attivato Wink

Pannello di amministrazione ► Moduli ► Gestione del codice javascript

Se sei nuovo su Forumattivo, assicurati che sia attivata la gestione del codice javascript (in questa stessa pagina appena aperta). Ora scegli quale o quali opzion installare Wink

  • Hashtag popup options
  • SCEditor hashtag button




Popup per gli Hashtag

Questa modifica fornisce un'opzione avanzata per una migliore interazione con gli hashtag, permettendoti di seguire velocemente nuoti #hashtag, visualizzare i soggetti taggati e gestire i tuoi tag

Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Popup10

Crea un nuovo codice javascript con queste impostazioni :new:

  • Titolo: Popup hashtag
  • Dove: In tutte le pagine
  • Codice:
    Codice:
    $(function() {
      var a = document.getElementsByTagName('A'), b = document.createElement('DIV'), i = 0, j = a.length, actif, t;
      b.className = 'fa-hashtag-options';
      b.style.display = 'none';
      document.body.appendChild(b);
     
      for (; i<j; i++) {
        if (a[i].title && /\/tags\//.test(a[i].href) && /^#/.test(a[i].innerHTML)) {
          a[i].className += ' fa-hashtag';
         
          a[i].onclick = function() {
           
            if (actif != this) {
              actif = this, t = this.innerHTML;
              t.length > 24 && (t = t.slice(0, 25).replace(/^\s+|\s+$/g, '') + '...');
             
              b.style.left = $(this).offset().left + 'px';
              b.style.top = $(this).offset().top + 'px';
              b.innerHTML = '<div class="fa-hashtag-title">Opzioni per <span class="fa-hashtag-tag">' + t + '</span></div><b>• </b><a href="' + this.href + '">Visualizza topic taggati</a>' + (_userdata.session_logged_in ? '<form method="post" name="addtag_form" action="/profile?mode=editprofile&page_profil=tags&start&submit=1"><b>• </b><a href="#" onclick="this.parentNode.submit();return false;">Segui <span class="fa-hashtag-tag">' + t + '</span></a><input name="addtag" type="hidden" value="' + this.innerHTML.slice(1) + '"></form><b>• </b><a href="/profile?mode=editprofile&page_profil=tags">Gestisci Hashtag</a>' : '');
             
              /none/.test(b.style.display) && (b.style.display = 'block');
            } else {
              actif = null;
              b.style.display = 'none';
            }
           
            return false;
          };
        }
      }
    });


Adesso abbiamo solo bisogno di aggiungere un po' di #css in modo che il popup venga visualizzato correttamente. Andate quindi verso Pannello di amministrazione ► Visualizzazione ► Colori ► Foglio di stile CSS e incollate questo codice di stile
Codice:
/* options drop down */
.fa-hashtag-options {
  color:#666;
  font-size:11px;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  line-height:14px;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  box-shadow:0 3px 6px rgba(0, 0, 0, 0.175);
  margin-top:20px;
  padding:3px;
  position:absolute;
  z-index:100;
}

/* options title */
.fa-hashtag-title {
  font-size:12px;
  border-bottom:1px solid #CCC;
  padding-bottom:3px;
  margin-bottom:3px;
}

/* option links */
.fa-hashtag-options a {
  color:#333;
  text-decoration:none;
  display:inline-block;
  padding:2px 6px 2px 0;
}

.fa-hashtag-options a:hover {
  color:#666;
  text-decoration:underline;
}

/* option bullets */
.fa-hashtag-options b {
  color:#333;
  padding-left:6px;
}

/* option tags */
.fa-hashtag-tag {
  color:#000;
  font-weight:bold;
}


Il codice script aggiunge una classname a tutti gli hashtag nei post, in questo modo potrai aggiungere uno stile unico ai tuoi hashtag, utilizzando questi codici di base:
Codice:
/* hashtag styles */
a.fa-hashtag {
  color:#666;
  text-decoration:none;
  background-color:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  display:inline-block;
  padding:3px;
}

a.fa-hashtag:hover {
  color:#333;
  background-color:#DDD;
  border-color:#999;
}


Questo è l'effetto di default, ma potete personalizzarlo in tutti i modi che preferite! Di festa
Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Style10



ScEditor: bottone per gli hashtag

Questa modifica aggiungerà un bottone extra al vostro editor. Con questo bottone potrete inserire il nome di un hashtag, o sceglierlo da una lista di tag predefiniti che stai seguendo

Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Editor10

Andate per creare un nuovo codice javascript :new:

  • Titolo: Bottone sceditor hashtag
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(function(){
      if (!$.sceditor || /\/privmsg/.test(window.location.pathname)) return;
      var storage = window.localStorage, s = document.createElement('SELECT'), tags = '';
     
      if (storage && storage.faTags && storage.faTagsExp > +new Date - 29*59*1000 && storage.faTagsUser == _userdata.username) s.innerHTML = storage.faTags;
      else {
        $.get('/profile?mode=editprofile&page_profil=tags', function(d) {
          var h = $('form[name="tag_list"] a', d);
       
          if (h.length) {
            for (var i = 0, j = h.length, txt; i<j; i++) {
              txt = h[i].innerHTML.replace(/^\s+|\s+$/g,'');
              if (/^#/.test(txt)) {
                !tags && (tags += '<option value="">Seleziona un tag</option>');
                tags += '<option value="'+ txt.slice(1) +'">' + (txt.length > 24 ? txt.slice(0, 25) + '...' : txt) + '</option>';
              }
            }
            s.innerHTML = tags;
          }
       
          if (storage) {
            storage.faTags = tags ? tags : 0;
            storage.faTagsUser = _userdata.username;
            storage.faTagsExp = +new Date;
          }
        });
      }
       
     
      $.sceditor.command.set('hashtag', {
        dropDown : function(editor, caller, callback) {
          var a = document.createElement('DIV'), b = document.createElement('INPUT'), c = document.createElement('INPUT');
          b.type = 'button';
          b.value = 'Insert';
          b.className = 'button';
         
          c.type = 'text';
          c.id = 'fa-hashtag';
         
          a.innerHTML = '<div><label for="fa-hashtag">Hashtag :</label></div>' + ( s.innerHTML ? '<div><label>Tags seguiti :</label></div>' : '' ) + '<div></div>';
          a.firstChild.appendChild(c);
          a.lastChild.appendChild(b);
         
          if (s.innerHTML != 0) {
            s.value = '';
            a.getElementsByTagName('DIV')[1].appendChild(s);
            s.onchange = function() {
              c.value = s.value;
            };
          }
         
          b.onclick = function() {
            c.value && callback(c.value);
            editor.closeDropDown(true);
          };

          editor.createDropDown(caller, 'inserthashtag', a);
        },

        exec : function(c) { tag(c, this) },
        txtExec : function(c) { tag(c, this) },
       
        tooltip : 'Aggiungi un hashtag'
      });
     
      toolbar = toolbar.replace(/quote,/,'hashtag,quote,');
     
      function tag(c, e) {
        $.sceditor.command.get('hashtag').dropDown(e, c, function(tag) {
          e.insertText('#' + tag.replace(/^#/,'').replace(/[\xD7\xF7\x00-\x2F\x3A-\x40\x5B-\x60\x7B-\xBF]/g, '_') + ' ');
        });
      }
    });


Exclamation Attenzione: i caratteri no validi saranno sostituiti da un _

Quindi il bottone ha una sua icona e anche il menu a comparsa, è quindi necessario aggiungere del css al vostro foglio di stile. Andate quindi verso Pannello di amministrazione ► Visualizzazione ► Colori ► Foglio di stile CSS e incollate questo codice di stile
Codice:
/* button image */
.sceditor-button-hashtag div { background-image:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) !important }

/* drop down input */
#fa-hashtag {
  background:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}


Cliccate Conferma e sarete pronti per taggare i vostri topic :W:


Da Niko
il Ven 1 Mag 2015 - 12:26
 
Cerca in: Plugin e Funzionalità aggiuntive
Argomento: Più opzioni per i tuoi #hashtag
Risposte: 0
Visite: 2283

Aggiungi un traduttore al tuo forum (Google)

Aggiungi un traduttore al tuo forum (Google)


Definizione

Questo tutorial vi permetterà di aggiungere un traduttore grazie ad un codice #javascript google :bene:

Hashtag javascript su Forum dei Forum: Aiuto per Forumattivo Google10


Come installarlo?

Vai verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice javascript e :new: crea un nuovo codice
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    function gT(){new google.translate.TranslateElement({pageLanguage:"it",multilanguagePage:!0,floatPosition:google.translate.TranslateElement.FloatPosition.BOTTOM_RIGHT})};
    $.getScript("http://translate.google.com/translate_a/element.js?cb=gT");


Personalizzazione

  • E' possibile modificare la lingua di default del forum modificando pageLanguage:"it" - di default è IT
  • Puoi modificare anche la posizione del banner, modificando FloatPosition.BOTTOM_RIGHT
    E' possibile utilizzare:
    • BOTTOM_RIGHT
    • BOTTOM_LEFT
      TOP_RIGHT
      TOP_LEFT.




Da Niko
il Lun 20 Apr 2015 - 17:05
 
Cerca in: Altre risorse
Argomento: Aggiungi un traduttore al tuo forum (Google)
Risposte: 0
Visite: 2151

Torna in alto

Vai verso: