Fonctions, méthodes class et scripts utiles

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

* 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

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)

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)

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)

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)