Je n'arrive pas à faire fonctionner un code (avec du js)

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

Résolu Je n'arrive pas à faire fonctionner un code (avec du js)

Message par Britney le Lun 9 Mar 2015 - 23:50

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://forum-test-asylum.forumactif.org/

Description du problème

Bonjour,

Je cherchais un tutoriel et après de nombreuses recherches je suis tombée sur un lien, en libre service, qui correspond exactement à ce que je veux. Sauf que ça fonctionne que sur l'éditeur de code source (voir le lien en bas) tandis que sur mon logiciel (notepad en l'occurrence) ça ne marche pas. Je n'ai pas encore testé sur mon forum car j'aimerais d'une part le comprendre mais surtout le modifier et en l'état actuel ce n'est pas possible car comme je l'ai dit ça ne fonctionne pas.

Voici le lien du code :

http://jsfiddle.net/Matt_Coughlin/MXv4f/7/

Je ne comprends pas d'où peut venir l'erreur, même en trifouillant le code.

Si l'un d'entre vous peut m'aiguiller ça m'aiderait beaucoup car ça fait bien 1h que je cherche. :/


Dernière édition par Britney le Mar 10 Mar 2015 - 2:02, édité 1 fois

Britney
Nouveau membre

Messages : 20
Inscrit(e) le : 03/08/2012

http://forum-test-asylum.forumactif.org/
Britney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Je n'arrive pas à faire fonctionner un code (avec du js)

Message par [Nihil] le Mar 10 Mar 2015 - 0:59

Coucou Britney Smile

Petite précision, ce n'est pas indiqué directement dans le jsFiddle (il faut regarder dans les options), mais as tu pensé à ajouter jQuery ?

Avant ton javascript sur ta page, il faut rajouter :
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Si cela ne fonctionne pas, pourrais tu copier / coller le code tel que tu essayes de le mettre en place sur notepad s'il te plait Smile ?

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Je n'arrive pas à faire fonctionner un code (avec du js)

Message par Britney le Mar 10 Mar 2015 - 2:01

aie elle vient de là l'erreur de débutant... du coup ça fonctionne, je mets mon code au cas où ça intéresserait (sachant que j'utilise des fichiers externes pour chaque type :

Code:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8" />
      <title>TEST</title>

      <link href="test.css" rel="stylesheet" media="all" type="text/css">
   
</head>
<body>

   <div class="container">
      <div class="card">
         <div class="face face1"></div>
         <div class="face face2"></div>
      </div>

    <ul class="store">
      <li>
            <div class="content content1">1</div>
        </li>
     
     <li>
            <div class="content content2">2</div>
      </li>
    
      <li>
            <div class="content content3">3</div>
      </li>
    
      <li>
            <div class="content content4">4</div>
      </li>
    </ul>

   </div>

   <div class="buttons">
      <input type="button" id="flip1" value="Flip 1"/>
      <input type="button" id="flip2" value="Flip 2"/>
      <input type="button" id="flip3" value="Flip 3"/>
      <input type="button" id="flip4" value="Flip 4"/>
   </div>

   <script src="jquery-2.1.3.min.js"></script>
   <script src="test.js"></script>
   
</body>
</html>

fichier test.css :

Spoiler:
Code:
.container {
    position: relative;
    width: 200px;
    height: 260px;
    margin: 0 auto 40px auto;

    -webkit-perspective: 800px;
      -moz-perspective: 800px;
        -ms-perspective: 800px;
        -o-perspective: 800px;
            perspective: 800px;
}
.container .card {
    position: absolute;
    width: 100%;
    height: 100%;

    -webkit-transition: -webkit-transform 1s;
      -moz-transition:    -moz-transform 1s;
        -ms-transition:    -ms-transform 1s;
        -o-transition:      -o-transform 1s;
            transition:        transform 1s;

    -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.container .card .face {
    position: absolute;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    font-size: 140px;
    font-weight: bold;
    line-height: 260px;
    color: #fff;
    text-align: center;

    -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
            backface-visibility: hidden;
}
.container .card.flipped,
.container .card .face2 {
    -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
.container .card .face .content1 {background-color: #7ad;}
.container .card .face .content2 {background-color: #7da;}
.container .card .face .content3 {background-color: #d7a;}
.container .card .face .content4 {background-color: #fad997;}

.store {
    display: none;
}
.buttons {
    text-align: center;
}

fichier .js :

Spoiler:
Code:
var topCard = 1;
var facingUp = true;

function flipCard(n) {
    if (topCard === n) return;

    // Replace the contents of the current back-face with the contents
    // of the element that should rotate into view.
    var curBackFace = $('.' + (facingUp ? 'face2' : 'face1'));
    var nextContent = $('.store' + n).html();
    var nextContent = $('.store li:nth-child(' + n + ')').html();
    curBackFace.html(nextContent);

    // Rotate the content
    $('.card').toggleClass('flipped');
    topCard = n;
    facingUp = !facingUp;
}

$('#flip1').on('click', function(){ flipCard(1); });
$('#flip2').on('click', function(){ flipCard(2); });
$('#flip3').on('click', function(){ flipCard(3); });
$('#flip4').on('click', function(){ flipCard(4); });

$(document).ready(function(){
    // Add the appropriate content to the initial "front side"
    var frontFace = $('.face1');
    var frontContent = $('.store li:first-child').html();
    frontFace.html(frontContent);
});

du coup si ça ne fonctionnait pas c'est parce que je n'avais pas téléchargé la bibliothèque jquery ^^

c'est résolu, bien que je ne comprenne pas donc je ne l'utiliserais pas :c

merci Nihil Smile

Britney
Nouveau membre

Messages : 20
Inscrit(e) le : 03/08/2012

http://forum-test-asylum.forumactif.org/
Britney 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