11402 sujets

JavaScript, DOM et API Web HTML5

Pages :
Bonjour,

Je ne connais pas trop Javascript et j'aimerais pouvoir afficher ou cacher une div.
Voici le code JS que j'utilise:

function show( nom, numero )
                {
                        var divID = nom + numero;
                        if ( document.getElementById && document.getElementById( divID ) )
                                {
                                        Pdiv = document.getElementById( divID );
                                        PcH = true;
                               }
                        else if ( document.all && document.all[ divID ] )
                                {
                                        Pdiv = document.all[ divID ];
                                        PcH = true;
                                }
                        else if ( document.layers && document.layers[ divID ] )
                                {
                                        Pdiv = document.layers[ divID ];
                                        PcH = true;
                                }
                        else
                                {
                                        PcH = false;
                                }
                        if ( PcH )
                                {
                                        Pdiv.className = ( Pdiv.className == 'cache' ) ? '' : 'cache';
                                }
                }


Cache est une simple classe permettant de cacher la div .cache { display: none; }

Je m'en sert comme cela sur ma page:

<a href="javascript:show( 'div', '1' )">Afficher / Cacher</a>
<div id="div1">Coucou, je suis le texte à cacher</div>


Et ca marche nikel ! Smiley cligne
Pourquoi ce post alors ? o_O

Comme je l'ai dit plus haut, je ne connais pas beaucoup javascript, j'aimerais alors qu'au chargement de la page, le contenu de la div soit caché, mais il faut également que le contenu s'affiche si le Javascript est desactivé.
Avec ce code, à l'ouverture de la page, le contenu est affiché (je veux qu'il soit caché) et à la desactivation de Javascript le contenu est bien affiché, mais je pense que ça va changer lorsque le contenu sera cacher (?).

J'aimerais également savoir s'il est possible que je récupère la variable pour connaittre l'état de mon div (affiché/caché) pour que je puisse la manipuler avec php ?

Merci d'avance Smiley cligne
A bientôt,
Modifié par nonoteam (16 Jan 2007 - 18:52)
Çà me semble être un bien grand code pour pas grand chose ...
function showOrHide(id, type){
 if(document.getElementById(id).style.display==type) document.getElementById(id).style.display='none';
 else if(document.getElementById(id).style.display=='none') document.getElementById(id).style.display=type;
}


Attends la suite arrive ...
Modifié par CNeo (07 Jan 2007 - 17:44)
Administrateur
CNeo a écrit :
Çà me semble être un bien grand code pour pas grand chose ...

Disons que c'est un code qui fonctionne aussi sur les dinosaures (NS4, IE4) puisqu'il ne connaissaient pas encore getElementById.

Mais j'avoue que l'intérêt est assez limité aujourd'hui.
Raphael a écrit :

Disons que c'est un code qui fonctionne aussi sur les dinosaures (NS4, IE4) puisqu'il ne connaissaient pas encore getElementById.

Mais j'avoue que l'intérêt est assez limité aujourd'hui.
Ah oui, j'avoue que je ne savais même pas çà ... ( étant jeune je n'ai pas connu ces navigateurs ... )
Modifié par CNeo (07 Jan 2007 - 17:45)
Pour passer des valeurs à PHP je n'ai encore jamais essayé ( il me semble que cela apparaît dans la doc PHP ), mon premier réflexe serait de mettre un input caché mais çà peut poser des problèmes d'envoi ... donc là dessus je ne peux pas trop t'aider pour l'instant.

Pour que le div s'affiche quand Javascript est désactivé son display css doit être sur block ( ou inline, ... ) ce qui est la valeur d'origine de l'élément donc pas besoin d'y toucher ...
Pour que le div soit caché si javascript est activé et pour que le lien ne s'affiche également qu'à cette condition je te conseille de faire une fonction start_jsStyle qui change la classe de body ou d'un autre élément de .jsOff ( valeur par défaut ) vers .jsOn ( qui te permet d'afficher le lien ( qui soit dit en passant devrait plutôt être un bouton ) et de masquer le div en question ).

En CSS :
.jsOn #div1 {display: none;}
.jsOn #button {display: block;}

.jsOff #button {display: none;}


Ah oui ... l'argument type est le type de boîte qu'est l'élément quand il est affiché ( block, inline, ... ).
Ok merci bien pour ces précisions.
Je ne comprends pas encore suffisamment la méthode mais je vais creuser ca.
Merci.
nonoteam a écrit :
Ok merci bien pour ces précisions.
Je ne comprends pas encore suffisamment la méthode mais je vais creuser ca.
Merci.
Attends un peu je dois pouvoir t'aider pour la fonction start_jsStyle
On peut soit englober ton bouton et ton div dans un autre div pour appliquer la classe .jsOn soit appliquer cette classe directement à la balise body ...

Avec la balise body :
function start_style(){
 var bodyMarkup=document.getElementsByTagName('body')[0];
 if(bodyMarkup.className==='jsOff'){
  bodyMarkup.className='jsOn';
 }
}


Avec un div englobant tes deux éléments :
function start_jsStyle(id){
 var divMarkup=document.getElementById(id);
 if(divMarkup.className==='jsOff'){
  divMarkup.className='jsOn';
 }
}


Ensuite tu appelles l'une de ces deux fonctions dans le onload de la balise body.

ATENTION : Ne pas oublier de mettre la classe jsOff sur le div qui englobe ou sur la balise body sinon çà ne marchera pas ...
Modifié par CNeo (07 Jan 2007 - 18:25)
Modérateur
CNeo a écrit :

function showOrHide(id, type){
 if(document.getElementById(id).style.display==type) document.getElementById(id).style.display='none';
 else if(document.getElementById(id).style.display=='none') document.getElementById(id).style.display=type;
}
Salut,

Cette fonction est plutôt à éviter dans le sens où appliquer un style via JS n'est pas conseillée. J'en parlais d'ailleurs ici, intervention dont tu as d'ailleurs été témoin, CNeo. Smiley cligne

... donc désolé encore une fois mais je vais être obligé de supprimer de nouveau le dernier code que tu as proposé dans les scripts utiles...

PS : Oui, tu me peux me traiter de tous les noms en privé... J'ai conscience d'être dur avec toi. Smiley lol ... mais c'est pour éviter de dévaloriser le sujet avec des scripts qui comportent trop de défauts. Smiley cligne

A la rigueur, si tu veux poster un code, fais-en moi part auparavant. Je pourrais te dire ce qui est ou non préjudiciable. Smiley smile
Voilà ce que j'ai fait, mais bon j'arrive à rien quoi. Javascript, c'est pas vraiment mon truc Smiley ohwell

<style type="text/css">
.jsOn #div1 {
display: none;
}

.jsOn #button {
display: block;
}

.jsOff #button {
display: none;
}
</style>

<script type="text/javascript">
function showOrHide(id, type)
{

	if(document.getElementById(id).style.display==type) document.getElementById(id).style.display='none';
	else if(document.getElementById(id).style.display=='none') document.getElementById(id).style.display=type;

}


function start_jsStyle(id)
{
	var divMarkup=document.getElementById(id);
	if(divMarkup.className==='jsOff')
	{
		divMarkup.className='jsOn';
	}
}
</script>
</head>

<body onload="start_jsStyle(div1)" >

<a href="javascript:showOrHide('div1', 'block')">Click</a>
<div class="jsOff" id="div1">
Coucou les gens
</div>

</body>
En fait il faut rajouter :
.jsOff #div1 {display: block;}

Explication : même si block est la valeur par défaut d'un div il faut la préciser pour que Javascript est accès à cette information ...
Merci je l'ai ajouté, le code que j'ai posté precedement est-il correct car il ne marche pas, je me suis un peu embrouillé je crois ?
Modérateur
erf... bon, sans tomber dans des solutions trop complexes...

Le lien qui active l'affichage n'est utile que si Javascript est activé donc il faut le créer via JS.

