Intégrer cookies sur un script

[demeter1]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://altitudetropicale.forums-actifs.com/index.forum

Description du problème

Bonjour à tous,
auriez vous une idée pour intégrer un cookie sur ce script afin que si la div a été activée et non refermée, qu'elle s'affiche même si la page est réactualisée et, intégrer la mention 'désactiver les onglets lorsque le sélecteur est sur display block ?

Code:

<button id="baba">
     Activer le système à onglets    
</button>
<div id="cat-onglets">
          
</div>
    <script>
document.querySelector("#baba").onclick = function() {
if (window.getComputedStyle(document.querySelector('#cat-onglets ')).display=='none'){
document.querySelector("#cat-onglets ").style.display="block";
} else {
document.querySelector("#cat-onglets ").style.display="none";
}
}
</script>

Merci par avance pour votre aide.

[Invité]

Hello Stéphane ,
dans le même concept ce script devrait faire l'affaire:

Code:

<button id="M14_No_Actif">Activer le système à onglets</button>
<button id="M14_Actif"style="display:none;">Désactiver le système à onglets</button>
<div id="cat-onglets"style="display:none;">Contenu</div>
    <script>
$(function(){
$('#M14_No_Actif').click(function(){
$(this).hide();
$('#cat-onglets,#M14_Actif').show();
window.localStorage && localStorage.setItem('M14_Onglet',1)

});
$('#M14_Actif').click(function(){
$('#M14_Actif,#cat-onglets').hide();
$('#M14_No_Actif').show();
window.localStorage && localStorage.removeItem('M14_Onglet')

});
window.localStorage && localStorage.getItem('M14_Onglet') && (
 $('#M14_No_Actif').hide(),
$('#cat-onglets,#M14_Actif').show()
  )
});
     
</script>


Le contenu (affiché/masqué ) se trouve ici:

Code:

<div id="cat-onglets"style="display:none;">Contenu</div>

.
a++

[demeter1]

Bonjour Philippe,
un grand merci pour cette aide.

Je teste le script de suite pour l'utilisation que je souhaite en faire.

[Invité]

Re,

pas de soucis Stéphane

a++

[demeter1]

Me revoilou,
sur une page html , le script rempli sa fonction à merveille.

Vu que me suis contenté de donner que le script de base en pensant qu'il suffirait de rajouter un cookie, j'ai un peu faussé la donne pour la résolution du problème.

je vais donner un peu plus de détails.
Il y a peu, par le biais de l'aide que tu m'as fournie sur Milouze14, on a  installé le système des favoris et, j'en ai profité pour offrir aux membres un affichage pleine page de l'index (demande faite par une majorité de membres).

Juste après installation du sytème, j'a quelques membres qui ont regretté ce système des onglets.

Comme je suis une bonne poire j'ai accédé à cette demande en testant deux systèmes d'onglets qui étaient tout aussi compatible l'un que l'autre. j'ai fini par adopter celui  d'ange tuteur pour les catégories en onglets

voici le js modifié en fonction de mon index_box

Code:

$(function() {
          'DEVELOPED BY ANGE TUTEUR';
          'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
          'ORIGIN : http://fmdesign.forumotion.com/t472-category-tabs#5772';
        
          // 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 : 'Sélectionner une catégorie',
              placeholder : 'Categorie',
              all : 'Toutes'
            },
        
            // selectors
            select : {
              content : !version ? '#content-container td:has(> img[height="5"])' : 'main-content',
              category : ['table.M14_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:20px;line-height:20px}#fa_tablist{position:relative;white-space:nowrap;    text-align: center;}#fa_tablist.fa_tabs_overflow{padding:0 18px}.inner_tabs{overflow:hidden;padding-bottom:1px;margin-bottom:-1px,    text-align: center;}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:transparent;}.inner_tabs a{color:#fff!important;background:transparen;border:2px solid #678500;font-size:11px;font-weight:700;display:inline-block;padding:0 10px;margin:3px 3px 0;border-radius:30px}.inner_tabs a.fa_tabactif,.inner_tabs a:hover{background:rgba(255,0,0,.2);position:relative;bottom:-1px;opacity:1}</style>');

Ce js s'est trouvé être compatible avec le système des favoris .

Bon, là, je me suis dit super tout fonctionne, ne reste plus qu'a trouver un script qui me permette de cacher les onglets afin de ne pas gêner ceux qui ne veulent pas de ce système.
Le script donné plus haut a rempli cette fonction mais hélas, il faut ré-activer les onglets à chaque ré-actualisation.

J'a testé le script que tu m'as fourni en essayant de l'adapter avec l'id du script d'ange tuteur (l'id passe de cat-onglets à fa_tablist).

Voici le script (j'ai supprimé la div vu qu'elle est générée par le js d'Ange tuteur)

Code:

<button id="M14_No_Actif">Activer le système à onglets</button>
<button id="M14_Actif"style="display:none;">Désactiver le système à onglets</button>

    <script>
$(function(){
$('#M14_No_Actif').click(function(){
$(this).hide();
$('#fa_tablist,#M14_Actif').show();
window.localStorage && localStorage.setItem('M14_Onglet',1)
 
});
$('#M14_Actif').click(function(){
$('#M14_Actif,#fa_tablist').hide();
$('#M14_No_Actif').show();
window.localStorage && localStorage.removeItem('M14_Onglet')
 
});
window.localStorage && localStorage.getItem('M14_Onglet') && (
 $('#M14_No_Actif').hide(),
$('#fa_tablist,#M14_Actif').show()
  )
});
    
</script>

Le script fonctionne à merveille pour ceux qui font le choix d'activer les onglets mais, ceux qui ne l'activent pas ont un affichage direct des onglets lors de la ré-actualisation.


Je donne les autres renseignements nécessaires à la résolution du soucis
l'index box

Spoiler:

le js des forums favoris

Spoiler:

test effectué sur ce forum :
http://crevettes-passion.forumgratuit.org
Désolé pour ce roman  

-----------------------------------------------------------------------------------------------------------------------------------------------------------
edit: je suis une grosse buse
il suffisait de remplacer dans le js des onglets

Code:

  tablist = $('<div id="fa_tablist"><div class="inner_tabs"><div></div></div></div>')[0],
              catglist = $('<div id="fa_catglist" />')[0],


par

Code:

tablist = $('<div id="fa_tablist"style="display:none;"><div class="inner_tabs"><div></div></div></div>')[0],

Philippe, dis moi si je n'ai pas fait une bourde; on ne sait jamais.

[Invité]

Hello Stéphane,

Philippe, dis moi si je n'ai pas fait une bourde; on ne sait jamais.

tu as choisie l'option la plus fiable et surtout la plus courte .
Cela fonctionne sur mon fofo de tests ,donc pas de soucis .

a++

[demeter1]

Merci Philippe