[Résolu] Afficher / Cacher div

(reprise du message précédent)

Autant pour moi... Je viens d'éditer le code... (Je n'avais pas testé et il y a avait une petite erreur dans les noms de variables)

C'est corrigé.

Pourquoi créer un h2 ? Ce n'est pas cliquable ce qui fait que dès lors, tu empêches ceux qui naviguent au clavier d'y accéder.

Si ce n'est que pour l'apparence du lien, tu peux la changer via CSS.

Bonsoir,

Merci, il marche bien ce code.
Je voulais attribuer h2 pour justement lui donner des paramètres CSS (position).
Car, comme expliqué plus haut, je voulais mettre un titre comme <h1>Ma liste</h1> puis afficher ma liste en dessous. Comme tu me dis, le lien s'insère juste au dessus de l'élément que je souhaite contrôler. Je pensais qu'il serait plus facile d'apporter un style css à h2 pour le positionner comme ceci:

[Titre] Ma liste - [Lien] Cacher
-------------------------------
[Liste] Lien
[Liste] Lien
[Liste] Lien

Avoir le Titre et Le Lien de changement d'état comme cela pour cacher la Liste. Ou alors en appliquant une classe à l'élément a en javascript pour le positionner à l'aide de css ?

PS: Pour les cookies, ça semble faisable avec le lien donnée plus haut ?

EDIT: Pourquoi le code ne fonctionne plus lorsque j'ai onload="document.forms['formrecherche'].elements['recherche'].focus()" dans la balise body ?

En tout cas merci pour l'aide
A bientôt,
Modifié par nonoteam (09 Jan 2007 - 23:09)

Bonjour,

Comment créer une classe sur l'élément a ?
Aussi pourquoi le code ne fonctionne plus lorsque je place le curseur automatiquement dans un champs ?

onload="document.forms['formrecherche'].elements['recherche'].focus()"

Merci,
A bientôt,

Tu ne peux pas avec createTextNode, pour faire çà tu peux utiliser innerHTML ou alors faire une fonction qui va créer cette balise <img> en lui passant des arguments ...

Ah ok, mais le problème c'est que j'en ai d'autre à remplacer comme:

function Display(sIdCont, sId)

{	

	document.forms['formrecherche'].elements['recherche'].focus();

	var oElem = document.getElementById(sId),

	oA = document.createElement('a'),

	[b]oTxt = document.createTextNode('+');[/b]

	oA.href = '#montrer';

	oA.appendChild(oTxt);

	document.getElementById(sIdCont).insertBefore(oA, oElem);

	

	oElem.className = 'cache';

	oA.className = 'showfav';

	oA.onclick = function()

	{

		[b]if(this.firstChild.data === '+')[/b]

		{

			[b]this.firstChild.data = '-';[/b]

			this.href = '#cacher';

		}

		else

		{

			[b]this.firstChild.data = '+';[/b]

			this.href = '#montrer';

		}

		oElem.className = oElem.className === 'cache' ? '' : 'cache';

		return false;

	}

}

window.onload = function() { Display('favglobal', 'favoris'); };

Mettre une image à la place de - ou + en fait.
innerHTML je vois pas trop, ca peut se faire avec createElement ?
Modifié par nonoteam (12 Jan 2007 - 21:56)

nonoteam a écrit :
Mettre une image à la place de - ou + en fait.
innerHTML je vois pas trop, ca peut se faire avec createElement ?

Les CSS sont bien plus adaptées pour gérer ce genre de problèmes.

Julien Royer a écrit :
Les CSS sont bien plus adaptées pour gérer ce genre de problèmes.

Ah ? C'est à dire ?
Je ne vois vraiment pas comment remplacer le + dans oTxt = document.createTextNode('+'); par une image avec css ?

Merci,

nonoteam a écrit :
Ah ? C'est à dire ?
Je ne vois vraiment pas comment remplacer le + dans oTxt = document.createTextNode('+'); par une image avec css ?

Il te suffit de changer la classe (comme tu le fais pour oElem) et d'appliquer un style aux deux classes dans ton code CSS (en clair, une image de fond différente pour chaque).

Bon, Je viens de faire comme ceci:

function Display(sIdCont, sId)
{	
	document.forms['formrecherche'].elements['recherche'].focus();
	var oElem = document.getElementById(sId),
	oA = document.createElement('a'),
	oTxt = document.createTextNode('');
	oA.href = '#montrer';
	oA.appendChild(oTxt);
	document.getElementById(sIdCont).insertBefore(oA, oElem);
	
	oElem.className = 'cache';
	oA.className = 'showfav';
	oA.onclick = function()
	{
		if(this.firstChild.data === '+')
		{
			this.firstChild.data = '';
			this.href = '#cacher';
			this.className = 'hidefav';
		}
		else
		{
			this.firstChild.data = '';
			this.href = '#montrer';
			this.className = 'hidefav';
		}
		oElem.className = oElem.className === 'cache' ? '' : 'cache';
		return false;
	}
}
window.onload = function() { Display('favglobal', 'favoris'); };



.showfav {
margin: 0;
padding: 0;
float: right;
background-image: url(plus.gif);
width: 20px;
height: 20px;
}

.hidefav {
margin: 0;
padding: 0;
float: right;
background-image: url(moins.gif);
width: 20px;
height: 20px;
}

Voilà, je viens de modifier de cette facon, au debut j'ai bien showfav (image signe +), je clique et la j'ai bien hidefav (image signe -) par contre quand je re clique dessus, l'image de revient pas à 'plus'.

Sûrement parce que la condition if(this.firstChild.data === '+') n'est plus vérifiée puisque oTxt est vide oTxt = document.createTextNode('');

Est ce que ca vient de la ?
Merci,

Ca marche bien si je fait comme cela:

[b]Txt = document.createTextNode('+');[/b]
	oA.href = '#montrer';
	oA.appendChild(oTxt);
	document.getElementById(sIdCont).insertBefore(oA, oElem);
	
	oElem.className = 'cache';
	oA.className = 'showfav';
	oA.onclick = function()
	{
		[b]if(this.firstChild.data === '+')[/b]
		{
			[b]this.firstChild.data = '-';[/b]
			this.href = '#cacher';
			this.className = 'hidefav';
		}
		else
		{
			[b]this.firstChild.data = '+';[/b]
			this.href = '#montrer';
			this.className = 'showfav';
		}

mais biensur il apparait les + et - par dessus les images.
Modifié par nonoteam (12 Jan 2007 - 22:48)

Salut,

Aurais-tu un exemple en ligne ? Ce serait plus facile pour comprendre ce que tu souhaites...

A priori, ton problème n'est plus que d'ordre CSS.

Aie non je ne peux rien mettre en ligne pour le moment.
Je le ferais demain si jamais ce n'est pas résolu avant.

En fait, j'ai deux classes:

showfav => Image symbolisant le 'plus (+)'
hidefav => Image symbolisant le 'moins (-)'

Voici mon code final :

function Display(sIdCont, sId)
{	
	document.forms['formrecherche'].elements['recherche'].focus();
	var oElem = document.getElementById(sId),
	oA = document.createElement('a'),
	oTxt = document.createTextNode('+');
	oA.href = '#montrer';
	oA.appendChild(oTxt);
	document.getElementById(sIdCont).insertBefore(oA, oElem);
	
	oElem.className = 'cache';
	oA.className = 'showfav';
	oA.onclick = function()
	{
		if(this.firstChild.data === '+')
		{
			this.firstChild.data = '-';
			this.href = '#cacher';
			this.className = 'hidefav';
		}
		else
		{
			this.firstChild.data = '+';
			this.href = '#montrer';
			this.className = 'showfav';
		}
		oElem.className = oElem.className === 'cache' ? '' : 'cache';
		return false;
	}
}
window.onload = function() { Display('favglobal', 'favoris'); };

J'ai donc rajouté ma classe au différents éléments (this.className = 'hidefav'; ou encore this.className = 'showfav';).

C'est à dire qu'il y a les images en guise de lien pour cacher et afficher le contenu, mais il y a malgré tout encore le + ou le - par dessus l'image (oTxt = document.createTextNode('+'); ou encore this.firstChild.data = '-';)

Et j'aimerais pouvoir les supprimer pour ne garder que les images.
Le problème c'est que si je les enlève, la condition if(this.firstChild.data === '+') n'est plus respectée.

Peut être qu'il faudrait essayer de passer la valeur + ou - pour verifier la condition par une astuce 'invisible' (c'est à dire pas un TextNode)

Voilà voilà,
Merci

Pourquoi ne crées-tu pas une image plutôt que du texte dans ce cas ? Tu peux parfaitement générer un code du type :

<a href="#"><img src="image.png" width="10" height="10" alt="+" /></a>

via JS et faire ton test sur le alt (this.firstChild.alt === '+')

C'est ce que j'avais poster plus haut mais je ne savais pas quel fonction utiliser. J'avais ca

oTxt = document.createTextNode('<img src="images/plus.gif" alt="Afficher" border="0" />');

mais on m'a dit d'utiliser innerHTML, je vois pas comment.

koala64 a écrit :
Pourquoi ne crées-tu pas une image plutôt que du texte dans ce cas ?

C'est de ma faute, j'ai dit n'importe quoi. Je vais me coucher, bonne nuit.

Pour innerHTML, je pense qu'il faut déjà que tu regardes comment on s'en sert.
Sur le net, tu trouveras à peu près 4 millions d'exemples. De là, tu devrais y arriver.

PS : Je ne te donne pas la réponse direct parce que c'est une habitude à prendre que de faire une recherche avant de poser la question sur les forums. Tu verras que grâce à ça, tu vas résoudre les 3/4 de tes problèmes. (sans blague)

Ouaip je sais, depuis le debut du post j'ai trouver pas mal de truc en fouillant un peu partout des fois
Je voulais juste savoir si c'etait bien innerHTML à utiliser avec la methode que tu semblais dire juste avant.
Je verai ca demain, je vais me coucher je suis crevé.
Bonne nuit et merci !

Bonsoir,

J'ai essayé de plusieurs facons avec innerHTML sans sucées.

oA = document.innerHTML('<a href="#montrer" class="aff_img"></a>'),
	document.getElementById(sIdCont).insertBefore(oA, oElem);

En fait j'aimerais bien garder l'élément a qui me permet de faire un rollover sur l'image mais enlever ce '+ ou -'.

Sinon j'ai remarqué un problème assez important, le script ne fonctionne plus lorsque que j'ai plusieurs div avec le même id (pour les cacher).

Merci,
Modifié par nonoteam (13 Jan 2007 - 22:13)

Pas d'idée ?

Je fais comme cela pour pouvoir cacher mes divs:

function Display(sIdCont, sId)
{	
	document.forms['formrecherche'].elements['recherche'].focus();
	var oElem = document.getElementById(sId),
	oA = document.createElement('a'),
	oTxt = document.createTextNode('+');
	oA.href = '#montrer';
	oA.appendChild(oTxt);
	document.getElementById(sIdCont).insertBefore(oA, oElem);
	
	oElem.className = 'cache';
	oA.className = 'showfav';
	oA.onclick = function()
	{
		if(this.firstChild.data === '+')
		{
			this.firstChild.data = '-';
			this.href = '#cacher';
			this.className = 'hidefav';
		}
		else
		{
			this.firstChild.data = '+';
			this.href = '#montrer';
			this.className = 'showfav';
		}
		oElem.className = oElem.className === 'cache' ? '' : 'cache';
		return false;
	}
}
window.onload = function() { Display('favglobal', 'liste1'); };
window.onload = function() { Display('favglobal', 'liste2'); };

J'aimerais pouvoir cacher les 2 uls (pas d'un coup biensur, seulement si le clique est pour lui).

<div id="favglobal">
<h1>Ma liste 1</h1>
<ul id="liste1">
<li>Lien 1</li>
<li>Lien 2</li>
<li>Lien 3</li>
</ul>
</div>

<div id="favglobal">
<h1>Ma liste 2</h1>
<ul id="liste2">
<li>Lien 1</li>
<li>Lien 2</li>
<li>Lien 3</li>
</ul>
</div>

Pourquoi cela ne fonctionne pas ? C'est bien ce principe sur http://www.editeurjavascript.com/scripts/scripts_navigation_3_182.php non ?

Sinon pour enlever + et - je men sors pas, innerHTML du dessus ne fonctionne pas.

Merci,
A bientôt,

Salut j'ai trouvé j'ai fait comme ca:

window.onload = function()
				{ 
					Display('div1', 'ul1');
					Display('div2', 'ul2');
				};

Mais il faut obligatoirement que les id soient différents. Pourtant dans ma page css je n'ai pas envie de faire #div1, #div2, #div3, #div4 et #ul1, #ul2... avec le même style surtout que le nombre de blocs div sur ma page peu varié, je ne le connais pas par avance.

Alors je ne vois pas trop comment faire:

- avoir #div dans mon css mais qu'il soit reconnu avoir n'importe quel chiffre derrière (#div14...) (les compteurs ? ah non) ?