Sujet Précédent Sujet Suivant

Lier html, css, javasript

Fermé
K3vin Orton Messages postés 57 Date d'inscription vendredi 21 février 2014 Statut Membre Dernière intervention 12 juin 2017 - Modifié le 12 juin 2017 à 03:53
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 12 juin 2017 à 14:14
Bonjour,

Je voulais savoir comment je pourrai faire pour intégrer le code js et css dans la page html (je ne veux pas de lien js ou css, je veux carrément prendre leurs codes et les intégrer dans la page html). Voici le lien contenant les trois codes que je souhaiterai intégré dans une seule page : https://codepen.io/tamak/pen/hzEer

Et voici le code html que j'ai essayé d'intégrer le css et le js mais l'animation ne marche pas alors que le css est bien passé : 
<!DOCTYPE html>
<html>
<head>

<style>
body {
  font-family: 'Ubuntu', sans-serif;
  width:960px;
}

p{
  color:#525252;
  font-size:12px;
}

.skillbar {
 position:relative;
 display:block;
 margin-bottom:15px;
 width:100%;
 background:#eee;
 height:35px;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 -webkit-transition:0.4s linear;
 -moz-transition:0.4s linear;
 -ms-transition:0.4s linear;
 -o-transition:0.4s linear;
 transition:0.4s linear;
 -webkit-transition-property:width, background-color;
 -moz-transition-property:width, background-color;
 -ms-transition-property:width, background-color;
 -o-transition-property:width, background-color;
 transition-property:width, background-color;
}

.skillbar-title {
 position:absolute;
 top:0;
 left:0;
width:110px;
 font-weight:bold;
 font-size:13px;
 color:#ffffff;
 background:#6adcfa;
 -webkit-border-top-left-radius:3px;
 -webkit-border-bottom-left-radius:4px;
 -moz-border-radius-topleft:3px;
 -moz-border-radius-bottomleft:3px;
 border-top-left-radius:3px;
 border-bottom-left-radius:3px;
}

.skillbar-title span {
 display:block;
 background:rgba(0, 0, 0, 0.1);
 padding:0 20px;
 height:35px;
 line-height:35px;
 -webkit-border-top-left-radius:3px;
 -webkit-border-bottom-left-radius:3px;
 -moz-border-radius-topleft:3px;
 -moz-border-radius-bottomleft:3px;
 border-top-left-radius:3px;
 border-bottom-left-radius:3px;
}

.skillbar-bar {
 height:35px;
 width:0px;
 background:#6adcfa;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
}

.skill-bar-percent {
 position:absolute;
 right:10px;
 top:0;
 font-size:11px;
 height:35px;
 line-height:35px;
 color:#ffffff;
 color:rgba(0, 0, 0, 0.4);
}


</style>

jQuery(document).ready(function() {
  jQuery(".skillbar").each(function() {
    jQuery(this).find(".skillbar-bar").animate(
      {
        width: jQuery(this).attr("data-percent")
      },
      6000
    );
  });
});

</head>

<body>

<h1>jQuery & CSS3 Skills Bar</h1>

<div class="skillbar clearfix " data-percent="20%">
 <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
 <div class="skillbar-bar" style="background: #e67e22;"></div>
 <div class="skill-bar-percent">20%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="25%">
 <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span></div>
 <div class="skillbar-bar" style="background: #3498db;"></div>
 <div class="skill-bar-percent">25%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="50%">
 <div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
 <div class="skillbar-bar" style="background: #2c3e50;"></div>
 <div class="skill-bar-percent">50%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="40%">
 <div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
 <div class="skillbar-bar" style="background: #5a68a5;"></div>
 <div class="skill-bar-percent">40%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="75%">
 <div class="skillbar-title" style="background: #333333;"><span>Wordpress</span></div>
 <div class="skillbar-bar" style="background: #525252;"></div>
 <div class="skill-bar-percent">75%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="100%">
 <div class="skillbar-title" style="background: #27ae60;"><span>SEO</span></div>
 <div class="skillbar-bar" style="background: #2ecc71;"></div>
 <div class="skill-bar-percent">100%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="70%">
 <div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span></div>
 <div class="skillbar-bar" style="background: #4288d0;"></div>
 <div class="skill-bar-percent">70%</div>
</div> <!-- End Skill Bar -->

<p><strong>SOURCE :</strong> http://w3lessons.info/2013/06/04/skill-bar-with-jquery-css3/</p>


</body>
</html>


Je vous remercie d'avance.
A voir également:

2 réponses

Réponse 1 / 2
Grandasse_ Messages postés 924 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 27 avril 2023 592
12 juin 2017 à 08:10
Bonjour,
Il manque les balises de script, le document doit être structuré comme suit : 
<html>
 <head>
  <style type="text/css">
  //CSS
  </style>
  <script type="text/javascript">
  //JS
  </script>
 </head>
 <body>
 </body>
</html>

2
K3vin Orton Messages postés 57 Date d'inscription vendredi 21 février 2014 Statut Membre Dernière intervention 12 juin 2017 1
12 juin 2017 à 11:57
J'ai fait comme tu as dit, mais ça ne marche toujours pas
0
Réponse 2 / 2
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
12 juin 2017 à 14:14
Salut

c est normal tu n a pas mis de lien vers la librairie jquery !!!!!
la je t ai mis un lien vers la librairie heberger sur google app ,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
mais tu peu la telecharger et l heberger toi meme!
https://jquery.com/download/ 
<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
    <!--
    body {
      font-family: 'Ubuntu', sans-serif;
      width: 960px;
    }

    p{
      color: #525252;
      font-size: 12px;
    }

    .skillbar {
      position: relative;
      display: block;
      margin-bottom: 15px;
      width: 100%;
      background: #eee;
      height: 35px;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -webkit-transition: 0.4s linear;
      -moz-transition: 0.4s linear;
      -ms-transition: 0.4s linear;
      -o-transition: 0.4s linear;
      transition: 0.4s linear;
      -webkit-transition-property: width, background-color;
      -moz-transition-property: width, background-color;
      -ms-transition-property: width, background-color;
      -o-transition-property: width, background-color;
      transition-property: width, background-color;
    }

    .skillbar-title {
      position: absolute;
      top: 0;
      left: 0;
      width: 110px;
      font-weight: bold;
      font-size: 13px;
      color: #ffffff;
      background: #6adcfa;
      -webkit-border-top-left-radius: 3px;
      -webkit-border-bottom-left-radius: 4px;
      -moz-border-radius-topleft: 3px;
      -moz-border-radius-bottomleft: 3px;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }

    .skillbar-title span {
      display: block;
      background: rgba(0, 0, 0, 0.1);
      padding: 0 20px;
      height: 35px;
      line-height: 35px;
      -webkit-border-top-left-radius: 3px;
      -webkit-border-bottom-left-radius: 3px;
      -moz-border-radius-topleft: 3px;
      -moz-border-radius-bottomleft: 3px;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }

    .skillbar-bar {
      height: 35px;
      width: 0px;
      background: #6adcfa;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
    }

    .skill-bar-percent {
      position: absolute;
      right: 10px;
      top: 0;
      font-size: 11px;
      height: 35px;
      line-height: 35px;
      color: #ffffff;
      color: rgba(0, 0, 0, 0.4);
    }
    -->
    </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    jQuery(document).ready(function()
      {
        jQuery('.skillbar').each(function()
          {
            jQuery(this).find('.skillbar-bar').animate(
              {
              width: jQuery(this).attr('data-percent')
              }, 6000
            );
          }
        );
      }
    );
    </script>
  </head>
  <body>
    <h1>
      jQuery & CSS3 Skills Bar
    </h1>
    <div class="skillbar clearfix" data-percent="20%">
      <div class="skillbar-title" style="background: #d35400;">
        <span>HTML5</span>
      </div>
      <div class="skillbar-bar" style="background: #e67e22;"></div>
      <div class="skill-bar-percent">
        20%
      </div>
    </div><!-- End Skill Bar -->
    <div class="skillbar clearfix" data-percent="25%">
      <div class="skillbar-title" style="background: #2980b9;">
        <span>CSS3</span>
      </div>
      <div class="skillbar-bar" style="background: #3498db;"></div>
      <div class="skill-bar-percent">
        25%
      </div>
    </div><!-- End Skill Bar -->
    <div class="skillbar clearfix" data-percent="50%">
      <div class="skillbar-title" style="background: #2c3e50;">
        <span>jQuery</span>
      </div>
      <div class="skillbar-bar" style="background: #2c3e50;"></div>
      <div class="skill-bar-percent">
        50%
      </div>
    </div><!-- End Skill Bar -->
    <div class="skillbar clearfix" data-percent="40%">
      <div class="skillbar-title" style="background: #46465e;">
        <span>PHP</span>
      </div>
      <div class="skillbar-bar" style="background: #5a68a5;"></div>
      <div class="skill-bar-percent">
        40%
      </div>
    </div><!-- End Skill Bar -->
    <div class="skillbar clearfix" data-percent="75%">
      <div class="skillbar-title" style="background: #333333;">
        <span>Wordpress</span>
      </div>
      <div class="skillbar-bar" style="background: #525252;"></div>
      <div class="skill-bar-percent">
        75%
      </div>
    </div><!-- End Skill Bar -->
    <div class="skillbar clearfix" data-percent="100%">
      <div class="skillbar-title" style="background: #27ae60;">
        <span>SEO</span>
      </div>
      <div class="skillbar-bar" style="background: #2ecc71;"></div>
      <div class="skill-bar-percent">
        100%
      </div>
    </div><!-- End Skill Bar -->
    <div class="skillbar clearfix" data-percent="70%">
      <div class="skillbar-title" style="background: #124e8c;">
        <span>Photoshop</span>
      </div>
      <div class="skillbar-bar" style="background: #4288d0;"></div>
      <div class="skill-bar-percent">
        70%
      </div>
    </div><!-- End Skill Bar -->
    <p>
      <strong>SOURCE :</strong> http://w3lessons.info/2013/06/04/skill-bar-with-jquery-css3/
    </p>
  </body>
</html>



a+
1

Discussions similaires

&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses