css et js pas associés

css et js pas associés - HTML/CSS - Programmation

Marsh Posté le 20-06-2018 à 10:47:35    

Bonjour à toutes et à tous,
 
Petite envie de graphisme ;) je suis en train d'essayer de faire un site avec celui comme menu.
 
https://codepen.io/kjbrum/pen/VQjGvJ
 
J'ai donc crée un fichier html avec ceci comme lien pour le css et le js
 

Code :
  1. <script type="text/javascript" src="js/menu.js"></script>
  2. <link rel="stylesheet" type="text/css" href="css/style.scss" media="all" />


 
Le fichier style est bien scss comme indiqué dans codepen.
 
Mes fichiers sont bien chacun dans leurs répertoires respectif.
 
L'affichage ne tient pas compte du css et le js n'en parlons pas, il ne se passe rien.
 
Merci d'avance pour votre aide.

Reply

Marsh Posté le 20-06-2018 à 10:47:35   

Reply

Marsh Posté le 20-06-2018 à 11:23:56    

Bonjour,
 
Je ne connais pas plus que ça ces langages, mais ce sont des langages à compiler pour obtenir des fichiers js et css. Ils ne peuvent être lus comme tels par le navigateur.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 20-06-2018 à 11:24:47    

Le JS est le CSS sont passé par des compilateurs Babel pour le JS et le SCSS n'est pas nativement compris par les navigateurs, il doit être transformé en CSS.
 
Dans CodePen tu as une flèche en haut à droite : View compiled (JS ou CSS)


Message édité par mechkurt le 20-06-2018 à 11:25:43

---------------
D3
Reply

Marsh Posté le 20-06-2018 à 11:46:38    

Bonjour à vous deux,
 
Je viens d'apprendre quelque chose.   Effectivement dès que c'est compilé, ça fonctionne nettement mieux.
 
Un grand merci pour votre aide.
 
Bonne journée.
 

Reply

Marsh Posté le 20-06-2018 à 12:43:00    

Enfin quand je dis ça fonctionne mieux, c'est pour le css parce que le js pas du tout.
 
J'essaie celui ci
 
https://codepen.io/ettrics/pen/ogRaRv
 
Donc je crée un html, un css ( compilé) et un js, je mets dans le head
 

Code :
  1. <script type="text/javascript" src="menu.js"></script>
  2. <link rel="stylesheet" type="text/css" href="style.css" media="all" />


 
Et ça fonctionne pas.  Avez vous une idée ?
 
Merci


Message édité par charliedaps le 20-06-2018 à 12:43:24
Reply

Marsh Posté le 20-06-2018 à 13:59:46    

Le JS utilise la bibliothèque jQuery, il faut donc l'ajouter avant de charger ton script.

 

EDIT : + tu as aussi les fonts à insérer pour obtenir les icônes :

Code :
  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  2. <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  3. <meta name="viewport" content="width=device-width">
 

Ce qui donne par exemple sur JSfiddle avec le CSS compilé : https://jsfiddle.net/1kfjg7xd/5/

Message cité 1 fois
Message édité par MaybeEijOrNot le 20-06-2018 à 14:11:34

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 20-06-2018 à 17:56:17    

Re bonjour,
 
Ben oui mais bon ben je sais pas moi ;)
Je ne sais pas combien d'heure j'ai passé.  Dès que je mets ces pages en place, ça fonctionne pas.
 
La seule chose que j'ai modifiée pour l'instant, c'est le début du html.
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8" />
  5.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  <title>Menu Drink</title>
  7.  <meta name="description" content="" />
  8.  <meta name="keywords" content="" />
  9.  <meta name="author" content="" />
  10.  <script type="text/javascript" src="menu.js"></script>
  11.  <link rel="stylesheet" type="text/css" href="style.css" media="all" />
  12.  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  13.  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  14.  <meta name="viewport" content="width=device-width">
  15. </head>
  16. <body>


Ensuite c'est un copie coller de ce qui fonctionne en ligne.
 
J'ai le carré en haut à gauche mais rien ne se passe quand je clique.  J'ai également les différentes sections de couleur mais sans les textes.
 
Gloups
 
Merci d'avance


Message édité par charliedaps le 20-06-2018 à 17:58:10
Reply

Marsh Posté le 20-06-2018 à 18:01:12    

Dans ton premier message, le chemin vers tes fichiers CSS et javacript est différent.
 
Et pourquoi tu ne fais pas un codepen, cela sera plus simple pour t'aider.

Reply

Marsh Posté le 20-06-2018 à 18:05:59    

Bonjour David,
 
Effectivement mais ce n'est pas le même menu.  J'en teste plusieurs et là j'ai tout mis dans le même répertoire (pensant que ça pouvait être ça le problème)
 
codepen, ben ça fonctionne sans problème mais dès que je teste sur mon pc ou en mettant les fichiers sur mon hébergement, ça fonctionne plus.

Reply

Marsh Posté le 20-06-2018 à 18:12:21    

Et bien, pourquoi ne pas donner le lien de ton hébergement
Nous ne pouvons pas t'aider quand tu dis que cela ne fonctionne pas, c'est plus simple pour debuguer d'avoir un accès à une page.
 

Reply

Marsh Posté le 20-06-2018 à 18:12:21   

Reply

Marsh Posté le 20-06-2018 à 21:11:16    

MaybeEijOrNot a écrit :

Le JS utilise la bibliothèque jQuery, il faut donc l'ajouter avant de charger ton script.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 21-06-2018 à 09:05:44    

David Boring a écrit :

Et bien, pourquoi ne pas donner le lien de ton hébergement
Nous ne pouvons pas t'aider quand tu dis que cela ne fonctionne pas, c'est plus simple pour debuguer d'avoir un accès à une page.
 


 
Pour être ultra précis, ce n'est pas mon hébergement mais celui d'un copain qui m'a crée un sous domaine.  Je vais lui demander si je peux communiquer le lien.
 

Reply

Marsh Posté le 21-06-2018 à 09:41:54    

Bonjour MaybeEijOrNot,
 
Bien entendu, ne sachant pas comment faire j'ai fouillé sur le net.
 
J'ai donc ajouté en fin de body
 

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


 
Ca a fait quelques améliorations, le texte s'affiche vaguement mais toujours pas le menu.
 
Voici le lien de la page http://testons.laptopdiscount.fr/camera/index.html
 
Merci

Reply

Marsh Posté le 21-06-2018 à 17:07:21    

charliedaps a écrit :

Bonjour MaybeEijOrNot,
 
Bien entendu, ne sachant pas comment faire j'ai fouillé sur le net.
 
J'ai donc ajouté en fin de body
 

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


 
Ca a fait quelques améliorations, le texte s'affiche vaguement mais toujours pas le menu.
 
Voici le lien de la page http://testons.laptopdiscount.fr/camera/index.html
 
Merci


 
J'ai changé

Code :
  1. doc.on('ready', init);


 par  

Code :
  1. $(function() {
  2. init();
  3. });


et cela fonctionne.
 
Tu peux aussi mettre le lien de tes scripts après le body
 

Code :
  1. </body>
  2.  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  3.  <script type="text/javascript" src="menu.js"></script>
  4. </html>


Reply

Marsh Posté le 21-06-2018 à 17:53:34    

Re bonjour David,
 
Merci pour ton aide.   Ca fonctionne chez moi aussi.
 
Pourrais tu me dire quelle est la différence entre ces deux codes et surtout pourquoi ça fonctionne sur codepen et pas sur l'hébergeur ?
 
Merci beaucoup.

Reply

Marsh Posté le 21-06-2018 à 18:17:50    

Pour réparer le problème, j'ai mis un console.log dans la fonction init.
Rien ne s'affichait dans la console.
 
Donc, j'ai regardé la documentation de $( document ).ready()  
http://learn.jquery.com/using-jque [...] ent-ready/
 
J'ai donc employé le code recommandé.
 
 
Si le Codepen fonctionne, c'est parce que la version de jQuery n'est pas la même ( 2.1.3 vs 3.1.0 )

Reply

Marsh Posté le 21-06-2018 à 18:29:31    

Merci David pour ces précisions.
 
Je vais tester tout ça demain fin de journée pour essayer de mieux comprendre.
 
Un grand merci.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed