La data/ora di oggi è Ven 22 Set 2017 - 18:54

8 Risultati trovati per "javascript"

Effetto .fadeOut per le pagine del forum

Effetto .fadeOut per le pagine del forum


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.


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 http://img96.imageshack.us/img96/8636/carregando3.gif e modificarla con una a piacimento

Buona giornata!  :zen:

Da Niko
il Gio 24 Set 2015 - 14:56
 
Ricercare in: Tutorial
Argomento: Effetto .fadeOut per le pagine del forum
Risposte: 0
Visualizzazioni: 616

Conto alla rovescia senza personalizzazione

Conto alla rovescia senza personalizzazione



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

Aspetto





Preparazione



Per prima cosa bisogna andare in:
Pannello di amministrazioneModuli Gestione di codice Javascript


Ora clicca 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.

Se si utilizza l'editor, assicurarsi di essere in modalità di modifica (ecco l'icona ) doit être sur fond blanc (éditeur en mode source) e bisogna inserire il codice in questo modo:
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 amministrazioneModuli Gestione 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


Se non ti accontenti di questo semplice orologio testuale, puoi passare alla seconda parte per imparare a personalizzarlo Wink.


Da Martino
il Mer 9 Set 2015 - 10:51
 
Ricercare in: Tutorial
Argomento: Conto alla rovescia senza personalizzazione
Risposte: 0
Visualizzazioni: 592

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
 
Ricercare in: I problemi risolti con l'aspetto del forum
Argomento: mettere a destra le vari opzioni dei topic
Risposte: 12
Visualizzazioni: 572

Messaggi privati precedenti e successivi con un bottone

Messaggi privati precedenti e successivi con un bottone


MP precedenti e successivi

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





Codice javascript

Andiamo verso

Pannello di amministrazione Moduli 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

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>

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 Generale Messaggi e email Configurazione Soggetti per pagina

Il codice CSS

Pannnello di amministrazione Visualizzazione Colori 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
 
Ricercare in: Tutorial
Argomento: Messaggi privati precedenti e successivi con un bottone
Risposte: 0
Visualizzazioni: 578

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
 
Ricercare in: Argomenti chiusi con l'aspetto del forum
Argomento: Versione mobile per il portale, come fare
Risposte: 21
Visualizzazioni: 1196

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


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 !


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


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


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
 
Ricercare in: Tutorial
Argomento: Migliorare il sistema di @tag utente
Risposte: 0
Visualizzazioni: 672

Più opzioni per i tuoi #hashtag

Più opzioni per i tuoi #hashtag



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


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




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


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
 
Ricercare in: Tutorial
Argomento: Più opzioni per i tuoi #hashtag
Risposte: 0
Visualizzazioni: 770

Aggiungi un traduttore al tuo forum

Aggiungi un traduttore al tuo forum


Cari membri,

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




Come installarlo?

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


ed è tutto :good:


Tutorial creato dal forum di supporto inglese ed in particolare da Buttercup
Copyrigth © FORUMATTIVO.COM


Da Niko
il Lun 20 Apr 2015 - 17:05
 
Ricercare in: Tutorial
Argomento: Aggiungi un traduttore al tuo forum
Risposte: 0
Visualizzazioni: 584

Tornare in alto

Andare verso: