Conflit 2 scripts

Fermé

alexis3000 Messages postés 10 Date d'inscription mardi 5 juillet 2016 Statut Membre Dernière intervention 7 juillet 2016 - Modifié par jordane45 le 5/07/2016 à 20:06
alexis3000 - 17 juil. 2016 à 12:45

Bonjour,
J'ai un conflit entre 2 scripts, popurriez-vous m'aider à le résoudre, svp ?
Le premier est un menu, le second un accordéon. Je crois que le conflit s'opère dans le BODY : si je mets le menu en premier, il ne fonctionne pas et seul l'accordéon foncinne ; si je le mets en second, il fonctionne mais pas l'accordéon.
Qui pourrait aider à coordonner les 2 scripts, svp ?
Merci

SCRIPT 1 (Menu)

<head>
<!-- Bootstrap -->
  <link rel="stylesheet" href="script/jquery.sliding_menu.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]>
<script src="[https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js]"></script>
<script src="[https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js]"></script>
<![endif]-->
</head>

<body>
<!-- Menu -->
<div id="menu" style="display: none;">
<ul>
  <li><font face="modern, arial, veranda"><a
 href="LIEN">titre</a></font></li>
  <li></li>
  <li><font face="modern, arial, veranda"><a
 href="javascript:history.go(-1)">Page
précédente</a></font></li>
</ul>
</div>
<font face="modern, arial, veranda">
<script
 src="[http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js]"></script>
<script src="script/jquery.sliding_menu.js"></script>
<script>
$(document).ready(function(){
$('#menu ul').sliding_menu_js({
header_title:'Titre',
header_logo: ""
});
});
</script></font>
</body>

SCRIPT 2

<head>
  <link href="[http://fonts.googleapis.com/css?family=Open+Sans]"
 rel="stylesheet" type="text/css">
  <link href="script/dist/jquery.bbAccordion.css"
 rel="stylesheet">
  <link href="script/dist/demo.css" rel="stylesheet">
  <link href="[http://www.jqueryscript.net/css/jquerysctipttop.css]"
 rel="stylesheet" type="text/css">
  <style>
body { font-family:'Open Sans';}
  </style>
</head>

<body>
<!-- Accordeon -->
<div class="jquery-script-clear"></div>
<div class="container" style="margin-top: 100px;">
<div class="wrapper">
<h1 style="color: rgb(153, 0, 0);" class="lmb-10"><font
 face="modern, arial, veranda"><font
 face="modern, arial, veranda">Titre 1</font></font></h1>
<div class="bbAccordion" data-accordion-group="group1">
<div class="accordion-head">
<h2><font face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">Titre 2</font></big></big></font></h2>
</div>
<div class="accordion-content">
<ul>
  <li><font face="modern, arial, veranda">1 </font></li>
  <li><font face="modern, arial, veranda">2</font></li>
  <li><font face="modern, arial, veranda">3</font></li>
</ul>
</div>
</div>
<font face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">
<script src="[http://code.jquery.com/jquery-1.11.3.min.js]"></script>
<script src="script/dist/jquery.bbAccordion.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.bbAccordion').bbAccordion();
});
</script></font></big></big></font></div>
</div>
</body>

EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.

A voir également:

Conflit 2 scripts
2 ecran pc - Guide
Word numéro de page 1/2 - Guide
France 2 uhd - Accueil - TV & Vidéo
Whatsapp avec 2 cartes sim - Guide
Jdownloader 2 - Télécharger - Téléchargement & Transfert

11 réponses

Réponse 1 / 11

jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025 4 731
5 juil. 2016 à 22:14

Voila :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Titre</title>
  <!-- Include jquery FIRST !! -->
  <script src="script/jquery-1.11.3.min.js"></script>
   
  <link rel="stylesheet" href="script/jquery.sliding_menu.css">
  <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link href="script/dist/jquery.bbAccordion.css" rel="stylesheet">
  <link href="script/dist/demo.css" rel="stylesheet">
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  
  <script src="script/jquery.sliding_menu.js"></script>
  <script src="script/dist/jquery.bbAccordion.js"></script>
   
  <style>
    body { font-family:'Open Sans';}
  </style>
  
  <script type="text/javascript">
    $(document).ready(function(){
      $('.bbAccordion').bbAccordion();

      $('#menu ul').sliding_menu_js({
      header_title:'Titre',
      header_logo: ""
      });
    });
  </script>
</head>
<body>
  <!-- Accordeon -->
  <div class="jquery-script-clear"></div>
  <div class="container" style="margin-top: 100px;">
  <div class="wrapper">
    <h1 style="color: rgb(153, 0, 0);" class="lmb-10"><font
     face="modern, arial, veranda"><font
     face="modern, arial, veranda">Titre 1</font></font></h1>
    <div class="bbAccordion" data-accordion-group="group1">
      <div class="accordion-head">
        <h2><font face="modern, arial, veranda"><big><big><font face="modern, arial, veranda">Titre 2</font></big></big></font></h2>
      </div>
      <div class="accordion-content">
      <ul>
        <li><font face="modern, arial, veranda">1 </font></li>
        <li><font face="modern, arial, veranda">2</font></li>
        <li><font face="modern, arial, veranda">3</font></li>
      </ul>
      </div>
     </div>
      <font face="modern, arial, veranda"><big><big><font
       face="modern, arial, veranda">

      </font></big></big></font>
  </div>
  </div>

  <!-- Menu -->
  <div id="menu" style="display: none;">
  <ul>
    <li><font face="modern, arial, veranda"><a
   href="LIEN">titre</a></font></li>
    <li></li>
    <li><font face="modern, arial, veranda"><a
   href="javascript:history.go(-1)">Page
  précédente</a></font></li>
  </ul>
  </div>
  <font face="modern, arial, veranda">
  </font>
  <br>
</body>
</html>

NB : J'ai téléchargé le fichier jquery au lieu de pointer sur le site web.
Hormis ça .. j'ai remanié le code pour que tout fonctionne ensemble.
J'ai supprimé les balises inutiles et tout replacer correctement dans ton code....

Réponse 2 / 11

jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025 4 731
Modifié par jordane45 le 5/07/2016 à 23:26

J'avais déjà téléchargé les sources lorsque j'ai fait mon test.
Je t'assure que le code que je t'ai donné fonctionne parfaitement.....
En quoi ne marche t-il pas chez toi ?
Qu'as tu dans la console de ton navigateur (de préférence en utilisant firebug pour firefox) ?

Sachant que ton principal problème vient de ton insertion de multiple scripts JQUERY.....
Ligne 50:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

et ligne 235:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Tu ne dois en mettre qu'un !
De préférence ...; AVANT TOUT autre script JS (donc dans le HEAD) et AVANT les autres imports tel que bootstrap ou autre
bref... comme je l'ai fait dans le code que je t'ai donné....

Cordialement,
Jordane

Réponse 3 / 11

jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025 4 731
5 juil. 2016 à 20:07

Bonjour,

1 - A l'avenir, Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

2 - Tu nous montres deux bouts de code... les deux ayant des balises head / body....
ôtes moi d'un doute.... tu ne places bien QUE le html et le javascript dans ta page lorsque tu veux réuninr tes deux scripts ??
Montres nous comment tu écris ton code avec les deux scripts ensemble.

Réponse 4 / 11

alexis3000 Messages postés 10 Date d'inscription mardi 5 juillet 2016 Statut Membre Dernière intervention 7 juillet 2016
5 juil. 2016 à 20:54

Bonjour,

@Jordane45
C'est entendu pour la coloration.

Pour les codes, il s'agit d'un menu et d'un accordéon horizontal. Je fais simplement les codes du HEAD l'un à la suite de l'autre, et idem pour le BODY. Je pense qu'il y a un conflit dans les scripts, en fin de code les 2 contiennent un code final identique :

$(document).ready(function () {

Merci pour votre aide.
A+

jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025 4 731
5 juil. 2016 à 21:41

Cette ligne de code ne génère aucun conflit. ..

Montre moi ton code assemblé. ..

au passage. .. dis moi aussi si tu as quelque chose d'afficher dans la CONSOLE de ton navigateur

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 11

alexis3000 Messages postés 10 Date d'inscription mardi 5 juillet 2016 Statut Membre Dernière intervention 7 juillet 2016
5 juil. 2016 à 21:50

Bonjour,

Il n'y a aucun message dans la console du navigateur.

Voici le code de la page complet, avec les deux scipts bout à bout.

Merci bien par avance.
A+

================================

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Titre</title>
<!-- Bootstrap -->
  <link rel="stylesheet" href="script/jquery.sliding_menu.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media 
queries --><!-- WARNING: Respond.js doesn't work if you view the page via 
file:// --><!--[if lt IE 9]>
<script 

src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script 

src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

  <link href="http://fonts.googleapis.com/css?family=Open+Sans"
 rel="stylesheet" type="text/css">
  <link href="script/dist/jquery.bbAccordion.css"
 rel="stylesheet">
  <link href="script/dist/demo.css" rel="stylesheet">
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css"
 rel="stylesheet" type="text/css">
  <style>
body { font-family:'Open Sans';}
  </style>
</head>
<body>
<!-- Accordeon -->
<div class="jquery-script-clear"></div>
<div class="container" style="margin-top: 100px;">
<div class="wrapper">
<h1 style="color: rgb(153, 0, 0);" class="lmb-10"><font
 face="modern, arial, veranda"><font
 face="modern, arial, veranda">Titre 1</font></font></h1>
<div class="bbAccordion" data-accordion-group="group1">
<div class="accordion-head">
<h2><font face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">Titre 2</font></big></big></font></h2>
</div>
<div class="accordion-content">
<ul>
  <li><font face="modern, arial, veranda">1 </font></li>
  <li><font face="modern, arial, veranda">2</font></li>
  <li><font face="modern, arial, veranda">3</font></li>
</ul>
</div>
</div>
<font face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script/dist/jquery.bbAccordion.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.bbAccordion').bbAccordion();
});
</script></font></big></big></font></div>
</div>

<!-- Menu -->
<div id="menu" style="display: none;">
<ul>
  <li><font face="modern, arial, veranda"><a
 href="LIEN">titre</a></font></li>
  <li></li>
  <li><font face="modern, arial, veranda"><a
 href="javascript:history.go(-1)">Page
précédente</a></font></li>
</ul>
</div>
<font face="modern, arial, veranda">
<script
 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></scri

pt>
<script src="script/jquery.sliding_menu.js"></script>
<script>
$(document).ready(function(){
$('#menu ul').sliding_menu_js({
header_title:'Titre',
header_logo: ""
});
});
</script></font>

<br>
</body>
</html>

Réponse 6 / 11

alexis3000 Messages postés 10 Date d'inscription mardi 5 juillet 2016 Statut Membre Dernière intervention 7 juillet 2016
6 juil. 2016 à 00:04

Bonjour/bonsoir,

Merci beaucoup de ton suivi.
Je comprends ce que tu as fait, fondamentalement
- un seul scripts JQUERY (au lieu de 2 : lignes 50 et 235)
- les 2 codes de commande dans le HEAD.

C'est simple et propre -- mais chez moi, avec le dernier Firefox pourtant, au final aucun des 2 scripts ne fonctionne, ni le menu ni l'accordéon.

Par contre, lorsque je laisse les codes de commande dans le BODY en fin de script, come je l'ai fait, ça marche (1 code sur 2, en alternance selon celui qui est en dernière position).

Je m'en veux mais ta proposition, qui me plaît bien, ne semble pas fonctionner. Qu'en penses-tu ?

Merci et à mercredi sans doute ...

jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025 4 731
6 juil. 2016 à 00:06

.... encore une fois... que dit la console ???

jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025 4 731 > jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025
6 juil. 2016 à 00:58

De plus... tu ne m'as toujours pas dit en quoi cela ne fonctionne pas chez toi....
Peux tu détailler ?
Quel est Le comportement souhaité et Le comportement réellement constaté ?

Réponse 7 / 11

alexis3000 Messages postés 10 Date d'inscription mardi 5 juillet 2016 Statut Membre Dernière intervention 7 juillet 2016
6 juil. 2016 à 15:53

Bonjour,

Concernant la console, aucune information. Quant au comportement, rien non plus : aucun script ne fonctionne (ni menu ni accordéon) : rien, nada.

Désolé d'êtr si négatif ...
A+

Réponse 8 / 11

jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025 4 731
6 juil. 2016 à 16:20

Tu peux tester ça et me dire si quelque chose s'affiche dans la console ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Titre</title>
  <!-- Include jquery FIRST !! -->
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
   
  <link rel="stylesheet" href="script/jquery.sliding_menu.css">
  <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link href="script/dist/jquery.bbAccordion.css" rel="stylesheet">
  <link href="script/dist/demo.css" rel="stylesheet">
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  
  <script src="script/jquery.sliding_menu.js"></script>
  <script src="script/dist/jquery.bbAccordion.js"></script>
   
  <style>
    body { font-family:'Open Sans';}
  </style>
  
  <script type="text/javascript">
    $(document).ready(function(){
      console.log ("** La page est chargée et jquery fonctionne !");
    
      $('.bbAccordion').bbAccordion();

      $('#menu ul').sliding_menu_js({
      header_title:'Titre',
      header_logo: ""
      });
    });
  </script>
</head>
<body>
  <!-- Accordeon -->
  <div class="jquery-script-clear"></div>
  <div class="container" style="margin-top: 100px;">
  <div class="wrapper">
    <h1 style="color: rgb(153, 0, 0);" class="lmb-10"><font
     face="modern, arial, veranda"><font
     face="modern, arial, veranda">Titre 1</font></font></h1>
    <div class="bbAccordion" data-accordion-group="group1">
      <div class="accordion-head">
        <h2><font face="modern, arial, veranda"><big><big><font face="modern, arial, veranda">Titre 2</font></big></big></font></h2>
      </div>
      <div class="accordion-content">
      <ul>
        <li><font face="modern, arial, veranda">1 </font></li>
        <li><font face="modern, arial, veranda">2</font></li>
        <li><font face="modern, arial, veranda">3</font></li>
      </ul>
      </div>
     </div>
      <font face="modern, arial, veranda"><big><big><font
       face="modern, arial, veranda">

      </font></big></big></font>
  </div>
  </div>

  <!-- Menu -->
  <div id="menu" style="display: none;">
  <ul>
    <li><font face="modern, arial, veranda"><a
   href="LIEN">titre</a></font></li>
    <li></li>
    <li><font face="modern, arial, veranda"><a
   href="javascript:history.go(-1)">Page
  précédente</a></font></li>
  </ul>
  </div>
  <font face="modern, arial, veranda">
  </font>
  <br>
</body>
</html>

Réponse 9 / 11

alexis3000 Messages postés 10 Date d'inscription mardi 5 juillet 2016 Statut Membre Dernière intervention 7 juillet 2016
6 juil. 2016 à 20:27

Bonjour,

Merci Jordane45, tu es un as. J'ai fait un essai et ça marche a priori.

Je dis à priori pour une chose. Voilà : j'ai augmenté l'accordéon et ajouté un lien en bas de page pour vérifier le fonctionnement général.

Et ... Rien l'accordéon ne fonctionne pas :(

Or, j'ai eu l'idée de cliquer une fois sur le menu du haut. Donc, après avoir cliqué un fois ... l'accordéon foncionne bien et le lien aussi :)

Mais alors, puisqu'on a déjà tellement avancé grâce à toi, aurais-tu une idée pour "débloquer" l'accordéon + le lien de page dès le chargement, pour ne pas avoir à activer le menu une fois au préalable, ce qui est fastidier est totalement inintéressant pour un visiteur de site ?

J'ai mi la page sur Internt pour voir le fonctionnement de visu :
http://sites.internet.lu/folders/alex_p/essai/essai.html

Merci d'avance
A+

jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025 4 731
7 juil. 2016 à 00:22

