11402 sujets

JavaScript, DOM et API Web HTML5

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

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) ?
Modérateur
Salut,

function Display(sIdCont, sId)
{
	document.[#red]forms['formrecherche'][/#].elements['recherche'].focus();
	...
Quel doctype utilises-tu ? Si tu es en xhtml 1.0 Strict, l'attribut name est invalide sur l'élément form. Par habitude, je mets un id plutôt que name et j'y accède via getElementById.

oA = document.innerHTML('<a href="#montrer" class="aff_img"></a>')
Est-ce ce que tu as trouvé sur le net ? Je n'ai jamais croisé cette écriture... Smiley smile Il faut définir innerHTML en tant que propriété de oA et lui affecter une chaine correspondant au code html que tu souhaites insérer.

Il y a un autre soucis dans cette instruction. Tu crées un lien vide, ce qui fait que quelqu'un qui se sert d'un lecteur d'écran n'a pas d'intitulé : Ton lien ne veut rien dire. Il faudrait y intégrer du texte ou une image. Si tu mets une image "en dur" au sein du code html, tu peux malgré tout faire un rollover via JS... et non CSS.

Par ailleurs, je vois que tu réemploies un id dans une même page html... C'est invalide. Dans ce cas, c'est une classe qu'il te faut. Il faut alors adapter le code JS pour qu'un élément comportant cette classe éxécute cette fonction... (plutôt qu'un id)
Merci pour ces renseignements,

Concrètement j'en suis là:


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');
					Display('rssglobal', 'rss');
				};


J'ai bien essayé de faire quelque chose du genre:

function Display(sIdCont, sId)
{	
	document.forms['formrecherche'].elements['recherche'].focus();
	var oElem = document.getElementById(sId),
	oA.innerHTML = '<a href="#montrer"><img src="plus.gif" alt="+" /></a>';
	document.getElementById(sIdCont).insertBefore(oA, oElem);
	
	oElem.className = 'cache';
	oA.onclick = function()
	{
		if(this.firstChild.alt === '+')
		{
			this.firstChild.alt = '-';
			this.href = '#cacher';
			this.className = 'hidefav';
		}
		else
		{
			this.firstChild.alt = '+';
			this.href = '#montrer';
			this.className = 'showfav';
		}
		oElem.className = oElem.className === 'cache' ? '' : 'cache';
		return false;
	}
}
window.onload = function()
				{ 
					Display('favglobal', 'favoris');
					Display('rssglobal', 'rss');
				};


Avec innerHTML sur oA, j'ai donc supprimé ma classe oA.className = 'showfav'; qui avait un background image pour a. Je verifie après avec if(this.firstChild.alt === '+'), mais j'ai laissé mon this.className = 'hidefav'; (rollover en css) et ca serait donc ici le rollover en js ?

Ensuite, le plus gros problème reste vraiment le nombre de divs à cacher, car il peut varié comme expliqué plus haut (je ne peux pas créer plusieurs id "favglobal" "rssglobal'... le mieux serait de pouvoir utilisé les même id mais identifiables avec un numéro (pour savoir quel bloc cacher) mais apres ca revient au même l'id que j'utilise pour cacher le bloc je l'utilsie aussi pour l'apparence de ce même bloc.

Merci d'avance,

Edit: Sinon je suis en xhtm 1.1
Modifié par nonoteam (15 Jan 2007 - 14:43)
Modérateur
Salut,

nonoteam a écrit :
Edit: Sinon je suis en xhtm 1.1
Raison de plus pour ne pas te servir de l'attribut name sur ta balise form... C'est invalide...
Par ailleurs, XHTML1.1 ne te sert, presque à coup sûr, à rien. Tu devrais lire ce billet. Smiley smile

Bon, vu qu'apparemment, tu veux pouvoir te servir de ce script quelquesoit l'élément, ça se complexifie un peu... Smiley murf

Du coup, je t'ai fait le script... Smiley confus

Tu n'as plus besoin que de mettre une classe CSS sur l'élément que tu souhaites contrôler... (il n'est plus nécessaire de préciser ce que c'est)

Si t'as besoin d'explications, n'hésite pas... Je me suis servi volontairement des gestionnaires type DOM-0 histoire de ne pas compliquer d'avantage parce qu'à mon avis, tu vas déjà avoir suffisamment de mal comme ça...

Un conseil : Penche-toi sérieusement sur le script et essaye malgré tout de le comprendre... Smiley cligne

<!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[

try {

var oO =
{
	aCSS: [],
	CSS: 'test', // Si un élément comporte cette classe, on lui affecte la classe définit ci-après (Display) et on crée un lien de contrôle
	Display: 'cache',

	_fastLoadEvent: function(func)
	{
		if(document.addEventListener) document.addEventListener('DOMContentLoaded', func, false);

		/*@cc_on @*/
			/*@if(@_win32) document.write('<scr'+'ipt id="__ie_onload" defer src="javascript:void(0)"><\/scr'+'ipt>');
			var script = document.getElementById('__ie_onload');
			script.onreadystatechange = function()
			{
				if(this.readyState === 'complete') func();
			};
		/*@end @*/

		if(/WebKit/i.test(navigator.userAgent) && /loaded|complete/.test(document.readyState)) func();
	},

	_arrayPush: function()
	{
		var iI = arguments.length - 1;
		for (; iI >= 0; iI--)
			this[this.length] = arguments[iI];
		return this.length;
	},

	_typeElem: function(oElem)
	{
		return oElem.nodeType === 1 ? true : false;
	},

	_haveChild: function(oElem)
	{
		return oElem.childNodes.length > 0 ? true : false;
	},

	_haveClass: function(oElem, sClass)
	{
		return oElem.className === sClass ? true : false;
	},

	_madeTab: function(aElem)
	{
		var iI = aElem.length - 1;
		for(; iI >= 0; iI--)
			if(oO._typeElem(aElem[iI]) && oO._haveClass(aElem[iI], oO.CSS))
				oO.aCSS.push(aElem[iI]);
			else if(oO._typeElem(aElem[iI]) && oO._haveChild(aElem[iI]))
				oO._madeTab(aElem[iI].childNodes);
	},

	_display: function()
	{
		if(this.nextSibling.className === oO.Display)
		{
			this.nextSibling.className = oO.CSS;
			this.href = '#cacher';
			this.firstChild.src = 'moins.gif';
			this.firstChild.alt = '-';
		}
		else
		{
			this.nextSibling.className = oO.Display;
			this.href = '#montrer';
			this.firstChild.src = 'plus.gif';
			this.firstChild.alt = '+';
		}
		return false;
	},

	_init: function()
	{
		if(!oO._haveChild(document.body)) return;

		var aBodyChilds = document.body.childNodes;
		oO._madeTab(aBodyChilds);
		if(oO.aCSS.length === 0) return;

		var iI = oO.aCSS.length - 1;
		for(; iI >= 0; iI--)
		{
			var oA = document.createElement('a');
			oA.href = "#montrer";
			oA.innerHTML = '<img src="plus.gif" width="16" height="16" alt="+" />';
			oO.aCSS[iI].parentNode.insertBefore(oA, oO.aCSS[iI]);

			oO.aCSS[iI].className = oO.Display;

			oA.onclick = oO._display;
		}
	}
};

if(typeof Array.prototype.push === "undefined")
	Array.prototype.push = ArrayPush;

oO._fastLoadEvent(oO._init);

} catch(catastrophe) {};

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

<p class="test">Riri</p>
<div>
	<h3 class="test">Fifi</h3>
	<ul>
		<li class="test">Loulou</li>
	</ul>
</div>

	</body>
</html>
Pour t'aider, je te conseille de lire les tutos JS d'Alsacréations. Smiley cligne
Vraiment un grand merci à toi depuis le début ! cela fonctionne parfaitement.

Oui, d'habitude je créer toujours mes pages en xhtm 1.0 Strict et je ne savais même pas pour l'attribut name sur form Smiley sweatdrop

Je vais décortiquer ton script pour essayer de bien le comprendre.
Bien sur, il y a des passages que je ne comprends pas comme:

_fastLoadEvent: function(func)
	{
		if(document.addEventListener) document.addEventListener('DOMContentLoaded', func, false);

		/*@cc_on @*/
			/*@if(@_win32) document.write('<scr'+'ipt id="__ie_onload" defer src="javascript:void(0)"><\/scr'+'ipt>');
			var script = document.getElementById('__ie_onload');
			script.onreadystatechange = function()
			{
				if(this.readyState === 'complete') func();
			};
		/*@end @*/

		if(/WebKit/i.test(navigator.userAgent) && /loaded|complete/.test(document.readyState)) func();
	},


Sinon j'aurais bien aimé savoir pourquoi on met /*<!CDATA[*/ /*]]>*/
Qu'est ce que ca signifie, est ce vraiment utile ?

Je met ce sujet en résolu mais j'aurais sûrement d'autres questions au fur et à mesure Smiley smile

En tout cas, encore merci pour ton aide,
A bientôt,
nonoteam a écrit :
[b]/*@if(@_win32)[/b] document.write('<scr'+'ipt id="__ie_onload" defer src="javascript:void(0)"><\/scr'+'ipt>');
			var script = document.getElementById('__ie_onload');
			script.onreadystatechange = function()
			{
				if(this.readyState === 'complete') func();
			};
		/*@end @*/
Serait-ce un commentaire conditionnel en Javascript ? Si c'est le cas tu pourrais donner un lien pour en savoir plus STP ?
nonoteam a écrit :
Sinon j'aurais bien aimé savoir pourquoi on met /*<!CDATA[*/ /*]]>*/
Qu'est ce que ca signifie, est ce vraiment utile ?
Un petit lien
Modérateur
Re, Smiley smile
nonoteam a écrit :
Bien sur, il y a des passages que je ne comprends pas comme:

_fastLoadEvent: function(func)
	{
		if(document.addEventListener) document.addEventListener('DOMContentLoaded', func, false);

		/*@cc_on @*/
			/*@if(@_win32) document.write('<scr'+'ipt id="__ie_onload" defer src="javascript:void(0)"><\/scr'+'ipt>');
			var script = document.getElementById('__ie_onload');
			script.onreadystatechange = function()
			{
				if(this.readyState === 'complete') func();
			};
		/*@end @*/

		if(/WebKit/i.test(navigator.userAgent) && /loaded|complete/.test(document.readyState)) func();
	},
La méthode _fastLoadEvent(func) est une méthode de chargement rapide qui permet de conserver un code non intrusif sans avoir des défauts tels que l'apparition temporaire d'éléments, qui vont être cachés via JS, au chargement de la page.

Je l'ai un peu simplifié mais la fonction à partir de laquelle je suis parti était celle-ci :

http://www.thefutureoftheweb.com/blog/2006/6/adddomloadevent

(N'hésite pas à suivre les 3 liens qui sont indiqués en début de script puisque c'est la base...)

a écrit :
Sinon j'aurais bien aimé savoir pourquoi on met /*<!CDATA[*/ /*]]>*/
Qu'est ce que ca signifie, est ce vraiment utile ?
Oui, c'est utile pour dire aux parseurs de ne pas interpréter le code en tant que code XML. Tu trouveras plus d'explications sur cette page :

http://ljouanneau.com/blog/2004/04/06/262-la-section-cdata-en-xml

(Regarde plus particulièrement le commentaire de Ganf)

CNeo a écrit :
Serait-ce un commentaire conditionnel en Javascript ? Si c'est le cas tu pourrais donner un lien pour en savoir plus STP ?
Oui c'est cela. Smiley cligne Tu peux trouver quelques explications ici :

http://www.javascriptkit.com/javatutors/conditionalcompile.shtml
Pages :