besoin d'un hébergeur gratuit & sans inscription de js.

[Little-princess]

J'essaie depuis peu de faire un tableau en page d'accueil grace à ce lien : https://forum.forumactif.com/t284871-faire-des-onglets-sur-la-page-d-acceuil#2519401
J'ai suivi les conseils de la aidactif sauf que quand on appuie sur onglet 2 il là même chose que le 1 & JE n'arrive pas à trouver de hébergeur gratuit & sans inscription pour un fichier js

Voilà merci .

[ge80]

Bonjour,

Il en existe beaucoup comme celui-ci par exemple : Lien

Pour le code vous avez certainement fait une erreur.
donner votre codage pour correction.


Cordialement,
Ge

[Little-princess]

Ce lien propose des truc à 3 euros ou chez pas quoi , moi ce que veux c'est un truc GRATUIT
Message page d'acceuil ( truc js )

Code:

 <script src="http://www.toofiles.com/fr/oip/documents/js/skrrri.html"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></ul>

Code CSS

Code:

a.mainmenu img{height: 50px; width: 50px;}

ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #d8f8ca;
  border: 1px solid #68ce3e;
  cursor: pointer;
  margin-bottom: -1px;
} 
.mon_onglet:hover{
  background: #b8efa1;
}           
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #b8efa1;
  border-top: 1px solid #68ce3e;
  border-right: 1px solid #68ce3e;
  border-left: 1px solid #68ce3e; 
  border-bottom: 1px solid #b8efa1; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}
.mon_contenu{
  color: #666;
  background: #b8efa1;
  border: 1px solid #68ce3e;
  padding: 10px;
        margin: -1px;           
}
#mes_contenus, #mes_onglets{
  width: 400px;
}

[ge80]

-> Lien plus précis

C'est l'hébergement de sites qui est ayant pas de fichier.

Je teste le code

[Little-princess]

D'accord ( et Merci pour ton aide )

[Invité]

Un truc tous simple gestion des codes javascript et vous remplissez pas placement il sera donc juste hébergé...enfin je suppose vu que l'option n'est pas obligatoire...A vérifier...
Le css dans le css personnalisable...

[ge80]

C'est ceci qui pose problème
http://www.toofiles.com/fr/oip/documents/js/skrrri.html


Il manque deux /div fermante

elles sont ajoutées

Code:

function changeOnglet(_this){
   var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
   for(var i = 0; i < getOnglets.length; i++){
      if(getOnglets[i].id){
         if(getOnglets[i].id == _this.id){
            getOnglets[i].className = 'mon_onglet_selected';
            document.getElementById('c' + _this.id).style.display          = 'block';
         }
         else{
            getOnglets[i].className = 'mon_onglet';
            document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
         }
      }
   }         
}

ajouter ce script dans les page javaScript (js) de votre forum.

Code:


<div id="mes_onglets">
   <ul>
      <li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
      <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
      <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
      <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
      <div class="clear">
         <div id="mes_contenus">
            <div id="co_1" class="mon_contenu">
               Mon contenu 1
            </div>
            <div id="co_2" class="mon_contenu" style="display: none;">
               Mon contenu 2
            </div>
            <div id="co_3" class="mon_contenu" style="display: none;">
               Mon contenu 3
            </div>
            <div id="co_4" class="mon_contenu" style="display: none;">
               Mon contenu 4
            </div>
         </div>
      </div>
   </ul>
</div>


[Little-princess]

J'ai crée un nouveau javascript pour le 2e code ( ce qui marche pas pour les onglet) & Le 1e il faut le mettre où ?

[ge80]

Le code de vos onglets est incomplet.
Il manquait deux </div>

Remplacer votre code par ce nouveau.

Code:


    <div id="mes_onglets">
      <ul>
          <li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
          <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
          <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
          <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
          <div class="clear">
            <div id="mes_contenus">
                <div id="co_1" class="mon_contenu">
                  Mon contenu 1
                </div>
                <div id="co_2" class="mon_contenu" style="display: none;">
                  Mon contenu 2
                </div>
                <div id="co_3" class="mon_contenu" style="display: none;">
                  Mon contenu 3
                </div>
                <div id="co_4" class="mon_contenu" style="display: none;">
                  Mon contenu 4
                </div>
            </div>
          </div>
      </ul>
    </div>


L'emplacement est variable.
A quel endroit aviez vous placé l'autre ?

Reprenez le tutoriel et vous avez la démarche entièrement expliquée !

[Invité]

Bonsoir,

Pourquoi chercher un hébergeur de code javascript alors que vous pouvez héberger le code directement sur votre forum et vous simplifier la vie?
> https://forum.forumactif.com/t308422-nouveaute-forumactif-gestion-des-codes-javascript

J'ai repris les explications des tableaux à onglets dans cette astuce:
> https://forum.forumactif.com/t310879-3-tableaux-a-onglets-pour-le-message-d-accueil

Cordialement.

[Little-princess]

Merci