Javascript - Garder le même onglet ouvert / personnaliser le champ date

[IzumiRK]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://indare-division.forumactif.com/

Description du problème

Bonjour !

J'ai deux questions totalement différentes mais comme elles sont toutes les deux (je pense) basées sur du javascript, je les mets dans le même sujet.

La première est assez basique : j'ai une page d'accueil codée en javascript pour avoir un système d'onglets, mais j'aimerais bien que l'onglet ouvert soit conservé à l'actualisation ou en rechargeant la page (pour chacun choisisse son onglet d'accueil, finalement). C'est déjà le cas de mon autre système d'onglet mais comme les codes sont foncièrement différents et que je n'y connais rien en javascript, je ne sais pas du tout comment faire la même chose avec le code de la PA

Le code des onglets:

La deuxième est un peu plus spécifique. je me demandais s'il y avait un moyen de changer le nom des mois dans le champ "date" du profil pour mettre quelque chose de personnalisé en bidouillant dans le javascript. Vu qu'on peut le faire dans le qeel je me disais que c'était peut-être possible En gros j'ai des noms de mois différents sur mon forum rp et je voulais que les dates de naissance des persos puissent être sélectionnées avec les noms de mois dans l'univers, mais pour le coup j'ai pas la moindre idée de si/comment c'est possible.

Voilà, c'est tout pour moi ^-^
Merci d'avance si vous pouvez m'aider avec ces petits soucis de code !

[Invité]

Hello IzumiRK,
je présume que c'est pour afficher tes catégories?
Je te conseille le script de mon ami Ange Tuteur:
https://fmdesign.forumotion.com/t472-category-tabs#5772

En français le script a cocher sur l'index:

Code:

$(function() {
          // automatically detects the version
          var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('fa_edge') ? 4 : 'badapple';
        
          if (version == 'badapple') {
            if (window.console && console.warn) console.warn('The plugin "fa_tabs" is not supported for your forum version.');
            return;
          }
        
          window.fa_tabs = {
            active : my_getcookie('fa_tab_active') || 0, // active tab
            list : [], // category list
            version : version, // forum version
        
            // language settings
            lang : {
              title : 'Selectionner une catégorie',
              placeholder : 'Categorie',
              all : 'Tout afficher'
            },
        
            // selectors
            select : {
              content : !version ? '#content-container td:has(> img[height="5"])' : 'main-content',
              category : ['.forumline:has(.secondarytitle)', '.forabg', '.main:has(.tcr) .main-head', '.borderwrap:has(.index-box)', '.forum-category'][version]
            },
        
            // function for changing the active category
            change : function(index) {
              my_setcookie('fa_tab_active', index); // save the active tab to a cookie
          
              // actions to run if the tab is not "all"
              if (index != 'all') {
                if (fa_tabs.active == 'all') {
                  fa_tabs.tab[0].previousSibling.className = '';
                  fa_tabs.display('none');
                } else {
                  fa_tabs.tab[fa_tabs.active].className = '';
                  fa_tabs.list[fa_tabs.active].style.display = 'none';
                }
        
                fa_tabs.tab[index].className = 'fa_tabactif';
                fa_tabs.list[index].style.display = '';
          
                if (fa_tabs.version == 2) {
                  if (fa_tabs.active != 'all') fa_tabs.list[fa_tabs.active].nextSibling.style.display = 'none';
                  fa_tabs.list[index].nextSibling.style.display = '';
                }
              } else {
                if (fa_tabs.active != 'all') fa_tabs.tab[fa_tabs.active].className = '';
                fa_tabs.tab[0].previousSibling.className = 'fa_tabactif';
                fa_tabs.display('');
              }
          
              fa_tabs.active = index;
            },
        
            // change the display of all categories
            display : function(state) {
              for (var i = 0, j = fa_tabs.list.length; i < j; i++) {
                fa_tabs.list[i].style.display = state;
                if (version == 2) fa_tabs.list[i].nextSibling.style.display = state;
              };
            },
        
            // stop tab scrolling
            stop : function() {
              if (fa_tabs.interval) {
                window.clearInterval(fa_tabs.interval);
                fa_tabs.interval = null;
              }
            },
        
            // scroll tablist
            scroll : function(by, max) {
              if (!fa_tabs.interval) {
                var node = document.getElementById('fa_tablist').firstChild.firstChild;
          
                fa_tabs.interval = window.setInterval(function() {
                  var margin = +node.style.marginLeft.replace(/px/, '');
                  (by < 0 && margin <= max) || (by > 0 && margin >= max) ? fa_tabs.stop() : node.style.marginLeft = margin + by + 'px';
                }, 1);
              }
            }
        
          };
        
          // startup variables
          var frag = document.createDocumentFragment(),
              container = $('<div id="fa_category_tabs"><h2 id="fa_tabs_title">' + fa_tabs.lang.title + '</h2></div>')[0],
              tablist = $('<div id="fa_tablist"><div class="inner_tabs"><div></div></div></div>')[0],
              catglist = $('<div id="fa_catglist" />')[0],
          
              a = $(fa_tabs.select.category, !version ? $(fa_tabs.select.content)[0] : document.getElementById(fa_tabs.select.content)),
              i = 0,
              j = a.length,
              htmlStr = '<a href="javascript:fa_tabs.change(\'all\');">' + fa_tabs.lang.all + '</a>';
        
          // drop off the main container before the first category
          a[0] && a[0].parentNode.insertBefore(container, a[0]);
        
          // loop through each category
          for (; i < j; i++) {
            if (version == 2) var next = a[i].nextSibling;
        
            // create our tabs
            htmlStr += '<a href="javascript:fa_tabs.change(' + i + ');">' + ($('H2:first', a[i]).text() || fa_tabs.lang.placeholder + ' ' + i) + '</a>';
        
            // append the category to the list and hide it
            catglist.appendChild(a[i]);
            a[i].style.display = 'none';
        
            // get the next sibling as well for punbb
            if (version == 2) {
              catglist.appendChild(next);
              next.style.display = 'none';
            }
        
            fa_tabs.list[i] = a[i]; // cache the category to the array
          }
        
          if (fa_tabs.list[0]) {
            tablist.firstChild.firstChild.innerHTML = htmlStr; // fill in the tablist
            fa_tabs.tab = [].slice.call(tablist.getElementsByTagName('A')); // create an array for the tabs
            fa_tabs.tab.shift(); // remove the all tab
        
            fa_tabs.change(fa_tabs.active); // setup the active tab
        
            // finally add the content to the document
            frag.appendChild(tablist);
            frag.appendChild(catglist);
            container.appendChild(frag);
        
            window.setTimeout(function() {
              if (tablist.firstChild.scrollWidth > tablist.firstChild.clientWidth) {
                tablist.className = 'fa_tabs_overflow';
                tablist.firstChild.firstChild.style.marginLeft = '0px';
                tablist.insertAdjacentHTML('beforeend', '<a class="tab_scroller scroll_left" href="#" onmousedown="fa_tabs.scroll(1, 0); return false;" onclick="fa_tabs.stop(); return false;" onmouseout="fa_tabs.stop();"><</a><a class="tab_scroller scroll_right" href="#" onmousedown="fa_tabs.scroll(-1, -' + (tablist.firstChild.scrollWidth - tablist.firstChild.clientWidth) + '); return false;" onclick="fa_tabs.stop(); return false;" onmouseout="fa_tabs.stop();">></a>');
              }
            }, 100);
          }
        });
        
        $('head').append('<style type="text/css">#fa_tabs_title{color:#333;font-size:24px;font-weight:400;font-family:arial,sans-serif;margin:3px;line-height:24px}.inner_tabs a,a.tab_scroller{font-family:arial,sans-serif;height:30px;line-height:30px}#fa_tablist{position:relative;white-space:nowrap}#fa_tablist.fa_tabs_overflow{padding:0 18px}.inner_tabs{overflow:hidden;padding-bottom:1px;margin-bottom:-1px}a.tab_scroller{color:#FFF;background:#333;font-size:16px;text-align:center;position:absolute;bottom:2px;width:15px;opacity:.1}a.tab_scroller.scroll_left{left:0}a.tab_scroller.scroll_right{right:0}#fa_tablist:hover a.tab_scroller{opacity:.7}#fa_tablist a.tab_scroller:hover{opacity:1}#fa_catglist{background:#EEE;border:1px solid #CCC;border-radius:3px;padding:10px 6px}.inner_tabs a{color:#333 !important;background:#DDD;border:1px solid #CCC;border-bottom:none;border-radius:3px 3px 0 0;text-decoration:none!important;font-size:12px;font-weight:700;display:inline-block;padding:0 10px;margin:3px 3px 0}.inner_tabs a.fa_tabactif,.inner_tabs a:hover{background:#EEE;position:relative;bottom:-1px;opacity:1}</style>');


Le style est intégré .

Ensuite pour la date,on peut faire quelque chose mais ce ne sera que visuel
il faut le faire sur tout le forum ou l'on trouve la date ne naissance:

Pour cela as-tu activé le profil avancé ?:
Utilisateurs et groupes/Profil/Options générales/Options générales du profil

Tu peux tester ce script sur le profil du membre, il devrait fonctionner si tu n'as pas modifié l'intitulé.


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur toutes les pages.


Déposes ceci:

Code:


$(function(){
if((location.href.match(/page_profil=informations/))||(location.href.match(/mode=editprofile/)))
  $('select[id^="profile_field"]:eq(1)').each(function(){
    var $this=$(this);
var janvier="Mois 1";
var fevrier="Mois 2";
var mars="Mois 3";
var avril="Mois 4";
var mai="Mois 5";
var juin="Mois 6";
var juillet="Mois 7";
var aout="Mois 8";
var septembre="Mois 9";
var octobre="Mois 10";
var novembre="Mois 11";
var decembre="Mois 12";
var test=$(this).closest('tr').find('td:contains(Date de naissance)').length;
if(test)
{
$this.find('option[value="1"]').text(janvier);
$this.find('option[value="2"]').text(fevrier);  
$this.find('option[value="3"]').text(mars);
$this.find('option[value="4"]').text(avril);
$this.find('option[value="5"]').text(mai);  
$this.find('option[value="6"]').text(juin);  
$this.find('option[value="7"]').text(juillet);
$this.find('option[value="8"]').text(aout);
$this.find('option[value="9"]').text(septembre);
$this.find('option[value="10"]').text(octobre);
$this.find('option[value="11"]').text(novembre);
$this.find('option[value="12"]').text(decembre);
}

});

});



Penses à cliquer sur le bouton VALIDER

Dans le script, tu as 12 variables correspondant à chaque mois de l'année:

Code:


var janvier="Mois 1";
var fevrier="Mois 2";
var mars="Mois 3";
var avril="Mois 4";
var mai="Mois 5";
var juin="Mois 6";
var juillet="Mois 7";
var aout="Mois 8";
var septembre="Mois 9";
var octobre="Mois 10";
var novembre="Mois 11";
var decembre="Mois 12";


Le mois de Janvier sera remplacé par le texte "Mois 1"

Il faudra juste modifier le texte selon les noms de mois dans l'univers correspondant.

Si cela te convient il faudra aussi modifier tout cela dans:
le profil des messages.
le profil du membre visité
etc etc.



a++

[IzumiRK]

Bonjour =)
Mon message s'est pas envoyé du coup je réécris, ça sera peut-être moins clair >>

Non, pas du tout ^^' ce n'est pas pour mes catégories, j'ai déjà un code pour ça qui est justement dont je parlais qui est déjà fonctionnel, mais pour ma PA (ça : https://i.imgur.com/9KCVv8d.png) qui a quatre onglets : chatbox, actuellement, contexte et bloc-notes. Sauf qu'actuellement, en actualisant ou en chargeant la page, ça remet sur la chatbox à chaque fois, et pour ceux que ça intéresse pas, c'est un peu dommage disons ^^

Pour l'autre code, le soucis c'est que passer en profil avancé détruit totalement le code d'affichage, il n'y a pas moyen d'avoir ça pour le profil simple ?
En vrai je voudrais juste modifier le nom du mois dans le sélecteur et faire en sorte qu'il s'affiche dans le format de date (XX mois XXXX au lieu ou avec le XX/XX/XXX). En soi si c'est pas faisable c'est pas grave c'est juste un gadget, mais c'est vrai qu'avoir les mois personnalisés au moins dans le sélecteur ça serait plus sympa
Dans ce truc-là :

Code:

<select class="gensmall" id="profile_field_4_-12_1" name="profile_field_4_-12[]" size="1"><option value="">Aucun</option><option value="1">Janvier</option><option value="2">Février</option><option value="3">Mars</option><option value="4">Avril</option><option value="5">Mai</option><option value="6">Juin</option><option value="7" selected="selected">Juillet</option><option value="8">Août</option><option value="9">Septembre</option><option value="10">Octobre</option><option value="11">Novembre</option><option value="12">Décembre</option></select>