Le script (basé sur celui que tu as posté en lien) fonctionne :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>Titre</title>
    <!-- Include jquery FIRST !! -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="script/jquery.sliding_menu.css">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
    <link href="script/dist/jquery.bbAccordion.css" rel="stylesheet">
    <link href="script/dist/demo.css" rel="stylesheet">
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <script src="script/jquery.sliding_menu.js"></script>
    <script src="script/dist/jquery.bbAccordion.js"></script>
    <style>
      body { font-family:'Open Sans';}
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
      console.log ("** La page est chargee et jquery fonctionne !");
      $('.bbAccordion').bbAccordion();
      $('#menu ul').sliding_menu_js({
      header_title:'Titre',
      header_logo: ""
      });
    });
    </script>
  </head>


  <body>

    <!-- Accordeon -->
    <div class="jquery-script-clear"></div>
    <div class="container" style="margin-top: 100px;">
      <div class="wrapper">
      <h1 style="color: rgb(153, 0, 0);" class="lmb-10"><font face="modern, arial, veranda"><font face="modern, arial, veranda">Titre 1</font></font></h1>
      <div class="bbAccordion" data-accordion-group="group1">
        <div class="accordion-head">
          <h2><font face="modern, arial, veranda"><big><big><font face="modern, arial, veranda">Titre a</font></big></big></font></h2>
        </div>
        <div class="accordion-content">
          <ul>
            <li><font face="modern, arial, veranda">1 </font></li>
            <li><font face="modern, arial, veranda">2</font></li>
            <li><font face="modern, arial, veranda">3</font></li>
          </ul>
        </div>
      </div>
      <div class="bbAccordion" data-accordion-group="group1">
        <div class="accordion-head">
          <h2><font face="modern, arial, veranda"><big><big><font face="modern, arial, veranda">Titre b</font></big></big></font></h2>
        </div>
        <div class="accordion-content">
          <ul>
            <li><font face="modern, arial, veranda">1 </font></li>
            <li><font face="modern, arial, veranda">2</font></li>
            <li><font face="modern, arial, veranda">3</font></li>
          </ul>
        </div>
      </div>
      <div class="bbAccordion" data-accordion-group="group1">
        <div class="accordion-head">
          <h2><font face="modern, arial, veranda"><big><big><font face="modern, arial, veranda">Titre c</font></big></big></font></h2>
        </div>
        <div class="accordion-content">
          <ul>
            <li><font face="modern, arial, veranda">1 </font></li>
            <li><font face="modern, arial, veranda">2</font></li>
            <li><font face="modern, arial, veranda">3</font></li>
          </ul>
        </div>
      </div>
      <div class="bbAccordion" data-accordion-group="group1">
        <div class="accordion-head">
          <h2><font face="modern, arial, veranda"><big><big><font face="modern, arial, veranda">Titre d</font></big></big></font></h2>
        </div>
        <div class="accordion-content">
          <ul>
            <li><font face="modern, arial, veranda">1 </font></li>
            <li><font face="modern, arial, veranda">2</font></li>
            <li><font face="modern, arial, veranda">3</font></li>
          </ul>
        </div>
      </div>
      <font face="modern, arial, veranda"><big><big><font face="modern, arial, veranda">
      </font></big></big></font></div>
    </div>

    <!-- Lien -->
    <br>
    <br>
    <div style="text-align: center;">
      <a href="http://www.commentcamarche.net" target="_blank"><big><big><big>Lien</big></big></big>
      </a>
    </div>

    <div id="menu" style="display: none;">
      <ul>
        <li><font face="modern, arial, veranda"><a href="LIEN">titre</a></font></li>
        <li></li>
        <li><font face="modern, arial, veranda"><a href="javascript:history.go(-1)">Page précédente</a></font></li>
      </ul>
    </div>

    <font face="modern, arial, veranda"></font><br>
  </body>
</html>

Réponse 10 / 11

alexis3000 Messages postés 10 Date d'inscription mardi 5 juillet 2016 Statut Membre Dernière intervention 7 juillet 2016
7 juil. 2016 à 08:04

Bonjour,

@jordane45 Un grand merci d'avoir revu le script.

Le phénomène demeure :
- le menu fonctionne de suite
- l'accordéon et le lien ne fonctionnent pas de suite : il n'y a aucun fonctionnement de l'accordéon seul et du lien au chargement de la page :
http://sites.internet.lu/folders/alex_p/essai/essai2.html

Je dois donc cliquer 1 fois sur le menu du haut, revenir sur l'accordéon ou lien lien et seulement alors ceux-ci fonctionnent. Aurais-tu une idée pour revoir ce point ?

A+

