11521 sujets

JavaScript, DOM et API Web HTML5

Afficher/masquer un contenu par un clic sur le titre

Pages :
(reprise du message précédent)

La méhtode adéquate est stop.
Attention, sur certains navigateurs, le S est majuscule (par exemple avec ff et le plugin QuickTime)
QuentinC a écrit :
La méhtode adéquate est stop.
Attention, sur certains navigateurs, le S est majuscule (par exemple avec ff et le plugin QuickTime)
Peux-tu m'en dire plus? Je n'ai pas connaissance de cette méthode.
QuentinC a écrit :
document.getElementById('monobject').stop();

Désolé mais je suis vraiment une buse en js… Smiley confused Dans le script suivant, où dois-je placer cet instruction?


// ------------------------------------------------------------------------
// Fonction "afficher/masquer" un contenu, ne pas modifier
// ------------------------------------------------------------------------

function Init(ctrl, id) {
	var oUl = document.getElementById(id);
	oUl.className = 'cache';
	var oH2 = document.getElementById(ctrl), oA = document.createElement('a'), oTxtA = document.createTextNode(oH2.firstChild.nodeValue);
	oA.href= '#';
	oA.appendChild(oTxtA);
	document.body.replaceChild(oA, oH2);
	oA.onclick = function() { Display(id); return false; };
};

function Display(id) {
	var oUl = document.getElementById(id);
	oUl.className = (oUl.className == 'cache') ? 'montre' : 'cache';
}

window.onload = function() {
   

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


	Init('CtrlFruits', 'fruits');

	Init('CtrlLegumes', 'legumes');	
	

};
Il va falloir modifier le code je pense

oUl.className = (oUl.className == 'cache') ? 'montre' : 'cache';

Qu'il va falloir remplacer par un if .. else ... classique

if (oUl.className == 'cache') {
 oUl.className = 'montre'
 document.getElementById('monobject').play();
}
else {
 oUl.className = 'cache'
 document.getElementById('monobject').stop();
}


Je suis absolument pas sur du .play, pour la musique me semble que c'est .play(false) mais je suis plus sur
DarkHerumor a écrit :
Il va falloir modifier le code je pense

oUl.className = (oUl.className == 'cache') ? 'montre' : 'cache';

Qu'il va falloir remplacer par un if .. else ... classique

if (oUl.className == 'cache') {
 oUl.className = 'montre'
 document.getElementById('monobject').play();
}
else {
 oUl.className = 'cache'
 document.getElementById('monobject').stop();
}


Je suis absolument pas sur du .play, pour la musique me semble que c'est .play(false) mais je suis plus sur
Marche po Smiley decu J'ai essayé plusieurs trucs mais rien ne fonctionne comme prévu. Si quelqu'un a une idée, je suis tout ouïe Smiley smile
Bonjour,

Cela m'intéresse aussi beaucoup et j'ai la même difficulté au niveau de l'intégration de vidéos.

Quelqu'un aurait-il une idée?
Bonjour,

Je me présente Wissam, un débutant aussi en cette matière.

Cependant, ayant testé tous les codes cités précédemments, je ne trouve toujours pas de solution à mon problème.

En effet, le code de Koala y était presque, mais je voudrais au lieu de mettre "fruits" et "légumes", mettre une image en "titre de menu"

Je m'explique :

Je voudrais qu'en cliquant sur (l'image), une liste de plusieurs liens se forme, et qu'en recliquant dessus, se referme.

L'image dans ce cas n'est qu'un bouton, et pour tout vous dire, c'est pour un site : www.vandread-online.com

(ps : le site est en plein construction, donc tous les liens ne sont pas encore disponibles)

Merci d'avance,
Amicalement, Wisso.
Modifié par Wissam (16 Mar 2007 - 11:22)
koala64 a écrit :
oui, voilà, c'est ce principe... Smiley cligne

En externe, ça donne :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
					  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css">/*<![CDATA[*/

a
{
	display: block;
}
.cache
{
	display: none;
}
.montre
{
	display: list-item;
}

		/*]]>*/</style><script type="text/javascript">//<![CDATA[

function Init(ctrl, id)
{
	var oUl = document.getElementById(id);
	oUl.className = 'cache';
	var oH2 = document.getElementById(ctrl), oA = document.createElement('a'), oTxtA = document.createTextNode(oH2.firstChild.nodeValue);
	oA.href= '#';
	oA.appendChild(oTxtA);
	document.body.replaceChild(oA, oH2);
	oA.onclick = function() { Display(id); return false; };
		
};

function Display(id)
{
	var oUl = document.getElementById(id);
	oUl.className = (oUl.className == 'cache') ? 'montre' : 'cache';
}

window.onload = function()
{
	Init('CtrlFruits', 'fruits');
	Init('CtrlLegumes', 'legumes');
};

		//]]></script></head><body>

<h2 id="CtrlFruits">Fruits</h2>
<ul id="fruits">
	<li>Kiwi</li>
	<li>Poire</li>
	<li>Fraise</li>
	<li>Banane</li>
	<li>Mangue</li>
</ul>

<h2 id="CtrlLegumes">Légumes</h2>
<ul id="legumes">
	<li>Haricots</li>
	<li>Carottes</li>
	<li>Artichauts</li>
	<li>Riz</li>
	<li>Salade</li>
</ul>

</body></html>

Tiens, est-ce que c'est possible de déterminer qu'une liste soit ouverte par défaut, la première par exemple?
Modérateur
Salut, Smiley smile

