Fonctions, méthodes class et scripts utiles

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)

Eh, eh... Olivier tu te lache sur le JS

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)

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)

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

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