Code utilisant jQuery qui ne fonctionne pas sur tous les PCs

Version imprimable

02/11/2013, 11h14
laurentSc

Code utilisant jQuery qui ne fonctionne pas sur tous les PCs

Bonjour,

cette page (http://laurentschmitt18.free.fr/coin...s/expand4.html) tourne bien sur un PC mais pas sur un autre. Y a t-il moyen de le faire marcher ?
02/11/2013, 11h49
arnogues

C'est quoi qui marche pas ?
Tu peux nous spécifier les tests auquels tu procèdes ?
Et quand tu parles de PC, quels sont les navigateurs en question ?
Et est-ce que ces "PC" ouvrent la page avec la même url que tu nous a donné
02/11/2013, 12h15
laurentSc

C'est vrai que je disais rien...Quand ça "marche", on a une liste verticale (pour l'instant, car j'en suis à la phase de mise au point) :

Citation:

ouvrir
ouvrir
ouvrir

et quand on clique sur l'une de ces chaînes de caractères, on déplie le contenu (un div associé qui passe à l'occasion de display:none à display:block ) et le "ouvrir" est transformé en "fermer".

Sinon, pour le navigateur employé, bonne question, car je n'avais essayé que IE8 et avec FF, ça marche.

C'est bien avec l'URL donnée que les navigateurs doivent ouvrir la page et je tiens à ce que ça "marche" avec IE8...
02/11/2013, 12h44
sekaijin

merci de posté les question JQuery dans le forum JQuery

Sans plus de précision ça va être difficile de t'aider.
A+JYT
02/11/2013, 13h56
SylvainPV

Ca devient du foutage de gueule là... :roll:

Enième topic ouvert pour le même problème, des questions ridicules sans aucune information. Tu nous prends pour qui ?

Ne compte plus sur moi pour t'aider

page avec jQuery qui marche pas en IE8 sur tous les PCs

avec le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title></title>
    <style>
      .panel .contenu {
    display:none;    
}
 
.panel.expanded .contenu {
    display:block;
    position:absolute;
    background: #CCC;
    padding: 1em;
}
 
.panel .panel-toggle-btn:before {
    content:"Ouvrir";
}
 
.panel.expanded .panel-toggle-btn:before {
    content:"Fermer";
}
.classul li {
list-style:none;
}
</style>
 
 
    <script>function expand($panelToOpen){
  $(".panel").not($panelToOpen).removeClass("expanded");
  $panelToOpen.toggleClass("expanded");  
}
 
function init() {
    var panelToExpand = 4;//Déplie le premier panel par défaut
    var match = window.location.hash.match(/expanded=(\d+)/);
    if(match != null && match[1] != null){
        panelToExpand = parseInt(match[1]);      
    }  
    expand( $(".panel").eq(panelToExpand) );
    
    $(".panel").each(function(p){
        $(this).find('.panel-toggle-btn').on('click', function(e){
            e.preventDefault();
            expand( $(this).closest('.panel') );
            window.location.hash = "expanded="+p;
        });
    });
};
 
</script>
 
  </head>
  <body>
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
  <script>window.onload=init;</script>
 
 <section class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      <ul class="classul"><li>test1</li>
	  <li>test1</li>
	  <li>test1</li>
	  </ul>
  </div>
  </section>
  <section class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      test2
  </div>
  </section>
  <section class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      test3
  </div>
  </section>
 
  </body>
 
</html>

ne marche pas sous IE8 sur un PC (mais avec FF, oui)(alors que sous un autre PC, aucun problème)

Ne pas marcher signifie : on a une liste verticale (pour l'instant, car j'en suis à la phase de mise au point) :

Citation:

ouvrir
ouvrir
ouvrir

et quand on clique sur l'une de ces chaînes de caractères, on déplie le contenu (un div associé qui passe à l'occasion de display:none à display:block ) et le "ouvrir" est transformé en "fermer".

Comment faire marcher ceci sous IE8 ?

