Discussion :

[Invité]

Bonjour.

Code :

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

1
2
3
4
5
6
 
menu.addEventListener('click', function() {
		$('#welcome').dequeue(true).animate({height: 'toggle', opacity: '0'},300);
		document.getElementById('menu').setAttribute('style','display: block');
		//$('#book').css({display: 'block'});
}, false);

Code :

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

1
2
3
 
<div id="welcome">Accueil</div>
<div id="menu">Menu</div>

Je ne comprends pas ce qu'il y a de mauvais avec ce code Javascript. Je veux afficher la div #menu, dont le display est défini à none dans le code CSS, après l'effacement de la div #welcome. J'ai essayé un code alternatif (en commentaire).

Sauriez-vous comment faire ?

Merci.

[Macmillenium]

Code javascript :

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

1
2
3
4
5
 
$('#welcome').click(function() {
		$('#welcome').dequeue(true).animate({height: 'toggle', opacity: '0'},300);
		$('#menu').css('display','block');
});

[Invité]

Ca ne change rien de mon côté, j'avais déjà essayé cette syntaxe.

En fait, quand je crée des exemples tout simples (comme ci-dessous) dans une page vierge, de multiples combinaisons de jQuery avec le DOM-2 fonctionnent.

Le problème, c'est que sur ma page web, ça coince.

Par exemple, avec le code suivant, je suis obligé de cliquer deux fois sur la div #menu pour que les fonctions soient exécutées:
- une première fois pour ramener la div #content à 200px et fixer son opacité à 50%
- une deuxième fois pour colorer en bleu le texte de la div #content :

Code :

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

1
2
3
4
5
6
7
 
menu = document.getElementById('menu');
content = document.getElementById('content');
 
menu.addEventListener('click', function() {
		$('#content').animate({height: '200px', opacity: '0.5'},200,function() {$('#content').css({color: 'blue'});});
		}, false);

J'ai essayé avec d'autres codes, comme celui-ci :

Code :

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

1
2
3
4
5
 
$('#menu').click(function() {
		$('#content').animate({height: '200px', opacity: '0.5'},200);
		$('#content').css('color', 'blue');
});

En les utilisant sur des pages vierges, ça fonctionne. Le problème ne semble pas venir d'un conflit entre DOM-2 et jQuery.

Est-ce que vous avez déjà eu ce type de souci ? D'où cela peut provenir dans une page web?
[je ne fournis volontairement pas mon code, il est beaucoup trop long]

[danielhagnoul]

Bonsoir

Difficile de comprendre le problème sans le vrai code puisque les codes de tests ne reproduisent pas votre problème. Le mieux serait de fournir un lien vers votre page de test.

[Invité]

J'ai compris hier soir d'où venait mon problème grâce à la réponse d'un membre sur un autre sujet, dans la partie Javascript.
Lire cette réponse.

J'utilisais, en mode debug, document.body.innerHTML += 'texte...' au lieu de manipuler correctement le DOM.

Depuis, j'ai enlevé tous les innerHTML qui portaient sur le body (et même d'autres), et ça fonctionne.