Un exemple de code (qui pourrait être amélioré):
<!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[*/

@media screen, projection
{
	
	.Cache { display: none; }
}

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

function Display(sId)
{	
	var oDiv = document.getElementById(sId),
	    oA = document.createElement('a'),
	    oTxt = document.createTextNode('Montrer');
	oA.href = '#montrer';
	oA.appendChild(oTxt);
	document.body.insertBefore(oA, oDiv);

	oDiv.className = 'Cache';
	oA.onclick = function()
	{
		if(this.firstChild.data === 'Montrer')
		{
			this.firstChild.data = 'Cacher';
			this.href = '#cacher';
		}
		else
		{
			this.firstChild.data = 'Montrer';
			this.href = '#montrer';
		}
		oDiv.className = oDiv.className === 'Cache' ? '' : 'Cache';
		return false;
	}
}
window.onload = function() { Display('madiv'); };

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

<div id="madiv">
	<p>coucou<p>
</div>

	</body>
</html>
Wahou, merci ca marche superbement.
Je vais me plonger dans le code et bien me mettre dans Javascript.
Je vais aussi voir pour passer la variable à php avec un input hidden.
Merci de votre aide Smiley cligne
Bonjour,

J'aimerais savoir s'il est possible d'ajouter cet effet à la balise ul plutôt, j'ai pas mal de divs et ça cafouille un peu avec les bloc parents-enfants.
Car pour le moment j'ai:



<div id="global'>

<h1>Ma liste</h1>
<div id="divacacher">

<ul id="liste">
<li>Texte 1</li>
<li>Texte 2</li>
<li>Texte 3</li>
</ul>

</div>

</div>


Par exemple dans #global j'ai un background bleu avec une bordure et un titre centré h1, le bloc div #liste est à cacher avec le lien qui apparaît (Afficher/Cacher) mais il restera toujours la div #global avec le titre h1.

Mais j'aimerais faire plus simple, c'est à dire:


<div id="global'>

<h1>Ma liste</h1> <h2>Afficher/Cacher</h2>

<ul id="liste">
<li>Texte 1</li>
<li>Texte 2</li>
<li>Texte 3</li>
</ul>

</div>


Comment appliquer le cache directement à l'élément ul, aussi comment mettre le lien Afficher/Cacher directement dans une balise h2 (qui se trouverait à droite de h1, enfin bref..) puisque le lien est créé en javascript ? rajouter un paramètre this.parametre_balise = 'h2'; ?

COOKIE:

En fait je ne vais pas essayer de faire passer ma variable à php,
je pense créer un cookie à la fin de la fonction qui enregistre l'état de ma variable ('montre' ou 'cache'). Puis ajouter au début une fonction qui affecte la valeur du cookie à ma div, seulement s'il existe, autrement on suit le cours du script précédent... état 'montre' si JS est désactivé, état 'cache' si JS est activé mais qu'il n'y a aucun cookie.

Je ne sais pas s'il y a une fonction correspondante à if(isset($_COOKIE['etat'])) en quelque sorte ?

J'ai trouvé ce lien sur les cookies, je vais le potasser.
http://www.actulab.com/les-cookies-en-javascript.php[/url]

D'avance Merci,
A bientôt,
Modifié par nonoteam (08 Jan 2007 - 19:32)
Avec le code de koala64 çà donnerait :
<!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[*/

@media screen, projection
{
	
	.Cache { display: none; }
}

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

function Display(sId)
{	
	var oElement = document.getElementById(sId),
	    oA = document.createElement('h2'),
	    oTxt = document.createTextNode('Montrer');
	oA.appendChild(oTxt);
	document.body.insertBefore(oA, oElement);

	oElement.className = 'Cache';
	oA.onclick = function()
	{
		if(this.firstChild.data === 'Montrer')
		{
			this.firstChild.data = 'Cacher';
		}
		else
		{
			this.firstChild.data = 'Montrer';
		}
		oElement.className = oElement.className === 'Cache' ? '' : 'Cache';
		return false;
	}
}
window.onload = function() { Display('liste'); };

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

<ul id="liste">
 <li>blabla</li>
 <li>blabla</li>
 <li>blabla</li>
 <li>blabla</li>
</ul>

</body>
</html>

( Sauf erreur de ma part bien sûr ... )
Ah ok merci je vois,

Par contre lorsque ma liste est englobée par une div:


<div id="test">
<ul id="liste">
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
</ul>
</div>


Le cache ne fonctionne plus, je pense qu'il faut modifier cette ligne window.onload = function() { Display('liste'); };

J'ai essayé tout un tas de combinaisons comme Display('test.liste') çca n'a pas l'air de marcher Smiley confus

Sinon pour les cookies, c'est faisable (cf post précèdent) ?
Bon je vais voir le lien que j'ai donné plus haut voir ce que je peux en tirer.

Merci bien Smiley cligne
A bientôt,
Modérateur
Tu peux faire ainsi :
function Display(sIdCont, sId)
{	
	var oElem = document.getElementById(sId),
	    oA = document.createElement('a'),
	    oTxt = document.createTextNode('Montrer');
	oA.href = '#montrer';
	oA.appendChild(oTxt);
	document.getElementById(sIdCont).insertBefore(oA, oElem);

	oElem.className = 'Cache';
	oA.onclick = function()
	{
		if(this.firstChild.data === 'Montrer')
		{
			this.firstChild.data = 'Cacher';
			this.href = '#cacher';
		}
		else
		{
			this.firstChild.data = 'Montrer';
			this.href = '#montrer';
		}
		oElem.className = oElem.className === 'Cache' ? '' : 'Cache';
		return false;
	}
}
window.onload = function() { Display('test', 'liste'); };
La première variable de la fonction Display est l'id du conteneur et la seconde variable est l'id de l'élément que tu souhaites faire apparaître ou disparaître.

Le lien s'insère juste au dessus de l'élément que tu souhaites contrôler. (Si tu mets un titre avant la liste, le lien s'insérera entre le titre et la liste)
Modifié par koala64 (09 Jan 2007 - 10:37)
Salut,
Je ne vois pas pourquoi mais cela ne fonctionne pas Smiley confus
Tout apparaît le lien et la liste.

a écrit :
Le lien s'insère juste au dessus de l'élément que tu souhaites contrôler. (Si tu mets un titre avant la liste, le lien s'insérera entre le titre et la liste)


Je ne peux pas faire oA = document.createElement('h2'), et le positionner à coter du titre h1 avec un css ?

Merci,
Modérateur
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. Smiley cligne

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