(Je l'ai pris depuis l'inspection de page mais je me demande si ya pas moyen avec l'ID de faire changer le texte comme on fait avec le qeel ?

[Invité]

Re,

tu as le code html sur ta page d’accueil qui reçoit les onglets car j’espérais l'avoir mais bon .

Pour l'autre code, le soucis c'est que passer en profil avancé détruit totalement le code d'affichage, il n'y a pas moyen d'avoir ça pour le profil simple ?

Oui pas de soucis , c'est juste pour mettre en place le script en fonction de l'affichage du profil .

Pour bien saisir ta demande.
Au lieu d'avoir 01/01/2021
Tu désires avoir:
01/Janvier/2021

Est-ce bien cela ?

Si tel est le cas déposes ce script en sachant que ce n'est que visuel, il faudra intervenir partout ou se trouve ces informations

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur toutes les pages.


Déposes ceci:

Code:


$(function(){
if(location.pathname.match(/^\/u[0-9]*/))
$('tr[id="field_id-12"]').each(function(){
$(this).find('td:eq(1)').find('div.field_uneditable').each(function(){
$(this).html(
$(this).html()
  .replace(/\/01\//g,"\/Janvier\/")
  .replace(/\/02\//g,"\/Février\/")
  .replace(/\/03\//g,"\/Mars\/")
  .replace(/\/04\//g,"\/Avril\/")
  .replace(/\/05\//g,"\/Mai\/")
  .replace(/\/06\//g,"\/Juin\/")
  .replace(/\/07\//g,"\/Juillet\/")
  .replace(/\/08\//g,"\/Aout\/")
  .replace(/\/09\//g,"\/Septembre\/")
  .replace(/\/10\//g,"\/Octobre\/")
  .replace(/\/11\//g,"\/Novembre\/")
  .replace(/\/12\//g,"\/Décembre\/"));
});});});



Penses à cliquer sur le bouton VALIDER

Si tu désires le faire aussi pour la date d'inscription (id field_id-4 ), il faut juste ajouter dans le script ci-dessus à ce niveau:

Code:


$('tr[id="field_id-12"]')


Juste après le dernier crochet ], mettre une virgule et on ajoute comme ceci:

Code:


$(' tr[id="field_id-12"] , tr[id="field_id-4"] ')


Le script complet sera alors comme ceci:

Code:


$(function(){
if(location.pathname.match(/^\/u[0-9]*/))
$(' tr[id="field_id-12"] , tr[id="field_id-4"] ').each(function(){
$(this).find('td:eq(1)').find('div.field_uneditable').each(function(){
$(this).html(
$(this).html()
  .replace(/\/01\//g,"\/Janvier\/")
  .replace(/\/02\//g,"\/Février\/")
  .replace(/\/03\//g,"\/Mars\/")
  .replace(/\/04\//g,"\/Avril\/")
  .replace(/\/05\//g,"\/Mai\/")
  .replace(/\/06\//g,"\/Juin\/")
  .replace(/\/07\//g,"\/Juillet\/")
  .replace(/\/08\//g,"\/Aout\/")
  .replace(/\/09\//g,"\/Septembre\/")
  .replace(/\/10\//g,"\/Octobre\/")
  .replace(/\/11\//g,"\/Novembre\/")
  .replace(/\/12\//g,"\/Décembre\/"));
});});});



Tu as donc aussi le profil des messages a modifier car tu as aussi la date de naissance de renseigner,
pour ce fait, on va aussi intervenir légèrement car tu as des divs et on va juste leurs ajouter une class donc normalement
le visuel ne changera pas.

Tu dois avoir suivant la structure de tes profils de message ceci dans ton template:

Code:


<!-- BEGIN profile_field -->
<div>{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT} {postrow.displayed.profile_field.SEPARATOR}</div>
<!-- END profile_field -->


Remplaces par:

Code:


<!-- BEGIN profile_field -->
<div class="M14_profil"><span class="M14_label">{postrow.displayed.profile_field.LABEL}</span> <span class="M14_value">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}</div>
<!-- END profile_field -->


Penses a enregistrer puis à valider en cliquant respectivement sur  puis

Puis le script:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher  Sur les sujets

Déposes ceci:

Code:


$(function(){
  //on recherche le champs Né(e) le
$('.M14_profil').find('span[class="M14_label"]:contains(Né(e) le)').each(function(){

var test=$(this).length;
if(test)
{
$(this).parent().find('span.M14_value').each(function(){
$(this).html(
$(this).html()
  .replace(/\/01\//g,"\/Janvier\/")
  .replace(/\/02\//g,"\/Février\/")
  .replace(/\/03\//g,"\/Mars\/")
  .replace(/\/04\//g,"\/Avril\/")
  .replace(/\/05\//g,"\/Mai\/")
  .replace(/\/06\//g,"\/Juin\/")
  .replace(/\/07\//g,"\/Juillet\/")
  .replace(/\/08\//g,"\/Aout\/")
  .replace(/\/09\//g,"\/Septembre\/")
  .replace(/\/10\//g,"\/Octobre\/")
  .replace(/\/11\//g,"\/Novembre\/")
  .replace(/\/12\//g,"\/Décembre\/"));
});
}
});});



Penses à cliquer sur le bouton VALIDER

Pour l'inscription ce sera ce script a déposer à la suite de l'autre:

Code:

$(function(){
  //on recherche le champs Date d'inscription en échappant l apostrophe
$('.M14_profil').find('span[class="M14_label"]:contains(Date d\'inscription)').each(function(){
var test=$(this).length;
if(test)
{
$(this).parent().find('span.M14_value').each(function(){
$(this).html(
$(this).html()
  .replace(/\/01\//g,"\/Janvier\/")
  .replace(/\/02\//g,"\/Février\/")
  .replace(/\/03\//g,"\/Mars\/")
  .replace(/\/04\//g,"\/Avril\/")
  .replace(/\/05\//g,"\/Mai\/")
  .replace(/\/06\//g,"\/Juin\/")
  .replace(/\/07\//g,"\/Juillet\/")
  .replace(/\/08\//g,"\/Aout\/")
  .replace(/\/09\//g,"\/Septembre\/")
  .replace(/\/10\//g,"\/Octobre\/")
  .replace(/\/11\//g,"\/Novembre\/")
  .replace(/\/12\//g,"\/Décembre\/"));
});
}
});});

a++

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.