CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Problème de scrollbar personnalisée (tinyscrollbar) [RESOLU] | |
| Daewyn
{ Membre }
Messages : 11
| Bonjour, bonsoir, et merci d'avance à ceux qui voudrons bien m'aider.
Je suis en train de travailler le codage des catégories sur un forum, et pour des raisons d'esthétique, j'ai cherché à mettre des scrollbar un peu plus... personalisées que celles de base. Je me suis donc servie des scripts de cette page : http://baijs.nl/tinyscrollbar/ (trouvée grâce à CSS ACtif d'ailleurs), mais, problème... autant ça marche impec dans les post, autant ça ne fonctionne tout bonnement pas sur mes catégories.
J'ai bien vérifié au niveau des javascript, du code à mettre dans le template, mais non rien à faire - d'ailleurs vu que cela marche dans les post le js doit être bon. Mes recherches sur le net s'étant avérées également infructueuses, je me tourne vers vous en espérant que vous pourrez m'éclairer xx
L'adresse du forum en question : http://chroniques-fiore.forumactif.fr/ (deuxième onglet des catégories) et le post où le code marche : http://chroniques-fiore.forumactif.fr/t30-test.
Merci d'avance de votre aide xx
EDIT : rectification... ça marche dans les posts, la première fois uniquement. Je suppose que ça doit être comme les script d'onglets qui n'aime pas être réutilisés mais ça n'aide pas mes affaires >< |
Dernière édition par Daewyn le Mer 10 Oct 2012, 15:15, édité 2 fois | |
| | | 'Christa
Lostmindy
Messages : 2856
| Plop !
Le problème vient du fait que tu appliques ta fonction à un identifiant (attribut id en HTML, symbole # en CSS et jquery), qui doit être UNIQUE dans une page. Il faudrait plutôt essayer de l'attribuer à une classe (attribut class en HTML, symbole . (point) en CSS et JQuery)
Le script est initialisé par la commande $('#scrollbar1').tinyscrollbar(); Tu vois très clairement qu'il cible l'identifiant #scrollbar1, donc tout élément de la forme <div id="scrollbar1">...</div>
Essaie donc d'utiliser la même classe sur tous tes blocs déroulants, genre .deroul et dans l'initialisation tu remplaces #scrollbar1 par .deroul . | | |
| | | Daewyn
{ Membre }
Messages : 11
| Alors, au niveau des posts effectivement ça marche, je peux en mettre plusieurs et ils fonctionnent tous. Par contre au niveau des catégories, aucun changement... le code est encore ignoré >< | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Ben il me semble que dans les catégories tu n'as pas mis la classe scrolling '_' (n'oublie pas que tu peux associer plusieurs classes au même attribut class , cf ce tutoriel) | | |
| | | Daewyn
{ Membre }
Messages : 11
| En fait je l'ai mis, mais pas dans les templates, en tant que description d'une catégorie (et ça ne marche pas). Est-ce que je dois obligatoirement le mettre dans les templates pour que ça fonctionne ? °° | | |
| | | Doare
{ Spécialiste }
Messages : 544
| Je ne comprends pas bien. Peux-tu nous donner un exemple de ce que tu mets exactement dans la description d'un forum, dans le panneau d'administration ? | | |
| | | Daewyn
{ Membre }
Messages : 11
| Donc, ce que j'ai mis (dans la description du forum - PA > Général > Catégories et forum > modifier un forum) : - Code:
-
<DIV class="scrolling"><div class="scrollbar"><div class="track"><div class="thumb"></div></div></div><div class="viewport"><div class="overview">Vestige datant d'avant le Grand Cataclysme, le palais de la Prima Donna est une merveille d'architecture et de luxe, entiérement taillée dans le marbre blanc. C'est là que vit la famille royale, mais aussi les courtisans et favoris de la Reine, et bien sûr la pléthore de serviteurs chargés de s'occuper de tout ce beau monde. N'espérez donc pas y pénétrer si vous n'avez pas été expréssément invités : la Prima Donna ne plaisante pas avec la sécurité, le moindre accès étant gardé par ses fidèles Sentinelles. Bien sûr, cela ne concerne que les accès connus du public...</div></div></DIV> Quand je met ce passage dans la description du forum donc, cela ne marche pas ; quand je le met dans un post, cela marche (sachant que les deux js sont cochés sur "toutes les pages"). Je n'ai pas encore essayé d'intégrer le scrolling directement dans les templates (en entourant la variable "{catrow.forumrow.FORUM_DESC}") - d'ailleurs je ne sais même pas si c'est possible - mais si c'est la seule façon de faire marcher ce code dans la description de mes catégories, je le ferais xx" (et désolée si je ne suis pas claire ><). | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Le fait est que lorsque je regarde sur le forum dont tu nous as donné le lien, ce n'est pas du tout le code qui est utilisé dans la description '_' Moi je vois ça : - Code:
-
<div style="background-image: url(http://i45.tinypic.com/id97uw.png);" class="F1"><div class="F2">Vestige datant d'avant le Grand Cataclysme, le palais de la Prima Donna est une merveille d'architecture et de luxe, entiérement taillée dans le marbre blanc. C'est là que vit la famille royale, mais aussi les courtisans et favoris de la Reine, et bien sûr la pléthore de serviteurs chargés de s'occuper de tout ce beau monde. N'espérez donc pas y pénétrer si vous n'avez pas été expréssément invités : la Prima Donna ne plaisante pas avec la sécurité, le moindre accès étant gardé par ses fidèles Sentinelles. Bien sûr, cela ne concerne que les accès connus du public...</div></div> Ce qui n'a rien à voir @o@ | | |
| | | Doare
{ Spécialiste }
Messages : 544
| Yey, je voyais ça moi aussi, mais la bonne est la description d'en-dessous. Le problème vient, je pense, du Javascript, et plus précisément de la méthode que tu as employée pour appliquer la fonction .tinyscrollbar(); . Tu l'as ajoutée dans le template, c'est cela ? Le problème, c'est que le code donné dans le tutoriel utilise ceci : - Code:
-
$(document).ready(function() { // javascript enclenché }); Et que cette manière d'enclencher du javascript après le chargement de la page ne peut être utilisée qu'une seule fois. Or elle est déjà employée. Plusieurs choix s'offrent à toi : 1/ Soit tu édites le code collé dans ton template pour ceci : - Code:
-
$(function() { // javascript enclenché }); 2/ Soit, toujours dans le template, tu cherches la première déclaration $(document).ready() et tu colles l'appel de la fonction dedans. 3/ Soit, et je te le conseille, tu vas plutôt coller ton Javascript dans une de tes feuilles Javascript déjà existantes, dans ton panneau d'administration... - Code:
-
$('.scrolling').tinyscrollbar(); En veillant bien à le coller à l'intérieur de ceci (qui existe dans un de tes JS) : - Code:
-
$(function() { // javascript enclenché }); | | |
| | | Daewyn
{ Membre }
Messages : 11
| Alors. > la première méthode ne change rien. Ca marche toujours dans les post mais pas dans la description du forum. > idem pour la deuxième méthode (notez que je m'y prend peut-être mal, quand tu dis "javascript enclenché", c'est bien "$('.scrolling').tinyscrollbar();" que je dois mettre à la place ? ou le double slash avant compte aussi ?) > pour ce qui est de la troisième méthode. Je vais peut être paraitre stupide mais... je ne trouve pas l'endroit où je dois le coller dans le js @_@ (et comme je n'ai pas envie de faire un massacre vu mon niveau sur la question... hum.) Déjà pour être sûre (sait-on jamais), c'est bien dans un des js du tutoriel ? ^^"
Vraiment désolée >< | | |
| | | Doare
{ Spécialiste }
Messages : 544
| Dans ton panneau d'administration, va dans l'onglet Modules, descends tout en bas pour voir la partie HTML & Javascript du menu, et clique sur Gestion des codes Javascript. C'est ici que l'on gère les codes Javascript d'un forum. Dans ton cas, cela permet en l'occurrence d'éviter de toucher aux templates lorsqu'il s'agit de Javascript. Tu y as deux fichiers, à ce que j'ai pu voir. Dans l'un deux, les fonctions sont déclarées là-dedans : - Code:
-
$(function() { // tout le javascript }); Je te dis d'y ajouter ça : - Code:
-
$('.scrolling').tinyscrollbar(); Et non, sans les //. Ils représentent un commentaire. En passant, le fait de mettre le bloc de div dans la description n'est pas la source du problème. Ca ne pose aucun souci chez moi. Peux-tu nous expliquer comment et où tu as ajouté les deux codes nécessaires au fonctionnement et au déclenchement de la fonction ? Si je parle chinois, n'hésite pas à le dire... | | |
| | | Daewyn
{ Membre }
Messages : 11
| Problème résolu. J'ai testé sur un autre forum et ça marchait parfaitement, du coup j'ai revu mon template overall_header en déplaçant le bout de code que j'y avais inséré ailleurs et en m'assurant que ce soit le seul à utiliser "$(document).ready(function()"... bref sans rentrer dans les détails, mais ça a tout réglé. Je ne vais donc pas vous embêter plus longtemps @_@
Merci beaucoup de m'avoir accordé du temps, ça m'a permis d'apprendre quelques petites choses sur le javascript que je ne maitrise pas du tout... ce à quoi je compte bien remédier èé *growa* Vous pouvez classer le sujet ^^ | | |
| | | Psycho
Psychopathe
Messages : 3407
| Yop ! Puisque c'est résolu je classe ! Merci de nous avoir prévenu | | |
| | | Contenu sponsorisé
| | | | | Problème de scrollbar personnalisée (tinyscrollbar) [RESOLU] | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|