Discussion :

[Prettyletter]

Bonjour,

J'ai fait plusieurs recherches sur le net concernant mon problème mais je n'ai trouvé aucune solution.
J'ai sur ma page une liste à puces, dont l'attribut display est initialement à none, afin que l'on puisse choisir de l'afficher en cliquant sur une petite flèche. J'utilise donc naturellement la fonction show() de jQuery lors du clic sur cette flèche, ce qui fonctionne parfaitement.

En revanche, l'affichage de la liste est assez étrange ; les puces sont absentes et le texte est très moche. Voici une capture d'écran du résultat obtenu lorsque la liste n'est pas cachée initialement, puis du résultat obtenu par la fonction show() :





J'ai trouvé sur le web un article qui proposait une solution pour ce type de problème ; elle consistait à retirer l'attribut "filter" après affichage, mais cela n'a pas fonctionné chez moi. De toute façon, le but est que la liste s'affiche bien directement.

Est-ce que ce problème possède une solution ou est-ce un bug d'Internet Explorer que l'on ne peut tout simplement pas éviter ?

Merci beaucoup


EDIT : Finalement, la suppression de l'attribut "filter" fonctionne, mais en javascript seulement et dans la fonction de callback. En revanche, mes puces ne reviennent pas

[le_chomeur]

Bonjour, aurais tu le code HTML ainsi que la partie jquery incriminée ?

[Prettyletter]

Salut !

Voilà le code HTML de ma liste :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="projectDetails">
	<div class="showDetails"><img src="img/bottomArrow.png" title="Voir les détails" /></div>
	<h1>Exemple de projet</h1>
 
	<ul class="projectDetails">
		<li name="projectType">Type de projet : Exemple de type</li>
		<li name="location">Localisation : Le Havre, France</li>
		<li name="startDate">Date de début : 25/09/2012</li>
		<li name="endDate">Date de fin : 25/03/2014</li>
		<li name="duration">Durée : 18 mois</li>
		<li name="indicator">Indicateur : 1.254</li>
	</ul>
</div>

Et mon code jQuery :

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
 
// Détails du projet
$('.showDetails > img').bind('click', function() {
	var img = $(this);
	if( img.attr('src') == 'img/bottomArrow.png' ) {
		$('.projectDetails').show('slow', function() { this.style.removeAttribute('filter'); });
		img.parent().fadeOut('fast', function() {
			img.attr('src', 'img/topArrow.png');
			img.parent().fadeIn('fast');
		});
	}
	else {
		$('.projectDetails').hide('slow', function() { this.style.removeAttribute('filter'); });
		img.parent().fadeOut('fast', function() {
			img.attr('src', 'img/bottomArrow.png');
			img.parent().fadeIn('fast');
		});
	}		
});

Au niveau du CSS, j'ai laissé les options par défaut à part quelques marges :

Code :

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

1
2
3
4
5
 
#body ul {
	margin-top: 5px;
	margin-bottom: 5px;
}

Voilà

[SpaceFrog]

J'ai déja posté un truc sur le sujet,
Pas de réponse satisfaisante à ce jour pour mon cas particulier, mais tu peux essayer de mettre un background-color:#FFFFFF; au div qui prend le fading ...

http://www.developpez.net/forums/d93...texte-sous-ie/

[Prettyletter]

Malheureusement cette solution ne fait pas réapparaître mes puces. Dommage, je les aimais bien... Tant pis, il n'y en aura pas ! Merci quand même

[SpaceFrog]

Ha ... les puces ...

J'ai aussi rencontré ce cas de figure là ...
Mais je ne me rappelle plus de la solution ..
je recherche ....