| | Question sur le Jquery et Javascript |  |
|
|
 LASTBREATH. 
{ Membre }
 Messages : 92
 | Bonjour bonjour ! Alors voilà. En suivant un tuto sur internet – et en suivant bien tout ce qui est dit – je suis arrivée à un moment de l'explication où je ne comprenais pas... En fait, je ne sais pas où il faut placer le Jquery/javascript donner et ça ne fait pas l'effet que j'veux >.< j'ai essayé en faisant dans gestion des pages javascript etc, mais rien n'y fait, ça ne marche pas. Pareil en le mettant dans le templates overall_header après le ... donc je vous le demande, où est-ce que l'on doit le mettre ? XD Le tuto se trouve ici : Merci par avance de votre aide  | | |
|
| | |
Espeon 
Administrateur
 Messages : 1819
| Concrètement tu as une partie dédiée dans le Panneau d'Administration de FA qui te permet de ne pas polluer tes templates avec des scripts et de laisser FA charger le script au bon moment (notamment). Bref, place ton script Javascript (jQuery est supporté par FA nativement donc pas besoin de charger la librairie jQuery en plus) à cet endroit là : Panneau d'Administration > Modules > Gestion des codes javascriptSi ça ne fonctionne pas, alors ce n'est pas un problème de placement mais plus concrètement sur ce que tu as fait (ou le tuto ?). Pour cela, détaille-nous précisément ce que tu as modifié (avec les codes en question) sur ton forum  | | |
|
| | |
LASTBREATH.
{ Membre }
Messages : 92
| J'ai suivi le tuto xD j'ai mis la partie css dans ma feuille css, la partie avec les div (le html donc) dans ma page d'accueil et c'est pour placer – comme indiquer dans mon premier poste – le javascript/jquery que je n'y arrive pas xD j'ai essayé de le mettre dans mon module de gestion de page javascript ça n'a pas marché. Pareil en le mettant dans l'un de mes templates (qui ne tente rien n'a rien dit-on xD) et en mettant l'adresse du script dans ma description du forum ^^' | | |
|
| | |
Espeon
Administrateur
Messages : 1819
| Hmmm je pense avoir ma petite idée sur ce qui ne fonctionne pas. Pourrais-tu s'il te plaît me donner le code Javascript que tu as mis dans la gestion des pages (et qui ne fonctionnait pas) ? P.S (au cas où) : Je sais qu'il est dispo sur le tuto, mais ce n'est pas le tuto qui m'intéresse (puisque le tuto marche) mais ce que tu as mis toi | | |
|
| | |
LASTBREATH.
{ Membre }
Messages : 92
| bah... j'ai mis ce qu'elle a dit de mettre. Sauf si tu sous-entends que je ne l'ai pas fait et que j'attends qu'on me donne la réponse toute faite, ce qui n'est absolument pas le cas x)
voilà | | |
|
| | |
Doare 
{ Spécialiste }
Messages : 544
| Il faudrait placer tout ce code javascript dans cet appel : - Code:
-
$(function(){
// tout ton code
}); Pour t'expliquer, actuellement le javascript s'exécute avant que la page soit chargée : il essaye d'appeler des éléments qui n'existent pas encore. Quand la page a fini de charger, c'est trop tard, le javascript a déjà "fait son boulot". Placer ton code dans cet appel consiste à lui dire : "attends que la page soit chargée pour t'exécuter". Du coup, quand il se lance, les éléments sur lesquels il agit sont bien présents et ça fonctionne. | | |
|
| | |
Espeon
Administrateur
Messages : 1819
| Héhé non pas du tout, mais voici ce que je pense être la cause de ton problème : - Tu as bien suivi le tutoriel, modifié ton template, rajouté le CSS et configuré le JS en conséquence
- Mais quid de l'ordre chargement du script et des éléments en question
Bon je ne suis sûr de rien parce-qu'il me semble pourtant que FA fait attention à ce genre de problème, mais peut-être qu'actuellement le script est chargé avant que les éléments de ta page le soient. Il faudrait entourer ton script ainsi : - Code:
-
$(function() {
// Ton script ici
}); Mais je ne suis pas vraiment certain que le problème vienne de là si tu passe effectivement par la gestion des pages JS de FA. Puis-je avoir le lien vers ton forum pour constater de visu ce qui ne va pas ? EDIT : Doare, quelle synchronisation  | | |
|
| | |
LASTBREATH.
{ Membre }
Messages : 92
| J'ai fait ce que vous m'avez demandé, et ça ne marche toujours pas >< pour le rendu en visuel, en fait, c'est très simple, ça donne ça :
En fait, ça reste fixe. Les onglets ne défilent pas >< | | |
|
| | |
Espeon
Administrateur
Messages : 1819
| Donc le JS ne marche pas.
On peut avoir le lien de ton forum pour aller checker ça ? | | |
|
| | |
LASTBREATH.
{ Membre }
Messages : 92
| J'viens d'essayer en enlevant le reste de mon css pour voir si ça ne venait pas de là, mais non '-' le voilà :
| | |
|
| | |
Espeon
Administrateur
Messages : 1819
| Bizarre, je ne vois pas de script chargé en dehors des scripts standards et de ceux que tu as rajouté directement dans le HTML j'imagine. En tout cas, je n'ai pas vu le script compressé qu'inclu FA normalement, qui contient les codes JS justement. Questions : est-ce-que tu as activé l'inclusion des codes JS sur le forum ? est-ce-que tu as bien coché la case "index du forum" au moins (ou "toutes les pages" c'est encore mieux pour l'instant) ?Ca doit se trouver au niveau de la gestion des codes JS justement...  | | |
|
| | |
LASTBREATH.
{ Membre }
Messages : 92
| Ouip, je l'ai bien fait '-' tu veux mes identifiants pour accéder au reste du forum ? XD | | |
|
| | |
Espeon
Administrateur
Messages : 1819
| Non non, je suis vraiment sûr que le problème vient de là : le script n'est pas du tout chargé dans la page. Une vérification à faire, dis moi ce qu'il en est : - Rend toi dans ton template overall_header
- Cherche la ligne
<!-- BEGIN google_analytics_code -->
- Vérifie si le code suivant est bien présent au-dessus de cette ligne (du moins dans le template) :
{HOSTING_JS}
- S'il n'y est pas, rajoute le à l'emplacement que je t'ai indiqué (au dessus de la ligne commentée du point 2)
Mais si on va y arriver ^_^ | | |
|
| | |
LASTBREATH.
{ Membre }
Messages : 92
| Il n'y était pas, et je l'ai rajouté là où tu m'as dit de le mettre, mais ça ne fait toujours rien XD
| | |
|
| | |
Espeon
Administrateur
Messages : 1819
| Et pourtant, le problème vient de changer, cette fois ton script est enfin chargé dans la page. C'est donc un bond en avant Maintenant, il faut savoir que le script est compressé. C'est une bonne chose (gain de temps et optimisation du chargement pour l'utilisateur) mais ça ne pardonne aucune "erreur" de syntaxe. En mode "développé", dans une certaine limite, les navigateurs "corrigent" certaines erreurs comme des ; manquant en bout de code ou des choses du genre. Mais lorsque le script est compressé, s'il manque un seul ; (ou quelque chose du genre) alors ça plante complètement puisqu'il n'y a pas de retour à la ligne : le navigateur ne peut pas se dire "ah tiens là il manque apparement un truc, je vais le rajouter plutôt que de planter". Après analyse de ton script, il s'avère qu'on peut incriminer une mauvaise pratique déjà, car on trouve : - Code:
-
if(page == cnt_pages)
$this.addClass('disabled'); Au lieu de : - Code:
-
if(page == cnt_pages) {
$this.addClass('disabled');
} L'absence des accolades fonctionne dans le cas où il n'y a qu'une seule instruction executée après le if. Mais quand le script est compressé, ça donne : - Code:
-
if(page == cnt_pages)$this.addClass('disabled'); Sans les accolades { } le navigateur ne vois pas les instructions à exécuter et ça plante. Essaie donc avec cette version corrigée pour voir : - Code:
-
//caching
//next and prev buttons
var $cn_next = $('#cn_next');
var $cn_prev = $('#cn_prev');
//wrapper of the left items
var $cn_list = $('#cn_list');
var $pages = $cn_list.find('.cn_page');
//how many pages
var cnt_pages = $pages.length;
//the default page is the first one
var page = 1;
//list of news (left items)
var $items = $cn_list.find('.cn_item');
//the current item being viewed (right side)
var $cn_preview = $('#cn_preview');
//index of the item being viewed.
//the default is the first one
var current = 1;
$items.each(function(i){
var $item = $(this);
$item.data('idx',i+1);
$item.bind('click',function(){
var $this = $(this);
$cn_list.find('.selected').removeClass('selected');
$this.addClass('selected');
var idx = $(this).data('idx');
var $current = $cn_preview.find('.cn_content:nth-child('+current+')');
var $next = $cn_preview.find('.cn_content:nth-child('+idx+')');
if(idx > current){
$current.stop()
.animate({
'top':'-300px'
},600,'easeOutBack',function(){
$(this).css({'top':'310px'});
});
$next.css({
'top':'310px'
}).stop()
.animate({
'top':'5px'
},600,'easeOutBack');
}
else if(idx < current){
$current.stop()
.animate({
'top':'310px'
},600,'easeOutBack',function(){
$(this).css({'top':'310px'});
});
$next.css({
'top':'-300px'
}).stop()
.animate({
'top':'5px'
},600,'easeOutBack');
}
current = idx;
});
});
$cn_next.bind('click',function(e){
var $this = $(this);
$cn_prev.removeClass('disabled');
++page;
if(page == cnt_pages) {
$this.addClass('disabled');
}
if(page > cnt_pages){
page = cnt_pages;
return;
}
$pages.hide();
$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
e.preventDefault();
});
$cn_prev.bind('click',function(e){
var $this = $(this);
$cn_next.removeClass('disabled');
--page;
if(page == 1) {
$this.addClass('disabled');
}
if(page < 1){
page = 1;
return;
}
$pages.hide();
$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
e.preventDefault();
}); Au passage c'est donc une mauvaise pratique de leur part. La notion peut séduire les développeurs fainéants, mais le Javascript n'est pas codé pour se passer d'accolades par essence car l'interpréteur ne fonctionne pas en se fiant simplement à l'indentation comme d'autres langages de programmation. Ainsi, si ce genre de chose fonctionne en mode développé, ça plante complètement quand c'est compressé (or le mode compressé et le mode de référence quand le script est mis en production, question d'optimisation). | | |
|
| | |
LASTBREATH.
{ Membre }
Messages : 92
| Je viens de changer, et ça ne marche toujours pas ><
| | |
|
| | |
Espeon
Administrateur
Messages : 1819
| Je viens de trouver 6 cas où il n'y avait pas de ; en fin de ligne (idem, en mode développé ça passe car il n'y a qu'un élément, mais en mode compressé...). Essaie à nouveau avec : - Code:
-
//caching
//next and prev buttons
var $cn_next = $('#cn_next');
var $cn_prev = $('#cn_prev');
//wrapper of the left items
var $cn_list = $('#cn_list');
var $pages = $cn_list.find('.cn_page');
//how many pages
var cnt_pages = $pages.length;
//the default page is the first one
var page = 1;
//list of news (left items)
var $items = $cn_list.find('.cn_item');
//the current item being viewed (right side)
var $cn_preview = $('#cn_preview');
//index of the item being viewed.
//the default is the first one
var current = 1;
$items.each(function(i){
var $item = $(this);
$item.data('idx',i+1);
$item.bind('click',function(){
var $this = $(this);
$cn_list.find('.selected').removeClass('selected');
$this.addClass('selected');
var idx = $(this).data('idx');
var $current = $cn_preview.find('.cn_content:nth-child('+current+')');
var $next = $cn_preview.find('.cn_content:nth-child('+idx+')');
if(idx > current){
$current.stop()
.animate({
'top':'-300px';
},600,'easeOutBack',function(){
$(this).css({'top':'310px'});
});
$next.css({
'top':'310px';
}).stop()
.animate({
'top':'5px';
},600,'easeOutBack');
}
else if(idx < current){
$current.stop()
.animate({
'top':'310px';
},600,'easeOutBack',function(){
$(this).css({'top':'310px'});
});
$next.css({
'top':'-300px';
}).stop()
.animate({
'top':'5px';
},600,'easeOutBack');
}
current = idx;
});
});
$cn_next.bind('click',function(e){
var $this = $(this);
$cn_prev.removeClass('disabled');
++page;
if(page == cnt_pages) {
$this.addClass('disabled');
}
if(page > cnt_pages){
page = cnt_pages;
return;
}
$pages.hide();
$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
e.preventDefault();
});
$cn_prev.bind('click',function(e){
var $this = $(this);
$cn_next.removeClass('disabled');
--page;
if(page == 1) {
$this.addClass('disabled');
}
if(page < 1){
page = 1;
return;
}
$pages.hide();
$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
e.preventDefault();
}); (j'espère que j'en ai pas raté...) | | |
|
| | |
LASTBREATH.
{ Membre }
Messages : 92
| Et bien... toujours pas >< | | |
|
| | |
Espeon
Administrateur
Messages : 1819
| Hmmm oui, je me suis fourvoyé en parlant des ; ça ne change rien.
Pas moyen de checker précisément d'où vient l'erreur où je suis, il me faudrait firebug ou chrome pour voir précisément où ça plante.
Si un codeur peut checker ça, Doare ? | | |
|
| | |
LASTBREATH.
{ Membre }
Messages : 92
| Au pire Espeon, ça n'est pas urgent xD fais ça quand tu pourras, ne t'en fais pas pour moi  | | |
|
| | |
Doare
{ Spécialiste }
Messages : 544
| Enfin rentrée, je vais jeter un oeil en testant de mon côté. J'éditerai... |
Dernière édition par Doare le Jeu 18 Oct 2012, 15:31, édité 2 fois | |
|
| | |
LASTBREATH.
{ Membre }
Messages : 92
| Merci Doare  | | |
|
| | |
Doare
{ Spécialiste }
Messages : 544
| J'avais édité mais comme tu as posté, du coup... ^^ Premier point, cette fois-ci, on retrouve bien ton fichier javascript dans le code de ton forum. C'est une bonne nouvelle, on est sûr que le javascript est activé ! Deuxième point, cela m'a permis de voir que ton code ne se trouve pas dans un appel ce type : - Code:
-
$(function(){
// ton code
}); On t'a déjà expliqué pourquoi il fallait que tu places le code là-dedans, je te laisse donc t'en occuper. Ca ne marchera pas sans. Troisième point, il manque un autre javascript pour que cela fonctionne. Dans les fichiers téléchargés, il s'agit du fichier jquery.easing.1.3.js. Il te faut créer un nouveau javascript dans ton panneau d'administration, et collez tout le code qui s'y trouve. | | |
|
| | |
LASTBREATH.
{ Membre }
Messages : 92
| - Doare a écrit:
- Troisième point, il manque un autre javascript pour que cela fonctionne. Dans les fichiers téléchargés, il s'agit du fichier jquery.easing.1.3.js. Il te faut créer un nouveau javascript dans ton panneau d'administration, et collez tout le code qui s'y trouve.
Je n'ai pas compris cette partie et surtout, où je peux trouver le dit fichier xD EDIT ; je l'ai trouvé et j'ai fait ce que tu as demandé, mais ça ne change rien, en plus des modifications que tu m'as suggéré de faire ^^' | | |
|
| | |
Doare
{ Spécialiste }
Messages : 544
| Le $(function() { }); est inutile pour le second code. Dans les deux cas (en considérant que tu gardes $(function() { au début du 2e, si tu l'enlèves ce n'est pas la peine), il manque ceci à la fin : - Code:
-
}); | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Question sur le Jquery et Javascript | |
|
