11523 sujets

JavaScript, DOM et API Web HTML5

Afficher/masquer des blocs

Bonsoir Smiley smile

Je reviens vers vous afin d'avoir un peu d'aide dans la façon d'afficher/masquer un bloc de texte sur un page.
J'ai pu trouver pas mal de chose sur le Web mais a chaque fois soit le code ne semblait pas très propre (Html validator de Firefox), soit il manquait quelque chose Smiley ohwell

Mais je viens de trouver un Cv en ligne/site qui fait EXACTEMENT ce que je cherche à faire....malheureusement je suis un peu bidouilleur en html et css et ne comprends pas trop comment reproduire cela Smiley confused je vois bien l'utilisation du scripts/view-hide.js, de <body onload="hideLiens();">,mais après cela devient le grand trou noir Smiley sweatdrop

Quelqu'un aurait-il le courage de m'expliquer comment le script/la fonction/le css permet de réaliser l'effet Afficher/masquer ou tout du moins m'aiguiller dans ma recherche ...


En attendant vos nombreuses réponses : bonne fin d'année à vous tous Smiley lol
Bonjour,

Voici un script basé sur une solution de koala64 qui produit l'effet recherché:


[#black][b]HTML[/b][/#]


<h2 id="LabelAbout">À propos</h2>

<div id="about" class="show">
	
Contenu de ma division "about".
La classe "show" sert à afficher par défaut le contenu ciblé.
Il peut être omis ou appliqué ailleurs.

</div>

<h2 id="LabelProjects">Réalisations</h2>

<div id="projects">

Contenu de la division "projects".

</div>



[#black][b]CSS[/b][/#]


a {display:block;}

.hide {display:none;}

.show {display:block;}



[#black][b]JavaScript[/b][/#]


function Init(label, id) {
    
	var oContent = document.getElementById(id);
	
	if(oContent.className != 'show')
        oContent.className = 'hide';
	    
	var oTitle = document.getElementById(label), oA = document.createElement('a'),
	    oTxtA = document.createTextNode(oTitle.firstChild.nodeValue);
	oA.href= '#';
	oA.appendChild(oTxtA);
	document.body.replaceChild(oA, oTitle);
	oA.onclick = function() { Display(id); return false; };
};

function Display(id) {
	var oContent = document.getElementById(id);
	oContent.className = (oContent.className == 'hide') ? 'show' : 'hide';
}

window.onload = function() {
   

// -----------------------------------------------
// Liste des titres et des contenus correspondants
// -----------------------------------------------


	Init('LabelAbout', 'about');

	Init('LabelProjects', 'projects');
		

};
Modérateur
Salut, Smiley smile

On peut améliorer un peu ce script en passant par la gestion d'évènements via DOM2 et en évitant de contraindre les éléments à avoir un identifiant.

Je laisse un petit script qui devrait te rappeler quelque chose, Benjamin... Smiley ravi

(x)html
<h1>Aliments</h1>
<div>
	<h2 id="CtrlFruits">Fruits</h2>
	<ul id="fruits" class="montre">
		<li>Kiwi</li>
		<li>Poire</li>
		<li>Fraise</li>
		<li>Banane</li>
		<li>Mangue</li>
	</ul>
	<h2 id="CtrlLegumes">Légumes</h2>
	<ul>
		<li>Haricots</li>
		<li>Carottes</li>
		<li>Artichauts</li>
		<li>Riz</li>
		<li>Salade</li>
	</ul>
</div>

css
a, .montre { display: block; }
.cache { display: none; }

js
(function() {

[#blue]// Affecte un gestionnaire d'événement à un élément[/#]
function connect(oElem, sEvType, fn, bCapture) {
	return document.addEventListener ?
		oElem.addEventListener(sEvType, fn, bCapture || false):
		oElem.attachEvent ?
			oElem.attachEvent('on' + sEvType, fn):
			false;
}

[#blue]// Annule l'action normale et la propagation d'un clic[/#]
function cancelClick(e) {
	if(e && e.stopPropagation && e.preventDefault) {
		e.stopPropagation();
		e.preventDefault();
	}
	else if(e && window.event) {
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	}
	return false;
}

[#blue]// A partir d'un élément de contrôle et d'un contrôlé, affecte la fonction toggle[/#]
function addToggle() {
	var iArg = arguments.length;
	do {
		var oCtrl = arguments[--iArg]['ctrl'];
		if(!oCtrl || typeof (oCtrl) != 'object' || oCtrl.nodeType != 1)
			continue;
		if(oCtrl.nodeName.toLowerCase() != 'a') {
			oCtrl.innerHTML = '<a href="#">' + oCtrl.innerHTML + '</a>';
			oCtrl = oCtrl.firstChild;
		}
		connect(oCtrl, 'click', toggle(arguments[iArg]['el']));
	}
	while(iArg > 0);
}

[#blue]// Montre/Cache un élément donné[/#]
function toggle(oEl) {
	if(oEl.className != 'montre')
		oEl.className = 'cache';
	return function(e) {
		oEl.className = oEl.className == 'cache' ? 'montre' : 'cache';
		return cancelClick(e);
	};
}

[#blue]// Retourne un élément[/#]
function $() {
	return arguments.length == 1 ?
		document.getElementById(arguments[0]) :
		arguments[0].getElementsByTagName(arguments[1])[arguments[2] || 0];
}

[#blue]// Affecte les actions au chargement de la page[/#]
connect(
	window, 'load',
	function() {
		return addToggle(
			{ 'ctrl': $(document, 'h1'), 'el': $(document, 'div') },
			{ 'ctrl': $('CtrlFruits'), 'el': $('fruits') },
			{ 'ctrl': $('CtrlLegumes'), 'el': $(document, 'ul', 1) }
		);
	}
);

})();
Bonjour et merci beaucoup pour vos réponses, je regarderai cela ce soir après le boulot Smiley cligne et vous dirai ce que j'en comprends Smiley biggrin
Bonjour à tous et merci pour ces scripts. Ca fait quatre jours que je cherche une solution pour intégrer correctement cette fonction afficher/masquer dans ma page, mais voilà... ça ne fonctionne pas.

Avec le modèle de Benjamin, si je l'intègre dans un "container", il ne se passe plus rien.
Avec le modèle de Koala, toute la page est masquée.

Je ne comprends pas pourquoi... Est-ce que quelqu'un aurait la gentillesse de m'expliquer?
Merci beaucoup.
Voici le script de la page avec le script de Koala (mal?) intégré :

<Modéré par Florent V.: merci de respecter les règles de mise en forme pour ce forum (on pourra consulter notamment la règle 13). Par ailleurs, je signale en passant qu'il serait beaucoup plus simple de travailler avec une page en ligne (pas besoin de recréer la page en local). />

Merci!
Modifié par Florent V. (30 Dec 2007 - 13:50)
2ème post et déjà modéré... ça commence bien.
Bref, pour la réponse à ma propre question, dans le script à koala, tous les div doivent être suivis du class="montre", sinon, tous les cadres sont masqués.

Merci pour le script et bonnes fêtes!
Bonjour tout le monde,


Tout d'abord merci à Koala et à Benjamin pour leur réponse Smiley smile

Je reviens donc vers vous après une petite "étude" des codes proposés. En ce qui concerne le html et le css pas de problème, j'ai compris comment cela fonctionne Smiley cligne
par contre en ce qui concerne le javascript c'est un peu plus compliqué
Smiley sweatdrop :

>>Koala :
Dans ce cas là, je ne comprends pas bien le fonctionnement de la dernière partie

{ 'ctrl': $(document, 'h1'), 'el': $(document, 'div') },

			{ 'ctrl': $('CtrlFruits'), 'el': $('fruits') },

			{ 'ctrl': $('CtrlLegumes'), 'el': $(document, 'ul', 1) }

Pourquoi les lignes de code sont différentes pour les parties CtrlFruits & CtrlLegumes ?


>>Benjamin :
Dans ce cas-là et aussi dans celui de Koala, je n'ai pas réussi à rajouter une autre partie à afficher/masquer sans planter le code Smiley confused
Salut Xstof,

Je viens d'appliquer le script de koala sur ma page et ça marche super bien.

Pour répondre à tes questions :

la dernière partie du code de koala, je ne le comprends pas non plus, mais personnellement, j'ai laissé le code javascript et je n'ai rien appliqué à la variable "CtrlLegumes" (je l'ai effacée dans la partie HTML)

Pour rajouter une autre partie, il suffit de :
copier
{ 'ctrl': $('CtrlFruits'), 'el': $('fruits') },
dans le code javascript
coller en dessous le nombre de fois que tu veux ajouter la fonction et changer les noms "CtrlFruits" et "fruits"

Puis dans ta page html, rajouter
<h2 id="CtrlFruits">Fruits</h2>
<ul id="fruits" class="montre">
</ul>
le même nombre de fois et également changer les noms.

J'espère que c'est clair...
Modérateur
Salut, Smiley smile

En fait, j'ai l'impression que ce qui vous perturbe, c'est la fonction $().

Si on reprend le code suivant :
function $() {
	return arguments.length == 1 ?
		document.getElementById(arguments[0]) :
		arguments[0].getElementsByTagName(arguments[1])[arguments[2] || 0];
}
La première ligne au sein de la fonction vérifie si un seul argument est passé.

Si c'est le cas, on sélectionne l'élément ayant l'identifiant indiqué.
exemple :
$('CtrlFruits'); [#blue]// Je sélectionne l'élément ayant l'id "CtrlFruits"[/#]

A l'inverse, lorsqu'il y a deux arguments, on recherche le premier élément d'un conteneur en fonction du nom de la balise. C'est le cas par défaut.
exemple :
$(document, 'h1'); [#blue]// Je sélectionne le premier élément h1 au sein de document[/#]

Lorsqu'il y a trois arguments, on recherche un élément au numéro d'ordre indiqué et ce, toujours dans un conteneur en fonction du nom de la balise.
exemple :
$(document, 'ul', 1); [#blue]// Je sélectionne le second élément ul au sein de document[/#]


La fonction addToggle(), quant à elle, prend un nombre d'objets variable.

Pour chaque objet, ce dernier doit posséder :

- une propriété "ctrl", pour indiquer le contrôleur sur lequel on va cliquer pour afficher/masquer un élément,
- une propriété "el", pour indiquer l'élément à afficher/masquer.
Modifié par koala64 (30 Dec 2007 - 15:22)
Bien le bonjour tout le monde en cette première journée de l'année 2008 !!

Je tenais à vous souhaiter une très bonne nouvelle année et vous tenir au courant de mon avancement entre une tranche de foie gras et la buche glacée Smiley lol .

Tout d'abord un grand merci à Koala qui assure très bien le SAV de son code par des explications claires et nécessaires, effectivement, je comprends un peu mieux le fonctionnement de la fonction maintenant Smiley biggrin .

Merci à Ododo pour son conseil et depuis je me flagelle Smiley lol ...car je faisais exactement ce que tu me conseilles...mais n'actualisais pas le browser de mon client ftp...ce qui apparementlui faisait uploader que les fichiers non modifiés...et donc effectivement le script fonctionne nickel Smiley cligne .


Je continue à regarder et à avancer dans ma 'programmation' afin de voir ce que cela donne
Bonsouaaaaaaaaar Smiley lol

je reviens vers vous car j'ai un p'tit soucis avec le code que koala64 nous a si gentillement fourni...en effet celui ne semble pas fonctionner sous IE (et voui je sais, c'est le mal Smiley sweatdrop mais certains utilisateurs finiront bien par se tourner vers la lumière Smiley cligne )

J'aurais donc voulu savoir s'il n'y avait pas la possibilité en rajoutant des lignes de programme de faire en sorte de "patcher" le code afin de répondre à un maximum d'utilisateurs ????

En vous souhaitant à toutes et tous une bonne soirée Smiley murf
Modérateur
Salut,

Le code que je t'ai donné plus haut fonctionne sous IE... donc inutile d'ajouter quoi que ce soit.
Tu dois avoir fait une erreur. Smiley cligne
Modifié par koala64 (07 May 2008 - 14:45)
les seules modifications que j'ai pu faire sont :

(x)html
<ul>
	<li>
		<h1 id="CtrlBoulot7">blablabla</h1>
		<div id="boulot7" class="montre">Bla bla bla bla bla</div>
	</li>
	<li>
		<h1 id="CtrlBoulot6">blablabla</h1>
		<div id="boulot7" class="montre">Bla bla bla bla bla</div>
	</li>
</ul>


css
div.montre {
	display: block;}

div.cache {
	display: none;}


au lieu du 
a, .montre { display: block; }

.cache { display: none; }


qui me posait un problème de design (ça passait à la ligne suivante à la fin du </h1>) et meme comme cela...cela ne fonctionne pas sous IE Smiley confus
Modérateur
Je vois, rien que dans le bout de code que tu donnes, qu'il y a 2 fois l'identifiant "boulot7", ce qui ne va pas -> un identifiant devant être unique sur la page.

Cela dit, si cela ne résout pas ton problème, une page en ligne voire, à défaut, l'ensemble des codes html, css, javascript serait bien utile. Smiley cligne
Modifié par koala64 (07 May 2008 - 22:30)
Bonsoir Koala Smiley biggrin

J'ai fait une erreur de copie, vu que j'ai bien utilisé les identifiants qu'une seule fois Smiley cligne

Pour voir ce que cela donne en ligne
bonjour,
j'ai un petit probleme pour utilisé votre methode pour cacher et afficher.

J'ai suivi la méthode en modifiant quelque peu le css mais sa ne fonctionne pas. pouvez vous m'aidez ?

mon css

#newsletter {
	width:500px;
	margin: 0 auto;
}

#newsletter a {display:block;}

.hide {display:none;}

.show {display:block;}



et dans ma page php (j'ai intégré le script dans le head) :

<div id="newsletter">
  <?php 
  // On se connecte	
  include("../admin/connexion-sql.php");
	
	mysql_query("SET NAMES UTF8"); 
	$requete = mysql_query("SELECT * FROM newsletterctn ORDER BY id DESC"); 
		while( $result = mysql_fetch_array( $requete ) )
		{	
		echo '<h1 id="LabelProjects">Newsletter N° '.$result['numero'];
        echo ' | '.$result['titre'].'</h1>'; 
		echo 'Message <div id="projects">'.$result['message']. '</div>';
		}
  ?>
  </div>
Sujet clos
Aller à