Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Script d'onglets qui ne fonctionne pas sur ForumActif ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par .1019 le Lun 22 Avr 2019 - 0:09

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 :

Description du problème

Bonjour,

Voilà, je suis dans l'impasse. J'essaye de mettre en place un système d'onglets pour une fiche de présentation sur le forum sur lequel je travaille.

Le script que j'ai choisi, tiré d'un tuto w3schools, fonctionne parfaitement sur codepen, ou sur le "bac à sable" de w3schools. Le voici d'ailleurs :

Spoiler:
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
J'ai essayé de le mettre dans les balises script sur le message même de la fiche de présentation, dans un premier temps, après le code de la présentation, mais ça ne fonctionnait pas.

Je l'ai mis ensuite dans sa propre page javascript, dans les modules du Forum, avec premièrement coché "sur les sujets", puis "sur toutes les pages", mais ça ne marche toujours pas.

Sachant que j'ai mis en place le HTML et le CSS qui vont avec, bien entendu, et que comme dit, ce même code, HTML, CSS et JS réunis fonctionnent à merveille... ailleurs, mais pas sur forumactif.

Il y a-t-il quelque chose qu'il faut faire en plus pour forumactif ? y a-t-il quelque chose que forumactif ne comprend pas dans ce script ?

Merci.
.1019

.1019
***

Messages : 111
Inscrit(e) le : 11/05/2013

Voir le profil de l'utilisateur
.1019 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par Tite-May le Lun 22 Avr 2019 - 10:47

Bonjour,

Dans la partie de ton PA sur les javascript, sont-ils bien activé ?

avatar

Tite-May
****

Féminin
Messages : 207
Inscrit(e) le : 13/08/2012

Voir le profil de l'utilisateur http://tambouille-raleuses.forumactif.com/
Tite-May a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par .1019 le Lun 22 Avr 2019 - 10:55

Bonjour,

Oui, ils sont activés puisque j'en utilise déjà d'autres.
.1019

.1019
***

Messages : 111
Inscrit(e) le : 11/05/2013

Voir le profil de l'utilisateur
.1019 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par *Splash* le Lun 22 Avr 2019 - 10:57

Hi,
Alors je ne code pas mais j'ai comme l'impression que pour ce script, tel qu'il est, il manque des caractères
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3645
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://lgds-lesgensduspectacle.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par .1019 le Lun 22 Avr 2019 - 11:02

Lesquels ? Je suis pas un expert en JS mais je sais le lire et il ne parait pas manquer quoique ce soit. Il marche ailleurs de plus.
.1019

.1019
***

Messages : 111
Inscrit(e) le : 11/05/2013

Voir le profil de l'utilisateur
.1019 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par *Splash* le Lun 22 Avr 2019 - 11:04

@.1019 a écrit:Lesquels ?
Dans ton post initial il n'y a qu'un seul script
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3645
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://lgds-lesgensduspectacle.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par .1019 le Lun 22 Avr 2019 - 13:22

Oui ?... C'est celui qui ne fonctionne pas.
.1019

.1019
***

Messages : 111
Inscrit(e) le : 11/05/2013

Voir le profil de l'utilisateur
.1019 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par Adam_sfp le Lun 22 Avr 2019 - 13:30

Bonjour

C'est une fiche de présentation en page d'accueil , dans un post ou autres ?
Vous pouvez donner le HTML et CSS associés au script?
le lien du forum?
Cdt.

Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4461
Inscrit(e) le : 18/04/2008

Voir le profil de l'utilisateur http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par .1019 le Lun 22 Avr 2019 - 13:37

Bonjour,

C'est une fiche de présentation dans un post. Voici le HTML (et le CSS, je l'ai pas mis dans le CSS pour l'instant, c'est un test, donc désolé si c'est pas joli à lire!) :

