IE7 et la fonction show()

Version imprimable

27/03/2012, 08h21
Prettyletter

IE7 et la fonction show()

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() :

http://img339.imageshack.us/img339/5720/capturebug.jpg

http://img171.imageshack.us/img171/6819/capturebug2.jpg

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 :(
27/03/2012, 14h27
le_chomeur

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

Salut !

Voilà le code HTML de ma liste :

Code:

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:

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:

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

Voilà :)

27/03/2012, 16h10
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/
27/03/2012, 16h27
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 :)
27/03/2012, 16h29
SpaceFrog

Ha ... :oops: les puces ...

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

il faut rétablir un margin pour IE

Code:

1
2
3
4
5
6
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', function(){img.parent().parent().find('ul li').css( {"margin-left":"20px"}) });
		});

28/03/2012, 08h24
Prettyletter

Super, merci beaucoup :) J'ai mis le bout de code que tu as rajouté avant la fonction de callback pour que les puces apparaissent quand la liste est encore cachée et ça fonctionne.

Merci et à bientôt ;)