PS: (forum : Je ne sais pas pourquoi un ancien post se répète en plus du message que j'envoie, désolé)

jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025 4 731
7 juil. 2016 à 09:08

Je t'assure que le code fonctionne....
si de ton côté ce n'est pas le cas... là je sèche. ...
a moins que...
tu peux t'assurer que le fichier est bien enregistré en utf8-sans bom ?
Tu ajoutes peut être un caractère invisible qui fou le bazars

alexis3000 Messages postés 10 Date d'inscription mardi 5 juillet 2016 Statut Membre Dernière intervention 7 juillet 2016 > jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025
7 juil. 2016 à 09:54

J'ai vérifié, rien n'y fait.

Je n'ai rien changé ou ajouté à ta page : j'ai simplement pris ton code en l'état et copié le tout dans une page html neutre. Donc la page essai2 est exactement ta page.

Suite à ta remarque sur utf8-sans bom, j'ai essayer d'alterner

<meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Sans aucun résultat : comme avant, je dois donc cliquer 1 fois sur le menu du haut, revenir sur l'accordéon ou lien lien et seulement alors ceux-ci fonctionnent.

Hm.... Qu'en penses-tu ?

A+

jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025 4 731 > alexis3000 Messages postés 10 Date d'inscription mardi 5 juillet 2016 Statut Membre Dernière intervention 7 juillet 2016
7 juil. 2016 à 10:09

L'encodage dont je te parle... c'est au niveau de ton EDITEUR de texte qu'il faut le regarder... pas celui déclaré dans ton code html....
Par exemple dans Notepad++ il faut regarder dans le menu "Encodage"

J'ai encodé en UTF-8 et essayé de nouveau : même résultat, aucun clic possible sur l'accordéon et le lien d'entrée de page.

Désolé d'être négatif ...

Utf8 ... sans BOM hein ?
Tu peux mettre cette nouvelle page sur ton serveur et nous en donner le lien ?

Réponse 11 / 11

alexis3000 Messages postés 10 Date d'inscription mardi 5 juillet 2016 Statut Membre Dernière intervention 7 juillet 2016
5 juil. 2016 à 23:00

Bonjour,

@Jordane45
Malheureusement, cela ne fonctionne pas. Par exemple, il faut replacer le code suivant du menu dans le BODY en fin de code :

<script>
$(document).ready(function(){$('#menu ul').sliding_menu_js({
header_title:'TITRE',
header_logo: ""
});
});
</script>

J'ai un peu nettoyé le HEAD, mais fondamentalement je suis revenu à la position initiale, sauf que, bien sûr, les codes du menu et de l'accordéon ne fonctionnent pas ensembles (mais séparément dans l'absence de l'autre, oui);

Les codes sources sont les suivants :
https://www.jqueryscript.net/accordion/Basic-Smooth-jQuery-Accordion-Plugin-bbAccordion.html
https://www.jqueryscript.net/menu/Responsive-Side-Sliding-Menu-with-jQuery-SlidingMenuJs.html

Je remets mon code (un peu nettoyé et augmenté popur l'accordéon). MERCI BEAUCOUP de ton aide !

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html;charset=UTF-8"
 http-equiv="Content-Type">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible"
 content="IE=edge,chrome=1">
  <meta name="viewport"
 content="width=device-width, initial-scale=1">
  <title>TITRE</title>
  <link href="http://fonts.googleapis.com/css?family=Open+Sans"
 rel="stylesheet" type="text/css">
  <link href="script/dist/jquery.bbAccordion.css"
 rel="stylesheet">
  <link href="script/dist/demo.css" rel="stylesheet">
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css"
 rel="stylesheet" type="text/css">
  <style>
body { font-family:'Open Sans';}
  </style><
  <link rel="stylesheet" href="script/jquery.sliding_menu.css">
</head>
<body>
<!-- Menu -->
<div id="menu" style="display: none;">
<ul>
  <li><font face="modern, arial, veranda"><a
 href="LIEN">Accueil</a></font></li>
  <li><font face="modern, arial, veranda"><a
 href="LIEN">LIEN</a></font></li>
  <li><font face="modern, arial, veranda"><a
 href="LIEN">LIEN</a></font></li>
  <li><font face="modern, arial, veranda"><a
 href="LIEN">LIEN</a></font></li>
  <li><font face="modern, arial, veranda"><a
 href="LIEN">LIEN</a></font></li>
  <li><font face="modern, arial, veranda"><a
 href="LIEN">LIEN</a></font></li>
  <li><font face="modern, arial, veranda"><a
 href="LIEN">LIEN</a></font></li>
  <li></li>
  <li><font face="modern, arial, veranda"><a
 href="javascript:history.go(-1)">Page
précédente</a></font></li>
</ul>
</div>
<font face="modern, arial, veranda">
<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script/jquery.sliding_menu.js"></script>
<script>
$(document).ready(function(){$('#menu ul').sliding_menu_js({
header_title:'TITRE',
header_logo: ""
});
});
</script><!-- Accordeon -->
</font>
<div class="jquery-script-clear"></div>
<div class="container" style="margin-top: 100px;">
<div class="wrapper">
<h1 style="color: rgb(153, 0, 0);" class="lmb-10"><font
 face="modern, arial, veranda"><font
 face="modern, arial, veranda"><font
 face="modern, arial, veranda">TITRE GENERAL</font></font></font></h1>
<div class="bbAccordion" data-accordion-group="group1">
<div class="accordion-head">
<h2><font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">A</font></big></big></font></font></h2>
</div>
<div class="accordion-content">
<ul>
  <li><font face="modern, arial, veranda"><font
 face="modern, arial, veranda">1 </font></font></li>
  <li><font face="modern, arial, veranda"><font
 face="modern, arial, veranda">2</font></font></li>
  <li><font face="modern, arial, veranda"><font
 face="modern, arial, veranda">3</font></font></li>
</ul>
</div>
</div>
<div class="bbAccordion" data-accordion-group="group1">
<div class="accordion-head">
<h2><font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">B</font></big></big></font></font></h2>
</div>
<div class="accordion-content">
<ul>
  <li><font face="modern, arial, veranda"><font
 face="modern, arial, veranda">1 </font></font></li>
  <li><font face="modern, arial, veranda"><font
 face="modern, arial, veranda">2</font></font></li>
  <li><font face="modern, arial, veranda"><font
 face="modern, arial, veranda">3</font></font></li>
</ul>
</div>
</div>
<div class="bbAccordion" data-accordion-group="group1">
<div class="accordion-head">
<h2><font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">C</font></big></big></font></font></h2>
</div>
<div class="accordion-content">
<ul>
  <li><font face="modern, arial, veranda"><font
 face="modern, arial, veranda">1 </font></font></li>
  <li><font face="modern, arial, veranda"><font
 face="modern, arial, veranda">2</font></font></li>
  <li><font face="modern, arial, veranda"><font
 face="modern, arial, veranda">3</font></font></li>
</ul>
</div>
</div>
<div class="bbAccordion" data-accordion-group="group1">
<div class="accordion-head">
<h2><font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">D</font></big></big></font></font></h2>
</div>
<div class="accordion-content">
<ul>
  <li><font face="modern, arial, veranda"><font
 face="modern, arial, veranda">1 </font></font></li>
  <li><font face="modern, arial, veranda"><font
 face="modern, arial, veranda">2</font></font></li>
  <li><font face="modern, arial, veranda"><font
 face="modern, arial, veranda">3</font></font></li>
</ul>
</div>
</div>
<div class="bbAccordion" data-accordion-group="group1">
<div style="color: rgb(255, 153, 0);" class="accordion-head">
<h2><font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">E</font></big></big></font></font></h2>
</div>
<div class="accordion-content">
<ul>
  <font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda"> <li>1</li>
  <li>2</li>
  <li>3</li>
  </font> </big></big> </font>
  </font>
</ul>
</div>
</div>
<div class="bbAccordion" data-accordion-group="group1">
<div class="accordion-head">
<h2><font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">F</font></big></big></font></font></h2>
</div>
<div class="accordion-content">
<ul>
  <font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda"> <li>1</li>
  <li>2</li>
  <li>3</li>
  </font> </big></big> </font>
  </font>
</ul>
</div>
</div>
<div class="bbAccordion" data-accordion-group="group1">
<div class="accordion-head">
<h2><font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">G</font></big></big></font></font></h2>
</div>
<div class="accordion-content">
<ul>
</ul>
<div class="accordion-content">
<ul>
  <font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda"> <li>1</li>
  <li>2</li>
  <li>3</li>
  </font> </big></big> </font>
  </font>
</ul>
</div>
<ul>
</ul>
</div>
</div>
<div class="bbAccordion" data-accordion-group="group1">
<div class="accordion-head">
<h2><font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">H</font></big></big></font></font></h2>
</div>
<div class="accordion-content">
<ul>
  <font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda"> <li>1</li>
  <li>2</li>
  <li>3</li>
  </font> </big></big> </font>
  </font>
</ul>
</div>
</div>
<div class="bbAccordion" data-accordion-group="group1">
<div class="accordion-head">
<h2><font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">I</font></big></big></font></font></h2>
</div>
<div class="accordion-content">
<ul>
  <font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda"> <li>1</li>
  <li>2</li>
  <li>3</li>
  </font> </big></big> </font>
  </font>
</ul>
</div>
</div>
<font face="modern, arial, veranda"><font
 face="modern, arial, veranda"><big><big><font
 face="modern, arial, veranda">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script/dist/jquery.bbAccordion.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.bbAccordion').bbAccordion();
});
</script></font></big></big></font></font></div>
</div>
</body>
</html>

Discussions similaires

Voxbone ? qui est-ce ?

Great Teacher Onizuka SAISON 2

3 bip long 2 bip courts

mode d'emploi IPTV XSARIUS Pure2

Le royaume de Ga'Hoole 2