Spoiler:
<style>.pres-gif{width:100%; box-shadow: 0px 0px 2px #ccc; border: 1px solid #bbb; padding: 2px;} .pres-grid{display:grid; grid-gap: 14px; grid-template-columns: 206px 210px 150px; grid-template-rows: 24px repeat(2, 137px);} .pres-place01 {grid-column: 1 / 2;grid-row: 1 / 4;}.pres-place02 {grid-column: 2 / 4;grid-row: 1 / 2;} .pres-place03 {grid-column: 2 / 3; grid-row: 2 / 4;} .pres-title {background: #34343a;height: 24px;} .homepage-message .pa .box-container, .box-container {border-radius: 3px;position: relative;}.homepage-message .pa .box-shadow, .box-shadow {box-shadow: 1px 1px 5px #c8c5c5, -1px -1px 5px #c8c5c5;}.homepage-message .pa .box-content, .box-content {font-family: Arial;font-size: 12px;color: #616161;padding: 10px;} .homepage-message .pa .box-title, .box-title {background-color: #d6d2d3;font-family: Bebas Neue, Arial;font-size: 18px;color: #c29277;text-align: center;padding: 2px 0;text-shadow: 1px 1px 2px #fff;letter-spacing: 0.3px;} .pres-place03 .box-content {height: 246px; text-align: left;} .pres-grid .box-container {background: linear-gradient(to top, #E0E0E0, #F7F7F7);} .pres-place04 {grid-column: 3 / 4;grid-row: 2 / 3;} .pres-place05 {grid-column: 3 / 4;grid-row: 3 / 4;} .tabcontent{display:none;}</style>

<img src="https://media0.giphy.com/media/3oKIPjdrRj8dOLd6GQ/source.gif" class="pres-gif" />

<div class="pres-grid"><img src="https://i.imgur.com/uz1xpVZ.jpg" class="topic-avatar pres-place01" /><div class="pres-title pres-place02">Roza Rose Votiakova</div><div class="box-container box-shadow pres-place03"><div class="box-title">- Informations personnage -</div><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div><div class="box-container box-shadow pres-place04"><div class="box-title">- Défauts -</div><div class="box-content">Impulsive
Grande Gueule
Entêté
Méfiante
Prétentieuse</div></div><div class="box-container box-shadow pres-place05"><div class="box-title">- Qualités -</div><div class="box-content">Impulsive
Grande Gueule
Entêté
Méfiante
Prétentieuse</div></div></div>
<div class="pres-title">What's in my head</div>
<div class="box-container box-shadow"><div class="box-title">- Informations personnage -</div><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div>
<div class="pres-title">What's in my head</div>
<div class="box-container box-shadow"><div class="box-title">- Informations personnage -</div><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div>
<div class="pres-title">What's in my head</div>
<div class="tab"><button class="tablinks" onclick="openTab(event, 'pres-preapocalypse')">Pre Apo</button><button class="tablinks" onclick="openTab(event, 'pres-postapocalypse')">Post Apo</button><button class="tablinks" onclick="openTab(event, 'pres-today')">Today</button></div><div class="box-container box-shadow tabcontent" id="pres-preapocalypse"><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div><div class="box-container box-shadow tabcontent" id="pres-postapocalypse"><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div><div class="box-container box-shadow tabcontent" id="pres-today"><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div>

Le lien du forum, je préfère ne pas le donner étant donné que ce n'est pas mon forum de base (bien que j'ai accès à un compte admin fondateur).

EDIT : Pour que ce soit plus lisible, voici un codepen où on peut voir le code en action (et plus joli du coup). Vous remarquerez que les onglets fonctionnent très bien sur codepen. Ca ne marche cependant pas sur FA.
.1019

.1019
***

Messages : 111
Inscrit(e) le : 11/05/2013

Voir le profil de l'utilisateur
.1019 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par Adam_sfp le Lun 22 Avr 2019 - 14:24

Bonjour

Parfois des codes fonctionnant en externe peuvent effectivement ne pas fonctionner sur FA directement...
Vu le type de code essayez plutôt de faire votre fiche dans une page html de votre forum et insérer celle ci ensuite dans un post en iframe.

Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4461
Inscrit(e) le : 18/04/2008

Voir le profil de l'utilisateur http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par .1019 le Lun 22 Avr 2019 - 19:05

Bonjour,

Le probleme c'est que les utilisateurs du forum doivent pouvoir utiliser la fiche. Je ne peux pas la mettre en iframe. Je dois pouvoir comprendre pourquoi ca ne fonctionne pas sur FA.
.1019

.1019
***

Messages : 111
Inscrit(e) le : 11/05/2013

Voir le profil de l'utilisateur
.1019 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par Adam_sfp le Mar 23 Avr 2019 - 16:51

Bonjour

C'est pas toujours évident de faire fonctionner des choses dans les posts ;-)  surtout que effectivement cela ne fonctionne pas et on n'a pas d'erreurs dans la console ...0de mon coté quand je rencontre ce genre de soucis j'essaie un code équivalent.

j'ai par le passé utilisé https://jqueryui.com/tabs/
Qui fonctionne normalement dans un post...
Dans un codepen
https://codepen.io/anon/pen/YMOOMY

Si vous voulez tenter il faudrait essayer en mettant ceci dans le <head> du template overall_header
Code:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

Puis ceci dans gestion des codes java sur les sujets
Code:
$( function() {
    $( "#tabs" ).tabs();
  } );
Et le reste le html à insérer dans celui de votre fiche.

Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4461
Inscrit(e) le : 18/04/2008

Voir le profil de l'utilisateur http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par .1019 le Mar 23 Avr 2019 - 17:53

D'accord, je tente ça en rentrant et je vous dis si ça fonctionne. Merci.

Le jQuery n'est pas déjà inclus dans le head depuis quelques versions déjà ?
.1019

.1019
***

Messages : 111
Inscrit(e) le : 11/05/2013

Voir le profil de l'utilisateur
.1019 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par .1019 le Mer 24 Avr 2019 - 2:52

Je n'arrive pas à le faire fonctionner non plus. Vous réussissez, vous, sur ForumActif ?
.1019

.1019
***

Messages : 111
Inscrit(e) le : 11/05/2013

Voir le profil de l'utilisateur
.1019 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par .1019 le Ven 26 Avr 2019 - 11:33

UP.
.1019

.1019
***

Messages : 111
Inscrit(e) le : 11/05/2013

Voir le profil de l'utilisateur
.1019 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par Adam_sfp le Ven 26 Avr 2019 - 12:51

Bonjour

Je viens de tester cela fonctionne dans un post de mon coté...
bbb - Script d'onglets qui ne fonctionne pas sur ForumActif ? Test1110


Vous avez bien tout mis en place?
vous avez des erreurs dans la console?


*sinon un autre code moins lourd (et qui fonctionne également) sur ce codepen
https://codepen.io/OOOX/pen/vLzNBN
Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4461
Inscrit(e) le : 18/04/2008

Voir le profil de l'utilisateur http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par .1019 le Sam 27 Avr 2019 - 11:54

J'ai réessayé.

Perso, ça me donne ça :

bbb - Script d'onglets qui ne fonctionne pas sur ForumActif ? SOBx5fd

J'ai pourtant bel et bien inséré dans le head le nécessaire.

bbb - Script d'onglets qui ne fonctionne pas sur ForumActif ? YyXymwj

J'ai bien sûr validé le template.

Dans la console, sans surprise, une erreur : il ne reconnaît pas la fonction utilisée.

bbb - Script d'onglets qui ne fonctionne pas sur ForumActif ? BqKnfhS
.1019

.1019
***

Messages : 111
Inscrit(e) le : 11/05/2013

Voir le profil de l'utilisateur
.1019 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par Adam_sfp le Sam 27 Avr 2019 - 19:49

Bonsoir

le soucis c'est que cela peut provenir de plusieurs possibilités ...
vous avez bien validé le template ?
Sinon vous pouvez poster l'intégralité du html de votre fiche ? que je teste de mon coté avec votre code.


*edit

Essayez en mettant plutôt la librairie ui dans le template de cette façon

cette ligne
Code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
insérez la plutôt avec celle de même type comme
par exemple au dessus de celle ci
Code:
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />

pour le script celui ci
Code:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
pour être sur placez le juste avant </head>

Cdt.

Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4461
Inscrit(e) le : 18/04/2008

Voir le profil de l'utilisateur http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script d'onglets qui ne fonctionne pas sur ForumActif ?

Message par .1019 le Sam 27 Avr 2019 - 21:42

Ah !!

En effet ça fonctionne à présent ! j'ai juste déplacé les liens comme vous me l'avez dit. Je ne comprends vraiment pas pourquoi ça change quelque chose...

J'ai déplacé le script des fiches JS dans le head, plutôt, pour que ça puisse aussi s'afficher pendant les prévisualisations de message.

Merci à vous.
.1019

.1019
***

Messages : 111
Inscrit(e) le : 11/05/2013

Voir le profil de l'utilisateur
.1019 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum