10234 sujets

JavaScript, DOM et API Web HTML5

Pages :
J'ouvre un topic pour recenser des scripts complet (assez court et facilement réutilisable), des fonctions home made et autres méthodes en JavaScript pour se faciliter la vie.

1 post par fonction/script/méthode s'il vous plait pour faire référence plus facilement et précisement aux dites fonctions grâce à l'ancre du topic.

Présenter vos codes de cette façon :

* Titre/nom de la fonction/méthode/script et courte description

// Votre code
// Commentez le dans la mesure de votre temps [cligne]

* Eventuelle explication plus complète et détaillée
* Infos supplémentaires
Modifié par Olivier (11 May 2005 - 19:04)
* Méthode .inArray pour vérifier qu'un élément est bien présent dans un tableau (Array)


Array.prototype.inArray = function(val) {
	for(var a2 = 0; a2 < this.length; ++a2) {
		if(this[ a2] == val){
		return true;
		}
	}
	return false;
};


* Basé sur la fonction faisant la même chose, passage de la fonction à la méthode (plus pratique et plus logique) par Bobe

* Ne fonctionne aparement pas sous IE, devrait pouvoir se régler à priori, à voir donc...
Modifié par Olivier (19 Jul 2005 - 15:32)
* Méthode .getElementsByClassName pour récupérer un tableau (Array) des éléments de la page ayant la class qui convient


document.getElementsByClassName = function(className) {
	var elts = document.getElementsByTagName('*');
	var classArray = new Array();
	for (var j = 0; j < elts.length; ++j) {
		if (elts[j].getAttribute('class') && elts[j].getAttribute('class').split(' ').inArray(className)) {
[#blue]// méthode inArray faite à la main > [url=http://forum.alsacreations.com/topic.php?fid=5&tid=3716#p33387]Explication et code[/url][/#]
			classArray.push(elts[j]);
		}
	}
	return classArray;
};


* Il faudra ne pas limiter la méthode à document je regarderais comment faire pour l'utiliser aussi simplement que .getElementById par exemple

* Ne fonctionne pas sous IE... ça devrait pouvoir se régler, à voir donc.
-> getAttribute('class') ne fonctionne pas sous IE, il faut utiliser getAttribute('className'), il faudrait donc doubler le test pour faire fonctionner la chose
* Fonctionne aussi pour les class multiples comme : class="class1 class2 class3"
Modifié par Olivier (15 Sep 2005 - 14:04)
* Fonction pour colorier les lignes d'un tableau une ligne sur deux

zebraTable([type, selector]);

function zebraTable(type, selector) {
	var myTable;
	var rows;
	var parity;
	
	evenOdd = function(rowsArray) {
		for (var r = 0; r < rowsArray.length; ++r) {
			parity = (r % 2) ? ' even' : ' odd';
			rowsArray[r].setAttribute('class', rowsArray[r].getAttribute('class') + parity);
		}
	};
	
	if (type == 'id' && selector) {
		if (document.getElementById(selector)) {
			myTable = document.getElementById(selector);
			rows = myTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
			evenOdd(rows);
		}
	} else {
		if (type == 'class' && selector) {
			myTable = document.getElementsByClassName(selector);
[#blue]// méthode getElementsByTagName faite à la main > [url=http://forum.alsacreations.com/topic.php?fid=5&tid=3716#p33389]Explication et code[/url][/#]
		} else {
			myTable = document.getElementsByTagName('table');
		}
		for (var t = 0; t < myTable.length; ++t) {
			rows = myTable[t].getElementsByTagName('tbody')[0].getElementsByTagName('tr');
			evenOdd(rows);
		}
	}
}


* Pour l'utiliser, vous avez 3 possibilités comme pour les sélecteurs CSS

// Avec l'ensemble des tableaux de la page
zebraTable();
// Avec une class
zebraTable('class', 'nomDeLaClass');
// Avec un id
zebraTable('id', 'nomDeLId');


* Le style des lignes est à définir dans les styles CSS pour plus de simplicité.
Modifié par Olivier (11 May 2005 - 23:44)
Eh, eh... Olivier tu te lache sur le JS Smiley cligne

Bon alors de mon coté :

* Class JavaScript permetant de créer des bulles d'aide personalisées

Cette classe permet de créer des bulles d'aides personalisées en utilisant le contenu des attributs alt ou title des balises qui doivent afficher des bulles d'aide. La bulle peut être stylée à l'aide de CSS et il est possible d'utiliser les expressions régulières pour baliser/styliser le text de la bulle d'aide !

a écrit :
/** INFOBULLE
* ----------
* Jeremie Patonnier <jep@ibilab.net>
* Version : 1.0
* ----------
* Objet JavaScript qui permet de créer des infobulles hautement personnalisées
* ----------
* Propriétés de l'objet :
*
* 1 - infoBulle::decY : integer : Defaut : 20
* Décalage de l'infobulle par rapport au pointeur de la souris
* sur l'axe des Y.
*
* 2 - infoBulle::decX : integer : Defaut : 0
* Décalage de l'infobulle par rapport au pointeur de la souris
* sur l'axe des X.
*
* 3 - infoBulle::width : integer : Defaut : 210
* Largeur de l'infobulle (en pixel). il est conseillé que cette
* valeur soit egale à la valeur du style CSS width de l'infobulle.
*
* 4 - infoBulle::enableAlt : Boolean : Defaut : false
* Indique si l'objet doit se baser sur le contenu de l'attribut
* alt pour générer le contenue de l'infobulle (true) ou bien
* uniquement sur la contenue de l'attribut title (false).
*
* 5 - infoBulle::enableDrag : Boolean : Defaut : true
* Indique si l'infobulle doit suivre la souris (true) ou rester
* à un emplacement fixe sur la page (false);
*
* ----------
* Méthodes de l'objet :
*
* 1 - infoBulle::setTo(OBJ, TEXTE):
* Méthode qui permet d'assigner l'infobulle à l'objet OBJ et de
* rajouter le texte TEXTE à la suite du texte de l'infobulle
* pour cet objet.
*
* 2 - infoBulle::registerPointer(URLIMG):
* Méthode permetant de rajouter un pointeur suivant la souris
* à l'infobulle. Ce pointeur est une image dont l'URL est URLIMG.
*
* 3 - infoBulle::registerFormat(REGEXP,FORMAT):
* Méthode permettant de spécifié des règles de formatage du texte.
*
* La portion de texte à formater est identifié grace à un objet
* REGEXP, la règle de formatage est la chaine de caratère FORMAT.
*
* ----------
* Styliser l'infobulle :
* Le texte de l'infobulle est à l'interieur d'une balise DIV identifié par #insideBulle
* qui est elle même contenue dans une balise DIV identifié par #infoBulle
* ----------
* Exemple d'utilisation :
*
* <img src="test.jpg" id="test" alt="Photo test : Voici une infobulle personnalisé" />
*
* <script type="text/javascript">
* bulle = new infoBulle();
* bulle.enableAlt = true;
* bulle.setTo(document.getElementById("test"));
* bulle.registerFormat(/^(.*:)/,"<strong>$1</strong>");
* </script>
*
* <style type="text/css">
* #infoBulle{
* background:#FCC;
* border:1px solid #999;
* }
* #insideBulle{
* margin:10px;
* font:0.8em Arial,Helvetica,sans-serif;
* }
* </style>
*/

La source original du script : infobulle.zip

Pour exemple, site utilisant ce script : http://www.lesandrivets.com
Modifié par Olivier (13 May 2005 - 23:19)
Aller hop, dans la foulé, une autre :

* Fonction JavaScript qui permet d'ouvrir une Pop-up ou une nouvelle fenètre avec l'accord de l'utilisateur en option.

/** NEWINDOW
 * ---------
 * Jeremie Patonnier <jep@ibilab.net>
 * Version : 2.0
 * ---------
 * Fonction JavaScript qui permet d'ouvrir une Pop-up ou une nouvelle fenètre 
 * avec l'accord de l'utilisateur en option.
 * ---------
 * Paramètres de fonction :
 *
 * 1 - URL          : L'objet représentant le lien contenant l'url à ouvrir dans la nouvelle fenètre
 *                  : ou le lien à ouvrir dans un pop-up
 *
 * 2 - CONFIRMATION : (optionel) un booleen qui spécifie si l'utisateur 
 *                    doit confirmer l'ouverture dans un pop-up ou une fenètre.
 *                    Par defaut, aucune confirmation n'est demandé (false).
 *
 * 3 - MESSAGE      : (optionel) le message à afficher lors de la demande de confirmation.
 *
 * 4 - NOM          : (optionel) Le nom de la pop-up ou fenètre à ouvrir.
 *
 * 5 - FEATURE      : (optionel) Les options de configuration des pop-up
 * ---------
 * Exemple d'utilisation :
 *
 * Simulation de l'attribut target="_blank" en XHTML 1.0 stric [cligne]
 * <a href="http://www.ibilab.net/" onclick="return neWindow(this)">
 *
 */

function neWindow(url,confirmation,message,nom,feature){

	if(message == undefined || message == '') message = 'Voulez vous ouvrir ce lien dans une nouvelle fenètre ?';

	if(confirmation == true && !window.confirm(message)) return true;

	if(typeof(url)!="string"){
		url.target = "_blank";
		return true;

	}else{
		if(nom == undefined) nom = 'w'+new Date().getTime();
		if(feature == undefined) feature = 'toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes';
		window.open(url,nom,feature);
		return false;
	}
}

Modifié par Jep (13 May 2005 - 22:48)
Postée dans un autre topic, je la mets ici...

* Nouvelle méthode pour la classe Array : compare


// Javascript Document : Méthode Array.compare()
// Script original par Lisaraël.
Array.prototype.compare = function(arr)
{
	if(!(arr instanceof Array)) {
		return false;
	}

	if(this.length != arr.length) {
		return false;
	}

	for(var a = 0; a < this.length; ++a) {
		if((this[a] instanceof Array) && (arr[a] instanceof Array)) {
			if(!(this[a].compare(arr[a]))) {
				return false;
			}
		}
		if(this[a] !== arr[a]) {
			return false;
		}
	}
	return true;
};
	


Le principe est pas trop complexe, il est commenté.

En gros, ça permet de comparer strictement deux tableaux, comme le montre la page d'exemple (note: dans la page d'exemple, la fonction s'appelle autrement)...
Modifié par Lisarael (21 May 2005 - 14:30)
Méthode getElementsByClassName accessible à tous les éléments de la page meme document et fonctionne sous IE et FF et les derniers navigateurs
il manquait une fonction qui permet de récupérer tous les éléments qui ont une class pour tout le document ou pour un élément particulier qui veut connaitre tous ses sous-éléments qui utilisent une classe particulière.


	function getElementsByClassNameforAllElements(className){
		var AllElements = document.getElementsByTagName('*');		//On récupère tous les éléments de la page web
		for (var ii = 0; ii < AllElements.length; ++ii) { //On les scanne tous un par un
			AllElements[ii].getElementsByClassName = function(className) { //Pour chaque élément on rajoute la fonction getElementsByClassName
				var MyClassArray = getElementsByClassName(className, this);
				return MyClassArray;
			}
		}
		
		//Tous les éléments on été traités sauf l'objet document, donc on lui rajoute aussi la méthode
		document.getElementsByClassName = function(className){
			var MyClassArray = getElementsByClassName(className, this);
			return MyClassArray;
		}
	}
	
	function getElementsByClassName (className, theElement){
		var elts = theElement.getElementsByTagName('*');
		var classArray = new Array();
		for (var j = 0; j < elts.length; ++j) {
		if (elts[j].className.indexOf(className) != -1) {
				classArray.push(elts[j]);
			}
		}
		return classArray;
	}



il suffit juste d'appeler la fonction getElementsByClassNameforAllElements lors du charchement de la page
dans cet exemple on utilise window.onload, mais celui-ci peut être écrasé par un autre JS si vous refaites un window.onload après.

maintenant tous les éléments possèdent la fonction getElementbyClassName

il suffit de tester avec cette fonction :

	function Prout(element){
		if (element != document) var monmenu = document.getElementById(element);
	   	else monmenu=document;
		var mesprout = monmenu.getElementsByClassName('prout');
		for (var j = 0; j < mesprout.length; ++j) { 
			alert(mesprout[j].id);
		}
	}

et ce code html :


<ul id="menu">
	<li><a href="#" id="lien1" class="prout">lien1</a></li>
	<li><a href="#" id="lien2" class="pouet">lien2</a></li>
	<li id="lispecial" class="prout"><a href="#" id="lien3" class="prout">lien3</a></li>
</ul>

<br>
<a href="#" id="lien4" class="prout">lien 4 en dehors de #menu</a><br>

<input type="button" onclick="Prout('menu')" value="que les prout du menu"><br>
<input type="button" onclick="Prout(document)" value="tous les prouts de la page">




normalement vous devriez avoir 3 alert box avec successivement lien1, lispecial et lien 3 si vous cliquez sur le prout du menu
mais si vous cliquez sur l'autre bouton, vous aurez 4 élément car lien4 est en dehors du menu
Modifié par Felipe (04 Nov 2005 - 20:54)
Fonction qui permet de cacher ou afficher les sous menus d'un menu sous réserve que celui ci soit fait à base de UL LI A

voici le code JS

function DynamMenu(IdMenu){
		if(!document.getElementsByTagName) //On teste si on a le droit de faire mumuse avec le DOM sur les TAGNAME
			return; 
		var Menu = document.getElementById(IdMenu); //On récupère le menu
		var li = Menu.getElementsByTagName('LI'); //On récupère tous les LI du menu
   	  for(var ii=0; ii<li.length-1; ++ii) { //On scanne tous les LI
				var sousUL = li[ii].getElementsByTagName('UL'); //Pour chaque LI on recupère le UL dessous
				if (sousUL[0]) { //On vérifié qu'il y a un UL dans le LI
					sousUL[0].id = IdMenu + ii; //On met un ID à ce UL
					sousUL[0].style.display = "none";
					li[ii].getElementsByTagName('A')[0].href= "javascript:ShowHideMenu('" + IdMenu + ii + "')";
				}  
			}
	}
	window.onload = init;
	
	function ShowHideMenu(MenuId){
		var SousMenu = document.getElementById(MenuId);
		if (SousMenu.style.display=='block' || SousMenu.style.display == null) {
			SousMenu.style.display = 'none'; //ON cache le sous menu
		}
		else{ 
			SousMenu.style.display = 'block'; //On affiche le sous menu
		}
	}
	
	function init(){
		DynamMenu("menu");
	}


et voici le code HTML Pour tester

<ul id="menu">
	<li><a href="#">lien</a></li>
	<li><a href="#">lien</a></li>
	<li><a href="#">lien</a></li>
	<li><a href="#">Truc a cliquer pour etendre</a>
		<ul id="test">
			<li><a href="#">lien</a></li>
			<li><a href="#">infos 12</a>
				<ul>
					<li><a href="#">lien</a></li>
					<li><a href="#">encore un sous menu</a>
						<ul>
							<li><a href="#">lien</a></li>
							<li><a href="#">lien</a></li>
							<li><a href="#">encore un sous menu</a>
								<ul>
									<li><a href="#">lien</a></li>
									<li><a href="#">lien</a></li>
									<li><a href="#">encore un sous menu</a>
										<ul>
											<li><a href="#">lien</a></li>
											<li><a href="#">lien</a></li>
											<li><a href="#">lien</a></li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">lien</a></li>
				</ul>
			</li>
			<li><a href="#">lien</a></li>
		</ul>

	</li>
	<li><a href="#">lien</a></li>
	<li><a href="#">clic là aussi</a>
		<ul>
			<li><a href="#">lien</a></li>
			<li><a href="#">lien</a></li>
			<li><a href="#">lien</a></li>
		</ul>
	</li>
</ul>

Modifié par Felipe (04 Nov 2005 - 20:55)
* Javascript non intrusif pour menu liste de définition avec temporisation de sortie.
Utilisable pour :
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal


<!--
window.onload=function(){dynMenu("menu",1000)} // temporisé 1 seconde

dynMenu = function(idMenu,delai) {planq=0;
Menu=document.getElementById(idMenu);
dls = Menu.getElementsByTagName("dl");
dds = Menu.getElementsByTagName("dd");

if(dds){
  for(var i=0;i<dls.length;i++) {
    dls[i ].onmouseover=function(){
			clearTimeout(planq);
      smenu=this.getElementsByTagName("dd")[0]
      if(smenu){cachetout();smenu.style.display="block"}
    	}
   dls[i ].onmouseout=function(){
    if(delai)planq=setTimeout('cachetout()',delai);
  	}
   }
cachetout()
  }
document.onclick=cachetout;
}
function cachetout(){for(var j=0;j<dds.length;j++)dds[j].style.display="none";}
//-->

Tester

Un autre script pour appliquer une feuille de style sans javascript

Et pour finir un script pour liste non ordonnée multi-niveaux
Modifié par chmel (05 Nov 2006 - 00:31)
Vous faites des calculs finnanciers ?
Moi on me l'avait demandé, si ça peut vous aider ...
une fonction de séparation des milliers :

// Cette fonction insert un éspace tout les 3 chiffre, le soucis?
// => la réutilisation du chiffre en question après le formatage
// a utiliser avec une certaine vigilence et de préférence en dernier
// pour la simple mise en forme
function millier (chaine) {
	var seconde = "";
	var x=0;
	var y=x+3;
	var z=0;

	var modulo = (chaine.length)%3;
	if (modulo>=0){
		seconde = seconde + ((chaine.slice(x,modulo))+" ");
		x=x+modulo;
		y=y+modulo;
	}
	z=(chaine.length-modulo)/3;
	while (z>0){
		seconde =seconde + ((chaine.slice(x,y))+" ");
		x=x+3;
		y=x+3;
		z=z-1;
	}
	
	return seconde;
}
Bonjour, étant nouveau ici, j'espère avoir le droit de poster dans ce topic.

J'en ai plein en stock si vos voulez, il n'y a qu'à demander !

* getElementByAttribute
* Le nom de cette fonction est assez explicite non ?
* J'inclus ma doc avec le code (en commentaire avant le début de la fonction)

Code :

/*
document.getElementsByAttribute permet d'obtenir un tableau d'éléments DHTML, en fonction de leurs attributs.

@param String attribute Nom de l'attribut à rechercher
@param String value Facultatif : Valeur de l'attribut

Si la valeur de l'attribut n'est pas spécifiée, tous les éléments DHTML possédant l'attribut seront retournés.
Si la valeur est spécifiée, tous les éléments DHTML dont l'attribut demandé contient la valeur indiquée seront retournés.

@return ARray Un tableau contenant tous les objets DHTML trouvés est retourné.

@Note
Le navigateur doit supporter la fonction document.getElementsByTagName.

Fonction écrite par QuentinC.
*/
document.getElementsByAttribute = function (attribute, value) {
var objs = new Array();
objs = document.getElementsByTagName("*");
var tab = new Array();

for (var ii in objs) {
if (objs[ii]) {

if (objs[ii][attribute]) {
if (!value) tab[tab.length] = objs[ii];
else if (objs[ii][attribute].toLowerCase() == value.toLowerCase()) tab[tab.length] = objs[ii];
}

}
}

return tab;
}



Si vous en voulez d'autres, no problem.
Modifié par Felipe (04 Nov 2005 - 20:57)
Pour ma part voici le début d'une petite classe graphique dont la seule et unique fonction pour le moment permet d'atteindre progressivement une opacité sur un objet.

* Graph.setOpacity

/**
 * Classe de gestion graphique
 * 
 * @author : Marc Plessis
 * @version : 0.1
 * @date : 18/08/2005
 *
 */
function Graph() {
	this.constructor.apply(this,arguments);
}

//============================== Constantes ==================================

//============================== Variables ===================================
var opa=0;										//Pour gérer l'opacité de l'objet
var oOpacite=0;									//Pour avoir l'opacité à atteindre
var oPas=0;										//Pas pour atteindre l'opacité
var oObjet=false;								//Objet à modifier

Graph.prototype._oObj=false;					//Pour gérer l'objet à faire jouer
var tTimer=false;								//Permet de gérer le timer de relance

/**
 * Constructeur de la classe
 */
Graph.prototype.constructor=function(pObj,opacity) {

	//On initialise l'objet à faire jouer en variable
	if(pObj!=undefined) {
	
		this._oObj=document.getElementById(pObj)

		if (navigator.appName.indexOf("Explorer") > -1) {
			
			//Il s'agit de IE
			this._oObj.style.filter="Alpha(opacity="+(opacity*100)+")";
		}else{
			
			//Tentative de modification de la propriété opacity
			this._oObj.style.opacity=parseFloat(opacity);
		}
			
		//On indique le niveau d'opacité
		opa=opacity;
	}	
};

//=================================== Méthodes privées ======================================

//=================================== Méthodes publiques ======================================

/**
 * Méthode permettant de modifier l'opacité
 * @param int Opacity : opacité à atteindre
 * @param int Vitesse : Vitesse pour atteindre cette opacité en millisecondes
 * @param int nPas : Pas de modification de l'opacité
 * @param string oObj : Objet à modifier
 */
Graph.prototype.setOpacity=function(opacity,vitesse,nPas,oObj) {
	
	//On initialise les variables publique pour la fonction privée
	oOpacite=opacity;
	oPas=nPas;
	oObjet=oObj;
	
	//On appel la fonction suivant l'intervalle de temps demandée
	tTimer=setInterval(this._modOpacity,vitesse);
};

/**
 * Méthode permettant de modifier l'opacité (appel depuis la méthode publique)
 */
Graph.prototype._modOpacity=function() {
		
	//On met le pas d'avance à zéro
	var nPas_mod=0;
	
	//On va modifier l'opacité de l'objet
	if (opa>oOpacite) {
		nPas_mod = parseFloat(oPas) * -1;
	}else {
		nPas_mod=parseFloat(oPas);
	}

	if (navigator.appName.indexOf("Explorer") > -1) {
		
		//Il s'agit d'IE
		document.getElementById(oObjet).style.filter="Alpha(opacity="+((parseFloat(opa) + nPas_mod)*100)+")";
	}else{
		
		//Tentative de modification du niveau d'opacité
		document.getElementById(oObjet).style.opacity=parseFloat(opa) + nPas_mod;
	}
			
	//On indique l'opacité en cours
	opa=parseFloat(opa) + nPas_mod;
	
	if (nPas_mod<0) {
		if (opa<=oOpacite) {
		
			//On détruit l'objet car c'est la fin de la fonction
			clearInterval(tTimer);
		}
	}else {
		if (opa>=oOpacite) {
		
			//On détruit l'objet car c'est la fin de la fonction
			clearInterval(tTimer);
		}
	}
};



Et voici un exemple d'utilisation :

/**
 * Module permettant de gérer les événements sur les pages HTML
 * 
 * @author : Marc Plessis
 * @version : 0.1
 * @date : 10/08/2005
 *
 */

//============================== Constantes ===============================
GRAPH_PASOPACITY=0.05;				//Pas d'ouverture de l'accueil
GRAPH_VITOPACITY=75;				//Vitesse d'ouverture de l'accueil
OBJ_ACCUEIL="c_centre_ind"			//Objet à ouvrir

//============================== Variables ===================================

/**
 * Méthode lancée au chargement de la page
 */
onLoad = function()
{
	
	//On initialise la classe d'opacite
	var oObjOpa = new Graph(OBJ_ACCUEIL,0);
	
    //On demande une opacite plus élevée
 oObjOpa.setOpacity(0.95,GRAPH_VITOPACITY,GRAPH_PASOPACITY,OBJ_ACCUEIL);
}
 
//On éxecute la fonction onLoad au lancement de la page
window.onload = onLoad;


Cette fonction ne tourne pas sur Opéra qui refuse de gérer l'opacité (pas testé sur les dernieres versions du navigateur, peut-être que cela a changé).
Je vous en remets. N'hésitez pas j'en ai encore plein !

* La célèbre fonction trim telle qu'on la connaît par exemple en php. Efface les blancs au début et à la fin d'une chaîne.


String.prototype.trim = function() {
	var reg = new RegExp("^\\s*");
	var reg2 = new RegExp("\\s*$");
	return this.replace(reg, "").replace(reg2, "");
};

Modifié par Olivier (25 Jan 2006 - 14:24)
* getDOMName retourne le nom d'un objet DOM

function getDOMName(DOMObject) //DOMObject(type : objet DOM)
{
   var tmp = new String();
   for (var i in DOMObject.parentNode.childNodes)
   {
     if(DOMObject.parentNode.childNodes[ i ] == DOMObject)
       tmp = i;
   }
   return tmp
}


* Fonction dont le parramètre est un objet DOM et qui retourne sont nom dans l'architecture DOM en string

* getDOMPath retourne en string le chemin d'un objet DOM

function getDOMPath(DOMObject) //DOMObject(type : objet DOM)
{
  var tmp = new String();
  var tmpObj = DOMObject;
  while(tmpObj.parentNode != null)
  {
    tmp = '.childNodes[' + getDOMName(tmpObj) + ']' + tmp;
    tmpObj = tmpObj.parentNode;
  }
  return 'document' + tmp
}


Fonction dont le paramètre est un objet DOM et qui retourne sont chemin en String
Modifié par heyman85 (17 Mar 2006 - 20:40)
Un script pour effectuer une transformation xslt côté client:
function transform(xml, xsl, id)
{
  try {
    // navigateur basé sur Gecko
    if (window.XSLTProcessor)
    {
      var fragment;
      var xsltProcessor = new XSLTProcessor();
    	
      xsltProcessor.importStylesheet(xsl);
      fragment = xsltProcessor.transformToFragment(xml, document);
      var target = document.getElementById(id);
      target.appendChild(fragment);
      document.appendChild(target);
      // ActiveX pour Internet Explorer
    } else if (window.ActiveXObject) {
      var target = document.getElementById(id);
      target.innerHTML = xml.transformNode(xsl);
    }
  } catch (e) {
    return e;
  }
}


xml et xsl sont des objets XML...Voici un exemple de chargement de fichiers XML:
function loadXML(url)
{
  var xmlDoc;

  /* chargement du fichier XML */
  try {
    // navigateur basé sur Gecko
    if (document.implementation && document.implementation.createDocument)
    {
      xmlDoc = document.implementation.createDocument('', '', null);
      xmlDoc.load(url);
    // ActiveX pour Internet Explorer
    } else if (window.ActiveXObject) {
      try {
        xmlDoc = new ActiveXObject('Msxml2.XMLDOM');
      } catch (e) {
        xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
      }
      xmlDoc.async = false;
      xmlDoc.load(url);
    // à l'aide de lobjet XMLHTTPRequest
    } else if (window.XMLHttpRequest) {
      xmlDoc = new XMLHttpRequest();
      xmlDoc.overrideMimeType('text/xml'); 
      xmlDoc.open('GET', url, false);
      xmlDoc.send(null);
      if (this.xmlDoc.readyState == 4) xmlDoc = xmlDoc.responseXML;
    }
  } catch (e) {
    return e;
  }
  return xmlDoc;
}
Un moyen simple de laisser choisir au visiteur s'il veut ou non activer javascript:

<body>

<p>
<a href="?yes">Je veux activer javascript.</a>
</p>

<script type="text/javascript"> 

if(location.search){
	var censure=document.createElement("script");
	censure.setAttribute("src","fonctions.js");// contient les instructions javascript;
	document.links[0].search="";
	document.links[0].firstChild.replaceData(3,12,"conchie");
	document.getElementsByTagName("body")[0].appendChild(censure);
}

</script>


Si le visiteur regrette son choix, il pourra corriger son erreur à l'infini;
Modifié par Javatwister (16 Apr 2006 - 16:11)
Utiliser les HTMLElement s avec n'importe quel navigateur (enfin pour Firefox, Opera, IE 6 & 7b2 testé)

L'implémentation de méthode sur ces classes permet de ne pas à avoir à faire une boucle sur tous les éléments du documents et d'ajouter à chaque élements la fonction et les problèmes que cela pose (perfomance, créations de nouveaux éléments en live ...).

behavior.htc (pour ie !)
<PUBLIC:COMPONENT>  
  <script type="text/javascript">
    [#green]/*
    HTMLElements Prototyping
    Thank to Jason Davis,  http://www.browserland.org/scripts/htmlelement/
 
    and  http://www.webmasterworld.com/forum91/4886.htm
 
    
    Here copying all methods & fields prototyped by script
    */[/#]
    
    [#green]// inherite all methods & fields of HTMLElement[/#]
    for(var j in HTMLElement.prototype)
      element[j] = HTMLElement.prototype[j];
    
    [#green]//if nodeName field exist & if is not document (HTMLElement methods & fields inherited)[/#]
    if(typeof element.nodeName != 'undefined' && element.nodeName != '#document')
    {
      var constructorName = 'HTML'+ constructors[element.nodeName] +'Element';
      [#green]// inherite all methods & fields of self HTMLElement constructor[/#]
      for(var j in eval(constructorName).prototype)
        element[j]= eval(constructorName).prototype[j];
    }
  </script>
</PUBLIC:COMPONENT>


script.js (le javascript)
var constructors = {
	HTML: 'Html', HEAD: 'Head', LINK: 'Link', TITLE: 'Title', META: 'Meta',
	BASE: 'Base', ISINDEX: 'IsIndex', STYLE: 'Style', BODY: 'Body',
	FORM: 'Form', SELECT: 'Select', OPTGROUP: 'OptGroup', OPTION: 'Option',
	INPUT: 'Input', TEXTAREA: 'TextArea', BUTTON: 'Button', LABEL: 'Label',
	FIELDSET: 'FieldSet', LEGEND: 'Legend', UL: 'UList', OL: 'OList',
	DL: 'DList', DT: 'Span', DD: 'Span', DIR: 'Directory', MENU: 'Menu', LI: 'LI', DIV: 'Div',
	P: 'Paragraph', H1: 'Heading', H2: 'Heading', H3: 'Heading', H4: 'Heading',
	H5: 'Heading', H6: 'Heading', Q: 'Quote', PRE: 'Pre', BR: 'BR',
	BASEFONT: 'BaseFont', FONT: 'Font', HR: 'HR', INS: 'Mod', A: 'Anchor',
	IMG: 'Image', OBJECT: 'Object', PARAM: 'Param', APPLET: 'Applet',
	MAP: 'Map', AREA: 'Area', SCRIPT: 'Script', TABLE: 'Table',
	CAPTION: 'TableCaption', COL: 'TableCol', TBODY: 'TableSection',
	THEAD: 'TableSection', TFOOT: 'TableSection', TR: 'TableRow',
	TD: 'TableCell', TH: 'TableCell', FRAMESET: 'FrameSet', FRAME: 'Frame', IFRAME: 'IFrame',
	SPAN: 'Span', FIELDSET : 'FieldSet'
};
[#green]//pour la Classe [#darkred]HTMLElement[/#][/#]
if(typeof HTMLElement == 'undefined') var HTMLElement = function(){};
[#green]//Pour les sousClasses [#darkred]HTML[/#]Xxx[#darkred]Element[/#] ou Xxx est contenu dans le tableau [i]constructor[/i][/#]
for(var j in constructors)
{
  var constructorName = 'HTML'+ constructors[j] +'Element';
  if(eval('typeof ' + constructorName +' == \'undefined\''))
    eval('var ' + constructorName + ' = function(){}');
}
[#green]//Et la partie la plus interéssante du script celle pour laquel tout ce script est fait : l'implémentation de méthode au classes HTMLElement s
Ici c'est l'implémentation de la méthode foo() sur tous les éléments Inputs[/#]
[#blue]HTMLInputElement.prototype.foo = function()
{
  alert(this.value)
};[/#]


index.html (pour le test)
<html>
  <head>
    <title>HTMLElement.prototype</title>
    <script type="text/javascript" src="script.js"></script>
    [#green]<!--[if ie]>
      <style type="text/css">
        *{behavior:url(behavior.htc)}
      </style>
    <![endif]-->[/#]
   </head>
   <body>
     <input type="button" onclick="this.foo()" value="click">
   </body>
</html>

Lors du clique sur le bouton il doit appraître une alertbox avec la valeur de l'input (c.a.d. "click").
Modifié par heyman85 (14 Jun 2006 - 12:15)
Menu avec effet tiroir

Du html

<dl class="menu">
  <dt>Rubrique</dt>
    <dd>
      <ul>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	</ul>
  </dd>
</dl>
<dl class="menu">
  <dt>Rubrique</dt>
  <dd>
    <ul>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	  <li><a href="#">Sous-rubrique</a></li>
	</ul>
  </dd>
</dl>


Une càc de css

body
{
	font-family: Arial, Helvetica, sans-serif;
	background: #EEE;
}
dl.menu, dl.menu dt, dl.menu dd, dl.menu dd ul, dl.menu dd ul li
{
	margin: 0px;
	padding: 0px;
}
dl.menu
{
	float: left;
	width: 150px;
	cursor: pointer;
}
dl.menu dt
{
	background: #FFF;
	font-size: 12px;
	font-weight: bold;
	color: #666;
}
dl.menu dd ul
{
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	border-left: 1px solid #CCC;
	width: 140px;
	margin: 0px auto;
	list-style-type: none;
	background: #EEE;
	font-size: 11px;
}
dl.menu dd ul li:hover
{
	background: #CCC;
}
dl.menu dd ul li a
{
	text-decoration: none;
	color: #666;
	padding-left: 5px;
}
dl.menu dd ul li a:hover
{
	color: #FFF;
	padding-left: 10px;
}


Une càs de javascript

var drawerMenu = {
	inc : 5,
	elements : new Array,
	timers : new Array,
	construct : function()
	{
		var dls = document.getElementsByTagName('dl');
		var n = 0;
		for(var i = 0; i < dls.length; i++)
		{
			if(dls[ i].className == 'menu')
			{
				n++;
				drawerMenu.timers[n] = 0;
				dls[ i].onmouseover = drawerMenu.triggerShow;
				dls[ i].onmouseout = drawerMenu.triggerHide;
				dls[ i].targetElement = n;
				for(var j = 0; j < dls[ i].childNodes.length; j++)
				{
					if(dls[ i].childNodes[j].nodeType == 1)
					{
						if(dls[ i].childNodes[j].tagName == 'DD')
						{
							dls[ i].childNodes[j].style.position = 'relative';
							dls[ i].childNodes[j].style.overflow = 'hidden';
							dls[ i].childNodes[j].style.height = '0px';
							for(var k = 0; k < dls[ i].childNodes[j].childNodes.length; k++)
							{
								if(dls[ i].childNodes[j].childNodes[k].nodeType == 1)
								{
									if(dls[ i].childNodes[j].childNodes[k].tagName == 'UL')
									{
										drawerMenu.elements[n] = dls[ i].childNodes[j].childNodes[k];					
										dls[ i].childNodes[j].childNodes[k].style.position = 'absolute';
										dls[ i].childNodes[j].childNodes[k].style.top = '-'+dls[ i].childNodes[j].childNodes[k].offsetHeight+'px';
									}
								}
							}
						}
					}
				}
			}
		}
	},
	triggerShow : function()
	{
		if(drawerMenu.timers[this.targetElement]) clearInterval(drawerMenu.timers[this.targetElement]);
		drawerMenu.timers[this.targetElement] = setInterval('drawerMenu.show('+this.targetElement+')', 20);
	},
	triggerHide : function()
	{
		if(drawerMenu.timers[this.targetElement]) clearInterval(drawerMenu.timers[this.targetElement]);
		drawerMenu.timers[this.targetElement] = setInterval('drawerMenu.hide('+this.targetElement+')', 20);
	},
	show : function(i)
	{
		var ul = drawerMenu.elements[ i];
		var t = parseInt(ul.style.top);
		var inx = Math.ceil(-t/drawerMenu.inc);
		if(t+inx < 0)
		{
			ul.style.top = (t+inx) +'px';
			ul.parentNode.style.height = (ul.offsetHeight+t+inx) + 'px';
		}
		else if(t < 0)
		{
			ul.style.top = '0px';
			ul.parentNode.style.height = ul.offsetHeight + 'px';
		}
		else
		{
			clearInterval(drawerMenu.timers[ i]);
			drawerMenu.timers[ i] = 0;
		}
	},
	hide : function(i)
	{
		var ul = drawerMenu.elements[ i];
		var t = parseInt(ul.style.top);
		var inx = Math.ceil(t/drawerMenu.inc);
		if(inx == 0) inx = -1;
		if(t+inx > -ul.offsetHeight)
		{
			ul.style.top = (t+inx) +'px';
			ul.parentNode.style.height = (ul.offsetHeight+t+inx) + 'px';
		}
		else if(t > -ul.offsetHeight)
		{
			ul.style.top = -ul.offsetHeight + 'px';
			ul.parentNode.style.height = '0px';
		}
		else
		{
			clearInterval(drawerMenu.timers[ i]);
			drawerMenu.timers[ i] = 0;
		}
	}
}

window.onload = drawerMenu.construct;


Exemple en ligne Smiley biggrin

Edit : C'est réglé pour les [ i] j'avais pas lu le post-it Smiley sweatdrop
Modifié par ds-network (15 Jun 2006 - 14:42)
Pages :