Discussion :

[Awa2i]

Bonjour à tous,

Je suis actuellement confronté au problème suivant:
Je dois adapter un site web à IE, celui-ci étant déjà terminé et fonctionnant parfaitement sous FF, Chrome, Opéra et Safari.
Je vous laisse tester le site sous chrome/Firefox puis sous IE (l'affichage est à peu près le même pour ces deux navigateurs): ici

Les bulles sur le coté près du personnage violet ne changent plus de taille et les éléments cliquables et concernés par du Javascript (par des changements d'apparences) sont encadré (alors qu'ils ne sont pas censés l'être. Sans parler de certaines bulles de texte sur le site qui deviennent transparentes alors qu'elles sont censées être opaques.
Enfin, sur la toute droite du site, il y a un bandeau violet dont je n'explique pas l'apparition.

Je suis maintenant quasi-certain que c'est un problème de Javascript (mais peut être pas pour le problème d'opacité et de bandeau violet, à confirmer).

Avez vous une solution ? J'avoue ne pas être très compétent dans le domaine, et qu'un peu d'aide ne me ferait pas de mal !

Merci d'avance.

[dkmix]

Bonjour,
Avez-vous essayé avec une version plus récente de jquery (1.4.2 -> 1.8.3) ?

[DrDarko]

Bon maintenant que c'est dans la bonne rubrique je vais pouvoir poser mes questions concernant le code (tout les bouts de code que je cite sont extraits du lien mis dans le 1er poste) :

1ere question : Quelle est l'utilité de faire un setTimeout de 0?? par exemple dans ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
			setTimeout( 
				function()
				{
					document.getElementById('bigcontain').style.opacity= 0;
				}
			, 0); 
			setTimeout( 
				function()
				{
					document.getElementById('bigcontain').style.opacity= 1;
				}
			, 1000);

Je suis assez perplexe si quelqu'un pouvait m'expliquer. J'ai trouver ceci http://stackoverflow.com/questions/8...settimeoutfn-1 qui dit en gros qu'il y a un délai minimum dans tout les cas. Mais bon j'aimerai avoir des explications si quelqu'un les détient.

2eme question : Est-il utile de faire de l'enchaînement de $(document).ready de ce style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(document).ready(function()
		{
			<!--Firefox-->
			if($.browser.mozilla) 
			{
				$(document).ready
				(
					function()
					{		
						$('#slide').parallax("left", 1.5, 0, true);
					}
				)
				$(document).ready
				(
					function()
					{
						var deck = new $.scrolldeck
						(
							{
								buttons: '.nav-button',
								easing: 'easeInOutExpo'
							}
						);
					}
				);
			}
                        ...... // code pour les autres navigateurs (très semblable à celui situé ci-dessus.
		});

Ici on peut voir qu'il fait 3 $(document).ready à la suite. En gros ce que je me demande c'est : on a attendu que le DOM soit prêt pour lancer la fonction, une fois qu'il est prêt on lui redemande s'il est prêt... Est ce qu'il y a une utilité?

[NoSmoking]

Bonjour,
plusieurs remarque pour commencer
les commentaires <!-- Firefox --> ne sont pas le meilleur entre les balises <script> et </script>, mais bon..

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
// pour commentaires de la ligne
/* 
   pour mettre en commentaire un bloc
*/

pourquoi tester les navigateurs pour faire la même chose quoiqu'il arrive ?

un $(document).ready(function() dans un $(document).ready(function() c'est du grand luxe qui ne sert pas à grand chose.

Quant à utiliser jQuery autant l'utiliser entièreme, donc exit les document.getElementById('menusmartphone').style.height=hauteur; par exemple.

Les fonctions sont factorisables quand elles font la même choses function changequoi(), function changequoi2(), ce n'est jamais une bonne méthode.

Bon je dois admettre que je n'ai pas regardé plus avant, mais un nettoyage permettrait d'y voir plus clair et de mieux cerner ton soucis, sachant que pas mal de chose peuvent se régler directement en CSS, je pense au test sur la largeur du document.

[Bovino]

Avez vous une solution ?

Une solution à quoi ?

Rendre ton site compatible IE ? Oui, nous sommes nombreux à pouvoir le faire, mais c'est du travail, alors le devis, on l'envoie où ?

Que veux-tu que l'on te réponde quand tu te contentes de balancer l'adresse d'un site en disant "c'est pas compatible IE, comment faire ?"

je vais pouvoir poser mes questions concernant le code

Non ! Ce ne sont pas tes questions mais les remarques qui t'ont été faites dans ta discussion précédente !

[DrDarko]

Non ! Ce ne sont pas tes questions mais les remarques qui t'ont été faites dans ta discussion précédente !

Non c'est moi qui avait fait ces remarques et j'étais pas sur de ce que j'avançais du coup maintenant que le poste est dans le bon topique j'en profite pour poser mes questions.

[Bovino]

Arf... au temps pour moi, j'en suis désolé...

Quelle est l'utilité de faire un setTimeout de 0??

Il s'agit d'une subtilité liée à setTimeout().
Effectivement, bien que la précision se soit améliorée depuis quelques temps, il y a effectivement un seuil en-dessous duquel la durée ne peut pas être assurée. Par exemple, une valeur 1 ne sera à priori jamais respéctée.
En revanche, la valeur 0 permet de lancer la fonction de rappel dès que la pile d'instructions en cours a fini son exécution. Concrètement, les cas où cela se révèle utile sont rares, mais existent bel et bien.

Est-il utile de faire de l'enchaînement de $(document).ready de ce style

Non, c'est même relativement maladroit (et ça démontre une certaine méconnaissance du fonctionnement de jQuery) mais ce n'est pas faux pour autant : jQuery prevoit que si le DOM est déjà chargé au moment du $(document).ready(), alors le callback est exécuté instantanément. A l'inverse, le callback de window.onload() par exemple ne sera pas exécuté si l'instruction est rencontrée après que l'événement ait été déclenché.
Enfin, il est préférable d'utiliser jQuery(function($){...}) plutôt que $(document).ready(), même si ce sont des notations équivalentes.

[DrDarko]

Merci Bovino, c'est un beaucoup plus clair maintenant.

Pour l'histoire du setTimeout de 0 ça m’étonnerai qu'il l'utilise ça à bon escient. Car vu comment le reste du code est dégueulasse...

Je pense que tu devrais suivre le conseil de NoSmoking :

Quant à utiliser jQuery autant l'utiliser entièrement

Car de toute manière toute la partie JavaScript est à revoir (supprimer et refaire)...
Ça te permettra de maîtriser le jQuery, de régler les histoires de compatibilité et de plus d'avoir un truc propre en cas d’éventuelle maintenance.

[Bovino]

Pour l'histoire du setTimeout de 0 ça m’étonnerai qu'il l'utilise ça à bon escient.

J'ai pas beaucoup de doutes non plus là-dessus !

[Awa2i]

Une solution à quoi ?

Rendre ton site compatible IE ? Oui, nous sommes nombreux à pouvoir le faire, mais c'est du travail, alors le devis, on l'envoie où ?

Parce que tu fais payer tes conseils sur ce forum ?
Je demande simplement un peu d'aide, pas qu'on me ponde le code tel quel, mais qu'on m'aiguille, qu'on me file des pistes, qu'on me dise "ça, c'est pas supporté par IE" si c'est le cas, qu'on m'aide quoi, pas qu'on fasse le truc à ma place.

Que veux-tu que l'on te réponde quand tu te contentes de balancer l'adresse d'un site en disant "c'est pas compatible IE, comment faire ?"

Je ne me suis pas contenté de dire ça, j'ai donné les problèmes que j'avais sous IE et pas sur les autres navigateurs, à partir de là, j'attends juste de l'aide. Mais si ça te gonfle, tu n'es pas obligé de le faire, des personnes comme DrDarko qui sont un peu plus aimables pourront le faire.

[Awa2i]

Bonjour,
Avez-vous essayé avec une version plus récente de jquery (1.4.2 -> 1.8.3) ?

Non.
Comme je le précise dans le premier message, je n'ai pas développé ce site.
Mais il est vrai que je n'avais pas pensé à ça.

Mais si c'était un problème de version JQuery, est-ce que ça ne toucherait qu'IE ?

[dkmix]

No sé

[NoSmoking]

tu fais des appels à des
- set_opacity('bigcontain',100);.
- document.getElementById('bigcontain').
alors qu'il n'y a aucun élément ayant comme id 'bigcontain'.

Pour les innombrables onmouseout/over une gestion via le CSS allégerait très largement ton code.