Script d'onglets qui ne fonctionne pas sur ForumActif ?

par .1019 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:

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.

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

Bonjour,

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

par .1019 Lun 22 Avr 2019 - 10:55

Bonjour,

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

par *Splash* 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

par .1019 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.

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

.1019 a écrit:Lesquels ?

Dans ton post initial il n'y a qu'un seul script

par .1019 Lun 22 Avr 2019 - 13:22

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

par Adam_sfp 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.

par .1019 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:

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.

par Adam_sfp 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.

par .1019 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.

par Adam_sfp 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.

par .1019 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à ?

par .1019 Mer 24 Avr 2019 - 2:52

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

par .1019 Ven 26 Avr 2019 - 11:33

par Adam_sfp Ven 26 Avr 2019 - 12:51

Bonjour

Je viens de tester cela fonctionne dans un post de mon coté...

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.

par .1019 Sam 27 Avr 2019 - 11:54

J'ai réessayé.

Perso, ça me donne ça :

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

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

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.

Script d'onglets qui ne fonctionne pas sur ForumActif ? BqKnfhS

Script d'onglets qui ne fonctionne pas sur ForumActif ? BqKnfhS

par Adam_sfp 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.

par .1019 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.

Script d'onglets qui ne fonctionne pas sur ForumActif ?