Javascript qui ne fonctionne pas dans un diaporama intégré à la page d'accueil

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

Résolu Javascript qui ne fonctionne pas dans un diaporama intégré à la page d'accueil

Message par ValkyrjaoftheNorth le Jeu 1 Jan 2015 - 2:30

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Internet Explorer
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Le code n'a jamais fonctionné.
Lien du forum : http://wild-fantasy.forumactif.org

Description du problème

Bonjour,

Je rencontre quelques difficultés pour mettre en place un diaporama sur la page d'accueil de mon forum (http://wild-fantasy.forumactif.org). J'utilise un tutoriel qui se présente en trois parties : une HTML, une CSS et une Javascript.

Les parties HTML et le CSS fonctionnent parfaitement, mais pour une raison que j'ignore, le Javascript refuse de s'appliquer. La gestion des codes Javascript est bien activée et j'ai placé <script src=http://wild-fantasy.forumactif.org/11330.js></script> dans la description de mon forum.

Voici les trois codes :

Code:
<div align="center">
<div align="center" class="contener_slideshow">
<div class="contener_dotslide">
<div class="dotslid" id="dotslid0" iddotslid='0'>&nbsp;</div>
<div class="dotslid" id="dotslid1" iddotslid='1'>&nbsp;</div>
<div class="dotslid" id="dotslid2" iddotslid='2'>&nbsp;</div>
</div>
<div class="contener_slide" rangactuel='0'>
<div class="slid_1">
<img src="http://img.myzupics.com/ac/i3z.png" style="margin-left: -10px;" />
</div>
<div class="slid_2">
<img src="http://img.myzupics.com/ac/i3z.png" style="margin-left: -10px;" />
</div>
<div class="slid_3">
<img src="http://img.myzupics.com/ac/i3z.png" style="margin-left: -10px;" />
</div>
</div>
</div>
</div>


Code:
$(document).ready(function(){
var slideshowexecution = function() {
$('.dotslid').css({'background-color':'#f8b334'});
var rangactuel=$('.contener_slide').attr('rangactuel');
if(rangactuel==2)
{
$('.contener_slide').attr('rangactuel','0');
rangactuel=0;
var decallage='0px';
}
else
{
rangactuel=parseInt(rangactuel)+1;
$('.contener_slide').attr('rangactuel',rangactuel);
var decallage='-=610px';
}
$('#dotslid'+rangactuel).css({'background-color':'#cb2025'});
$( ".contener_slide" ).animate({
left: decallage
}, 400, function() {
// Animation complete.
});
};
var start_slideshow = null;
start_slideshow = function(){
slideshowexecution();
}, 4000);
$(".dotslid").click(function()
{
$('.dotslid').css({'background-color':'#f8b334'});
$(this).css({'background-color':'#cb2025'});
clearInterval(start_slideshow);
var rangimg=$(this).attr('iddotslid');
$('.contener_slide').attr('rangactuel',rangimg);
rangimg=parseInt(rangimg*610);
$( ".contener_slide" ).animate({
left: '-'+rangimg+'px'
}, 500, function() {
// Animation complete.
});
start_slideshow = function(){slideshowexecution();}, 4000);
});
});

Code:
.dotslid {
  border-radius:10px;
  background-color: gray;
  box-shadow: 1px 1px 8px #333333;
  height: 10px;
  width: 10px;
  display: inline-block;
  cursor:pointer;
}

#dotslid0 {
  background-color: #7A9DBF;
}

.contener_dotslide {
  width: 100%;
  position: absolute;
  z-index: 999;
  bottom: 20px;
}

.contener_slideshow {
  width:230px;
  height:250px;
  overflow: hidden;
  margin-top: 10px;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px black;
}

.slid_1, .slid_2, .slid_3 {
  position: absolute;
  width:230px;
  height:500px;
  margin:0 5px;
  background-color:#00a096;
}

.slid_1 {
  left: 0;
}

.slid_2 {
  left: 230px;
}

.slid_3 {
  left: 460px;
}

.contener_slide {
  width: 1830px;
  height: 250px;
  left:0px;
  position: absolute;
  font-size:24px;
  color:#ffffff;
}

Je précise que je maîtrise assez bien le CSS et l'HTML mais que le Javascript reste obscur pour moi ^^

Merci d'avance !


Dernière édition par ValkyrjaoftheNorth le Jeu 1 Jan 2015 - 18:46, édité 1 fois

ValkyrjaoftheNorth
Nouveau membre

Messages : 4
Inscrit(e) le : 01/01/2015

http://wild-fantasy.forumactif.org
ValkyrjaoftheNorth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript qui ne fonctionne pas dans un diaporama intégré à la page d'accueil

Message par AenigmA le Jeu 1 Jan 2015 - 7:55

Bonjour,

Ton script étant dans les JS et coché sur l'accueil, il n'est nul besoin de le mettre dans description, ça fait double emploi (si j'ai bien compris).

Bonne Année à toi

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript qui ne fonctionne pas dans un diaporama intégré à la page d'accueil

Message par ValkyrjaoftheNorth le Jeu 1 Jan 2015 - 14:11

Bonjour, merci d'avoir répondu !

J'ai enlevé le JS de la description, mais le diaporama ne fonctionne toujours pas :/

Bonne année à vous !

ValkyrjaoftheNorth
Nouveau membre

Messages : 4
Inscrit(e) le : 01/01/2015

http://wild-fantasy.forumactif.org
ValkyrjaoftheNorth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript qui ne fonctionne pas dans un diaporama intégré à la page d'accueil

Message par AenigmA le Jeu 1 Jan 2015 - 17:23

Bonjour,
Effectivement, j'ai essayé sur une page html et il ne fonctionne pas. Il doit donc manquer quelque chose.
Vérifie le tuto où tu l'as trouvé

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript qui ne fonctionne pas dans un diaporama intégré à la page d'accueil

Message par ValkyrjaoftheNorth le Jeu 1 Jan 2015 - 17:36

Bon impossible d'envoyer un lien du tuto, j'ai vérifié que j'avais bien c/c le code mais ça a l'air d'être le cas :/

Ils disent juste à la fin "• jQuery Library : http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js", est-ce que ça pourrait être en lien ?

ValkyrjaoftheNorth
Nouveau membre

Messages : 4
Inscrit(e) le : 01/01/2015

http://wild-fantasy.forumactif.org
ValkyrjaoftheNorth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript qui ne fonctionne pas dans un diaporama intégré à la page d'accueil

Message par AenigmA le Jeu 1 Jan 2015 - 18:13

CC, donne moi que la fin du lien, je sais que c'est never

Sinon tu as celui ci sans js ICI

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript qui ne fonctionne pas dans un diaporama intégré à la page d'accueil

Message par Karlozi le Jeu 1 Jan 2015 - 18:29

Bonjour,

Rajoute le lien que tu as donné plus haut dans une balise Script et met ta ligne de code après la balise <title> de ton template overall_header. N'oublie pas de conserver le Javascript que tu as déjà Wink:

Voici la ligne de code,
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>

Cordialement,
Karlozi

Karlozi
**

Messages : 67
Inscrit(e) le : 29/12/2014

http://monforumdeaaz.forum-canada.net/
Karlozi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript qui ne fonctionne pas dans un diaporama intégré à la page d'accueil

Message par ValkyrjaoftheNorth le Jeu 1 Jan 2015 - 18:46

Merci pour vos deux réponses ! J'ai testé le template overall_header sans plus de succès :/

Néanmoins celui sans JS semble fonctionner ! J'avais trouvé le tuto sur un autre site qui n'avait rien à voir ^^

Merci énormément, je passe le sujet en résolu !

ValkyrjaoftheNorth
Nouveau membre

Messages : 4
Inscrit(e) le : 01/01/2015

http://wild-fantasy.forumactif.org
ValkyrjaoftheNorth 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