Titre: (RESOLU) Script qui fait planter un menu déroulant
Posté par: djbabs le le 28-05-2012 a 12:13:58
Salut à toutes et à tous,
Ne trouvant pas réponse à ma question tout seul, je me décide à poster. Par contre je ne suis pas forcément sûr d'être dans la bonne catégorie ? ...
Je souhaite intégrer un slideshow tout bête (fonctionnant comme un bon vieux gif mais avec des fondus) en guise de header sur mon site.
La solution me semblant la plus simple: quelques lignes de CSS, d'autres de HTML, un petit js et les lignes qui l'accompagnent.
En gros ça fonctionne MAIS ça me fait planter mon menu déroulant ! ??? :-\ :'(
A savoir qu'il ne s'affiche carrément pas. Il faut passer sur une page autre que index (et qui n'a pas le script) pour pouvoir le voir.
La page: lamaizon.fr
une page sans le script: http://www.lamaizon.fr/happy-hour.html
un menu qu'est censé être déroulant: carte ou agenda
A noter que j'ai viré la ligne de HTML allant chercher le js, justement pour éviter le bug en attendant de savoir.
J'ai essayé de bien qualifier le type de script dans les balises (pas présent ci dessous), d'avoir le js hébergé chez moi et surtout de placer le script ailleurs dans la page, mais il ne fonctionne pas entre les balises head par exemple.
A noter que le site est créé via weebly.
Une idée ?
Un pépito à celui ou celle qui trouve ! Merci d'avance.
ci dessous les codes en question:
CSS:
.fadein {
position: relative;
height: 325px;
width: 970px;
z-index: 1;
margin: 0px 0px 0px 0px;
border-top: 6px solid #AB1322;
border-radius: 25px 0px 0px 0px;
-webkit-border-radius: 25px 0px 0px 0px;
-moz-border-radius: 25px 0px 0px 0px;
-ms-border-radius: 25px 0px 0px 0px;
-o-border-radius: 25px 0px 0px 0px;
}
.fadein img {
position: absolute;
z-index: 1;
border-radius: 20px 0px 0px 0px;
-webkit-border-radius: 20px 0px 0px 0px;
-moz-border-radius: 20px 0px 0px 0px;
-ms-border-radius: 20px 0px 0px 0px;
-o-border-radius: 20px 0px 0px 0px;
}
HTML:
<div style="width: 970px height: 325px;" class="fadein">
<img style="width: 970px; height: 325px;" src="/files/theme/header1.jpg" alt="header1">
<img style="width: 970px; height: 325px;" src="/files/theme/header2.jpg" alt="header2">
<img style="width: 970px; height: 325px;" src="/files/theme/header3.jpg" alt="header3">
</div>
JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
==> cette ligne n'est pas sur mon site, justement à cause du bug
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script> |
Titre: Re:Script qui fait planter un menu déroulant
Posté par: Franck K le le 28-05-2012 a 13:01:42
Salut djbabs.
Après avoir jeté un oeil à ton site je m'aperçois que tu utilises la lib prototype. Cette lib utilise le même namespace (à savoir $) ce qui provoque un conflit.
Ce que je te conseille c'est de ne pas utiliser plusieurs lib js tant que tu peux. En gros l'idée serait de garder jQuery et de ne pas utiliser prototype.
Si faire ce changement t'embête, voila une 2nd solution : tu peux ajouter une ligne à jQuery pour éviter le conflit.
Appelle jquery avant prototype, et juste après l'appel de jQuery, ajoute cette ligne : jQuery.noConflict();
Cela changera le namespace de jquery en "jQuery" (au lieu de $). Il te faudra donc changer le $ du code qui suit par "jQuery".
L'inconvénient est que tu ne pourras pas facilement ajouter de plugins jQuery qui ne sont pas en noConlifct... C'est pourquoi la première solution (virer Prototype) est ce que je te conseille.
Bonne journée. |
Titre: Re:Script qui fait planter un menu déroulant
Posté par: djbabs le le 28-05-2012 a 15:31:26
Salut Franck,
Tout d'abord merci pour ta rapidité de réponse, c'est très appréciable d'avoir un forum avec des membres actifs ...
Le soucis majeur pour l'une ou l'autre des modifs est que j'utilise weebly (je crois l'avoir dis ? Peu importe), éditeur en ligne. Il laisse pas mal de possibilité de modification MAIS, dans l'index HTML, il y a des éléments auxquels je n'ai pas accès. C'est comme si le contenu de page auquel j'ai accès était encapsulé dans un autre pour donner le final qui génère la page. Je ne vois donc pas les autres scripts pouvant utiliser Prototype.
==> Normalement je suis donc bloqué ?
Si non:
- quand tu dis "appeler jquery", c'est le fait de coller le code script dans la page HTML ? Dans ce cas le fait de "l’appeler" avant consiste à coller le script jquery avant Prototype ?
- Du coup la ligne à rajouter se rajoute dans le code js de la page HTML et non dans le fichier JS ? ou le contraire, ou les deux ?
- Changer le namespace ? Changer tous les $ dans le code js de la page HTML ou dans le fichier js ou les deux ?
==> Je suis assez néophyte dans le domaine, je comprends les bases mais le code n'est pas de moi, je sais l'intégrer (d'ailleurs pas forcément bien, car normalement il faut intégrer le code entre les balises head ? En l'occurrence si je fais ça, le script ne fonctionne pas) mais difficilement en changer les variable et bien en comprendre les éléments qui le compose.
Sinon l'alternative que je vois est de créer un slideshow avec un éditeur en ligne (encore faut il en trouver un sans pub), mais je souhaitais vraiment le faire par moi même ...
Merci de ton aide. |
Titre: Re:Script qui fait planter un menu déroulant
Posté par: Franck K le le 28-05-2012 a 16:10:54
Faire faire le slideshow par un éditeur en ligne ne résoudra pas le problème si l'éditeur en question génère un slideshow jQuery sans noConlict.
Dans ton cas tu ne peux pas enlever prototype mais tu peux toujours mettre en place le noConlict de jQuery.
Remplace le code
Code:
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 4000);
});
|
|
par :
Code:
jQuery.noConflict();
jQuery(function(){
jQuery('.fadein img:gt(0)').hide();
setInterval(function(){jQuery('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 4000);
});
|
|
Les modifications que j'ai effectuées sont :
- ajouter la ligne " jQuery.noConflict();"
- remplacer les $ par jQuery
Aussi, remplace
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
par
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
J'ai remplacé la version 1 par la 1.7.2
Dit moi si ça fonctionne ? |
Titre: Re:Script qui fait planter un menu déroulant
Posté par: djbabs le le 28-05-2012 a 16:57:03
Une nuit à chercher pour si peu ... Ça fonctionne ! :)
Le web est fantastique, j'en apprends tous les jours, un grand merci à toi Franck ! |
Titre: Re:Script qui fait planter un menu déroulant
Posté par: Franck K le le 28-05-2012 a 17:04:50
Titre: Re:(RESOLU) Script qui fait planter un menu déroulant
Posté par: djbabs le le 28-05-2012 a 22:44:02
Une question tout de même (en espérant que tu ais comme moi un mail à chaque réponse):
Quelle sont les bases pour reconnaître d'emblée que deux codes vont rentrer en conflit ?
A priori déjà le fait qu'ils aient la même balise d'appel ?
Merci encore à toi. |
Titre: Re:(RESOLU) Script qui fait planter un menu déroulant
Posté par: Franck K le le 28-05-2012 a 23:40:51
Non je ne reçois pas les mails de notification mais je jette un oeil régulièrement à ce forum.
Sinon pour débuguer du javascript j'avais l'habitude d'utiliser firefox avec firebug. Je suis passé à chrome car je préfère leur console.
Bref, tu peux utiliser l'un ou l'autre mais prenons Chrome en exemple :
Tu fais clique droit sur la page et "inspect element". Une console apparait. tout en bas de celle ci, à droite, des messages d'erreurs apparaissent en rouge si il y a des problème JS. Il y a beaucoup plus de fonctionnalités intéressantes mais je te donne juste ce qui t'intéresse dans ce cas présent. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|