02/11/2013, 14h10
laurentSc

J'espère avoir donner plus d'informations.
et désolé que ça passe mal, car je ne me fous de personne...
02/11/2013, 14h11
danielhagnoul

Bonjour

Avec <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script> c'est normal !

Il faut utiliser la branche 1, actuellement la version 1.10.2, pour être compatible avec les navigateurs obsolètes.
02/11/2013, 14h59
laurentSc

Si j'utilise la branche 1, y a effectivement un peu de mieux, mais c'est pas encore ça, vu qu'il n'y a toujours pas de lien sur les chaines de caractères...:(
02/11/2013, 17h42
NoSmoking

Bonjour,
Laurent je pense qu'il faudrait que tu arrêtes de te disperser, mais il me semble l'avoir déjà écrit.
Termine ton apprentissage du HTML et du CSS avant de t’attaquer à jQuery qui quoiqu'il arrive requière de bonnes bases en javascript, à mon sens, pour éviter de perdre trop de temps et je sais que le tien est compté ;)
02/11/2013, 23h45
laurentSc

OK, NoSmoking ; quand je dis que je n'ai pas beaucoup de temps, je veux dire que je n'ai pas 100% de mon temps à consacrer au web mais environ 50%.
OK, je vais tenter d'atteindre mon besoin avec que du html , du CSS et probablement du js (simple, sans jQuery). Et travailler sur un cas concret me semble une bonne méthode d'apprentissage (et d'une pierre 2 coups ;))
03/11/2013, 09h18
NoSmoking

Citation:

Envoyé par laurentSc

...je veux dire que je n'ai pas 100% de mon temps à consacrer au web mais environ 50%.

grand veinard :ptdr:

Les erreurs que tu commets sont ELEMENTAIRES.
On ne peut pas repeindre sa voiture tant que l'on n'a pas acheté la peinture, en l’occurrence tu utilises des objets/function d'une bibliothèque avant de l'avoir déclaré dans ton document.

:faq: Où dois-je placer mon code ?

Concernant le HTML, tu utilises des balises SECTION apparues avec HTML5 dans un navigateur qui ne les reconnait pas, IE8.
Il te faudrait utiliser un "HTML5 Cross Browser Polyfills" (ne perd pas de temps là dessus, tu verras plus tard...).

Dernier point cette approche n'est pas la meilleur mais il me semble de SylvainPV t'avait déjà prévenu ;).

Citation:

Envoyé par SylvainPV

J'ai juste rajouté position:absolute au contenu déroulé des menus pour qu'ils s'affichent par dessus le contenu existant. Personnellement je préfère ma première approche question ergonomie.
03/11/2013, 10h17
laurentSc

Citation:

grand veinard

Si tu savais pourquoi j'ai tout ce temps, tu changerais sûrement d'opinion, mais je ne vais pas étaler ma vie privée ici...

Citation:

en l’occurrence tu utilises des objets/function d'une bibliothèque avant de l'avoir déclaré dans ton document.

Je ne comprends pas vu que le chargement est en tête du body...

Citation:

Concernant le HTML, tu utilises des balises SECTION apparues avec HTML5 dans un navigateur qui ne les reconnait pas, IE8.

J'ai remplacé ces balises par des div et ça a l'air mieux en effet, mais les fonctions jQuery ne sont toujours pas appelées...(A mon avis, quand j'aurais compris ta remarque ci-dessus, ça ira mieux). Et d'autre part, sur un autre PC, tout ça marche bien avec IE8...

Citation:

Dernier point cette approche n'est pas la meilleur mais il me semble de SylvainPV t'avait déjà prévenu

La remarque de SylvainPV concerne l'ergonomie, et honnêtement, je ne partage pas son opinion (au lieu de recouvrir l'existant, quand on étirait un contenu, ça décalait tout, et ça je voudrais l'éviter)
05/11/2013, 00h20
laurentSc

jreaux62 a résolu le problème ici.