Souci d'intégration de JS dans une page HTML

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

Résolu Souci d'intégration de JS dans une page HTML

Message par Kendall le Mer 16 Déc 2015 - 21:58

Détails techniques


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

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Début du codage
Lien du forum : http://kendalllondonreagan.forumactif.org/h1-page-d-accueil-happy-new-year

Description du problème

Bonjour,
J'ai suivi le tutoriel suivant pour faire un slideshow. Je l'avais déjà utilisé et il fonctionnait lorsqu'on l'appliquait directement sur une page d'accueil.
Or, aujourd'hui, j'aimerais m'en servir dans une page HTML. Du coup j'ai utiliser plusieurs méthode pour essayer de l'intégrer, en vain...
Je ne comprends pas d'ou viens le souci, si quelqu'un pouvait m'éclairer ce serait top xD
Voilà le code de ma page html :

Code:
<html>
  <head>
    <meta charset="utf-8" />
    <title>Happy New Year</title>
         
    <style>
.slideshow,
.slide {
    width: 500px;
    height: 400px;
}

.slideshow {
    margin: 0;
    overflow: hidden;
 
    background-color: black;
 
    border: 4px double white;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.slideshow div {
    position: relative;
    top: 0;
    left: 0;
}
 
.slide {
    margin: 0;
    overflow: auto;
 
    display: inline-block;
    vertical-align: middle;
     
    text-align: center;
    color: white;
}

.slide p {
    margin: 10px;
    text-align: justify;
}
    </style>
            <script type="text/javascript" src="http://kendalllondonreagan.forumactif.org/10367.js"></script>
  </head>
  <body>
   
    <!-- Slideshow infini horizontal -->
<div id="slideshow" class="slideshow">
    <div id="slideshow-container">
        <div class="slide">
            <h1>Slide 1 - Avec une image</h1>
            <img src="http://theme3.cssactif.com/logo.png" alt="CSSActif" />
        </div>
 
        <div class="slide">
            <h1>Slide 2 - Avec du texte</h1>
            <p>Cupcake ipsum dolor. Sit amet carrot cake. Pie wypas muffin I love oat cake. Gummi bears I love chocolate bar. Topping faworki I love I love dragée. I love icing tiramisu halvah fruitcake. Sweet roll danish lollipop carrot cake toffee lemon drops chocolate. I love carrot cake soufflé cookie cake tootsie roll I love. Topping I love oat cake bear claw chupa chups wypas gummies pastry toffee.</p>
        </div>
     
        <div class="slide">
            <h1>Slide 3 - Avec un texte long...</h1>
            <p>Cupcake ipsum dolor sit amet. Ice cream bonbon cookie wypas tart carrot cake. Jujubes jelly-o chocolate I love candy canes cheesecake lemon drops cake. Dessert wafer bonbon jelly-o chocolate bar gummies oat cake I love applicake. Sweet oat cake I love I love sesame snaps caramels jelly brownie I love. Cupcake halvah cheesecake cookie pastry gummi bears I love jelly beans powder. Cheesecake ice cream icing sweet I love pie macaroon tootsie roll sugar plum. Ice cream jujubes wypas apple pie sweet roll sweet roll applicake tiramisu. Cake I love pie. Powder sesame snaps toffee croissant cotton candy I love candy canes jujubes.</p>
            <p>I love jelly I love I love carrot cake halvah I love lemon drops jelly-o. Powder tootsie roll candy canes tootsie roll bear claw ice cream sweet roll toffee. Cupcake I love lemon drops sugar plum halvah topping I love chocolate marshmallow. Jelly marshmallow muffin sesame snaps apple pie cotton candy sweet roll. Marshmallow danish marshmallow tart soufflé liquorice liquorice I love. Liquorice cheesecake icing chupa chups sugar plum powder cake sweet soufflé. Jelly-o pastry chupa chups gummi bears.</p>
            <p>Brownie toffee I love sweet roll muffin I love. Wafer sweet roll bear claw dragée dragée sesame snaps sweet roll I love chocolate bar. Muffin I love dragée muffin gingerbread topping lemon drops toffee. Jelly beans cupcake toffee bear claw candy toffee I love cake.</p>
        </div>
     
        <div class="slide">
            <h1>Slide 4 - Autant que vous voulez...</h1>
            <img src="http://theme3.cssactif.com/logo.png" alt="CSSActif" />
            <p>Cupcake ipsum dolor. Sit amet bonbon. Pastry gummi bears wafer I love jujubes marzipan dragée tiramisu.</p>
        </div>
     
        <!--
            Vous pouvez ajouter autant de slides que possible avec le template suivant :
         
            <div class="slide">
                --- votre contenu ici ---
            </div>
        -->
    </div>
</div>
   
  </body>
</html>

Sachant que j'ai également tester en incluant le code directement dans la page html.


Dernière édition par Kendall le Jeu 17 Déc 2015 - 10:38, édité 1 fois

Kendall
***

Messages : 129
Inscrit(e) le : 30/04/2011

Kendall a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci d'intégration de JS dans une page HTML

Message par Invité le Jeu 17 Déc 2015 - 6:51

Bonjour,

Il faut rajouter l'inclusion de la librairie jQuery au début,juste après la balise <head>:

Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci d'intégration de JS dans une page HTML

Message par Kendall le Jeu 17 Déc 2015 - 10:38

... Sérieux j'suis un tel boulet :facepalm:
Merci beaucoup ça fonctionne !

Kendall
***

Messages : 129
Inscrit(e) le : 30/04/2011

Kendall 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