oui, au lieu de mettre :
function Init(ctrl, id)
{
    ...
    oUl.className = 'cache';
    ...
}
il faut mettre :
function Init(ctrl, id)
{
    ...
    if(oUl.className != 'montre')
        oUl.className = 'cache';
    ...
}
puis ajouter la classe "montre" directement dans le html sur la (ou les) liste(s) qui doi(ven)t rester ouverte(s).
Bonjour,

Tout d'abord, merci beaucoup Felipe d'avoir rouvert ce sujet... Smiley cligne

Sujet très intéressant et solutions qui marchent bien... Je rencontre juste une petite difficulté pour adapter l'une des versions du script fourni par koala.

Dans le script original, pour créer le lien, on a :
var oH2 = document.getElementsByTagName('h2')[0], oA = document.createElement('a'), oTxtA = document.createTextNode(oH2.firstChild.nodeValue);

et ensuite
<h2>Fruits</h2>


Moi je voudrais que mon lien soit identifié plutôt via un id, j'ai tenté ceci :
var oH2 = document.getElementsById('mon_id')[0], oA = document.createElement('a'), oTxtA = document.createTextNode(oH2.firstChild.nodeValue);

et ensuite
<p id="mon_id">Afficher le contenu</p>


Mais à première vue ça n'a pas l'air de fonctionner... Je précise, si besoin était, que je n'y connais vraiment rien en Javascript ! Smiley confused

Pouvez-vous m'aider ?

Question subsidiaire : y aurait-t-il un moyen simple de transformer aussi le texte 'Afficher le contenu' en 'Masquer le contenu' au clic ?

Merci d'avance...
Up sur mes questions, et j'en ai une nouvelle : quand j'inclus tout ce code dans un autre div, ça ne marche plus ! Le lien n'est plus créé, et le texte caché plus accessible du même coup... Quelqu'un peut m'aider please ?

Merci...
Ok, bon ben question 1 "je voudrais que mon lien soit identifié plutôt via un id" résolue... getElementsByTagName mais getElementById, un meilleur sens de l'observation aurait pu être utile... Donc ça donne :
var oH2 = document.getElementById('mon_id')

au lieu de
var oH2 = document.getElementsByTagName('h2')[0]


Restent :
2) un moyen simple de transformer aussi le texte 'Afficher le contenu' en 'Masquer le contenu' au clic ?
3) "quand j'inclus tout ce code dans un autre div, ça ne marche plus ?!"
Modérateur
Salut, Smiley smile

D'après tes demandes, tu peux modifier le script comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
					  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css"><!--

.hasJS .cache {display: none;}
.montre {display: block;}

		--></style>
		<script type="text/javascript"><!--

(function() {

var addEvent = function(oElem, sEvType, fn, bCapture) {
	return oElem.addEventListener?
		oElem.addEventListener(sEvType, fn, bCapture || false):
		oElem.attachEvent?
			oElem.attachEvent('on' + sEvType, fn):
			oElem['on' + sEvType] = fn;
}

var toggle = function(oCtrl, oCont) {
	oCtrl.innerHTML = '<a href="#">' + oCtrl.lastChild.nodeValue + '</a>';
	oCtrl = oCtrl.getElementsByTagName('a')[0];
	oCtrl.onclick = display(oCtrl, oCont);
}

var display = function(oCtrl, oCont) {
	var oBaseTxt = oCtrl.innerHTML;
	oCtrl.innerHTML = 'Afficher ' + oBaseTxt;
	return function() {
		if(oCont.className == 'cache') {
			oCtrl.innerHTML = 'Cacher ' + oBaseTxt;
			oCont.className = 'montre';
		}
		else {
			oCtrl.innerHTML =  'Montrer ' + oBaseTxt;
			oCont.className = 'cache';
		}
		return false;
	}
}

addEvent(window, 'load', function() {
	var oCtrl = document.getElementById('ctrl');
	var oFruits = document.getElementById('fruits');
	return toggle(oCtrl, oFruits);
});

})();

		//--></script>
	</head>
	<body>
		<script type="text/javascript"><!--

document.body.className += ' hasJS';

		//--></script>
		<div>
			<h2 id="ctrl">les fruits</h2>
			<ul id="fruits" class="cache">
				<li>Kiwi</li>
				<li>Poire</li>
				<li>Fraise</li>
				<li>Banane</li>
				<li>Mangue</li>
			</ul>
		</div>
	</body>
</html>
La fonction anonyme de départ et la fonction addEvent permettent, par la suite, d'ajouter d'autres scripts sans risque de conflit. Si tu souhaites en savoir plus, ces notions sont expliquées dans les tutos. Smiley jap

Pour le bout de script ajouté en début de body :
<script type="text/javascript"><!--

document.body.className += ' hasJS';

//--></script>
cela permet de masquer ton contenu plus rapidement au chargement de la page, ce qui va être utile lorsque la page va s'alourdir. Pour cette partie, il ne faut pas oublier d'ajouter la classe 'cache' sur le conteneur que tu souhaites masquer et bien déclarer ".hasJS .cache" dans le CSS afin que le masquage ne soit actif que lorsque JS est bien activé.

Pour le reste, je te laisse potasser mais si tu as des questions, n'hésite pas. Smiley cligne
Modifié par koala64 (13 Sep 2008 - 18:31)
Pages :
Sujet clos
Aller à