Accueil
Accueil Le Club Delphi Kylix C C++ Java J2EE DotNET & C# Visual Basic Access Pascal Dev Web PHP ASP XML UML SQLSGBD Windows Linux Autres
logo

precedent    sommaire      


Comment afficher automatiquement des informations sur les élements d'une page en info-bulle?
auteur : Javatwister
Il suffit d'insérer ce code en bas de page.
<script type="text/javascript">
    document.write('<div style="position:absolute;display:none" id="bulle"></div>')
    var bal=false;
    var lien=false;
    var im=false;
    var bulle=document.getElementById('bulle');
    // affichage de la bulle
    function on(e){
        if(!e){
            window.event.cancelBubble=true
        }
        else{
            e.stopPropagation()
        };
        //position de la bulle
        ns= (navigator.appName.search("Nestcape")!=-1) ? window.pageXOffset : 0;
        ns2= (navigator.appName.search("Nestcape")!=-1) ? window.pageYOffset : 0;
        posx= (!e) ? event.clientX+document.documentElement.scrollLeft : e.pageX+ns;
        posy= (!e) ? event.clientY+document.documentElement.scrollTop : e.pageY+ns2;
        hori=(posx > (screen.availWidth - 200)) ? -250 : 0;
        bulle.style.left= posx+hori+"px";
        bulle.style.top= posy+"px";
        bulle.style.display='block';
        //gestion du type d'élément
        bal=document.createElement('div');
        bal.style.fontWeight=100;
        bal.style.backgroundColor="pink";
        typ=this.tagName=="INPUT" ? this.type : "";
        bal2=document.createTextNode("Balise \"" + this.tagName + " " + typ +
			"\"." + " (" + tags[this.tagName] + ") ");

        bal.appendChild(bal2);
        bulle.appendChild(bal);
        //gestion des liens
        if(this.tagName=="A"){
            lien=document.createElement('div');
            lien.style.fontWeight=100;
            lien.style.backgroundColor="orange";
            lien2=document.createTextNode(" Adresse: \"" + this.href + "\".");
            lien.appendChild(lien2);
            bulle.appendChild(lien)
        };
        //gestion des images
        if(this.tagName=="IMG"){
            im=document.createElement('div');
            im.style.fontWeight=100;
            im.style.backgroundColor="yellow";
            im2=document.createTextNode("Adresse: \"" + this.src + "\".");
            im.appendChild(im2);
            bulle.appendChild(im)
        };
    }
    //masquage de la bulle
    function off(e){
        if(!e){
            window.event.cancelBubble=true
        }
        else{
            e.stopPropagation()
        };
        bulle.style.display='none';
        if(bal){
            bulle.removeChild(bal);
            bal=false
        };
        if(lien){
            bulle.removeChild(lien);
            lien=false
        };
        if(im){
            bulle.removeChild(im);
            im=false
        };
    }
    // ajoutez ou enlevez les éléments que vous voulez dans les tableaux suivants
    var tagtype=new Array('IMG','DIV','P','FORM','H1','TABLE','TD','A','SPAN',
		'INPUT','TEXTAREA','HR','H2','SELECT');
    var expl=new Array('image','contenant de type bloc','paragraphe','formulaire',
		'titre n°1','tableau','cellule de tableau','lien','contenant intra-ligne',
		'contrôle de formulaire','zone de texte multiligne','barre horizontale',
		'titre n°2','liste d\'options');
    var tags=new Array();
    for(i=0;i != tagtype.length;i++){
        tags[tagtype[i]]=expl[i]
    }
    for(i=0;i != tagtype.length;i++){
        for(j=0;j != document.getElementsByTagName(tagtype[i]).length;j++){
            document.getElementsByTagName(tagtype[i])[j].onmouseover=on;
            document.getElementsByTagName(tagtype[i])[j].onmouseout=off;
        };
    }
    document.body.onclick=off;
</script>

Comment afficher l'heure en temps réel ?
auteur : simone.51
Les timers Javascript permettent d'executer des fonctions à des intervalles de temps donnés. Ainsi, pour notre horloge, nous allons utiliser setInterval qui se déclenchera toutes les 1000ms pour mettre à jour l'heure affichée sur l'horloge.

Voici la fonction pour afficher l'heure :
function runClock() {
  today   = new Date();
  hours   = today.getHours();
  minutes = today.getMinutes();
  seconds = today.getSeconds();
  timeValue = hours;

  // Les deux prochaines conditions ne servent que pour l'affichage.
  // Si le nombre de minute est inférieur à 10, alors on rajoute un 0 devant...

  timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
  timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
  document.getElementById("time").value = timeValue;
  timerRunning = true;
}
timerID = setInterval(runClock,1000);
Et voici le champ texte :
<input type="text" id="time" size=10>
lien : Exemple d'utilisation de ce script

Conversion d'un tableau PHP de dimension N en tableau JavaScript
auteurs : torvalds17, simone.51
Voici le code de la fonction php permettant la conversion :
<?php

function construisTableauJS($tableauPHP, $nomTableauJS){
   echo $nomTableauJS." = new Array();";
   for($i = 0; $i < count($tableauPHP); $i++){
      if(!is_array($tableauPHP[$i])){
         echo $nomTableauJS."[".$i."] = '".$tableauPHP[$i]."';";
      }
      else{
         construisTableauJS($tableauPHP[$i], $nomTableauJS."[".$i."]");
      }
   }
   return;
}

?>
Dans cette fonction, le code Javascript est généré dynamiquement par le Php. On utilise des echo (Php) pour écrire les ligne de code Javascript.
Voici la déclaration du tableau en php :
$monTableauPHP = array(array("toutou", "toto"), array("titi", "tata",
	array("tonton", "tutu", array("quatrieme etage du tableau", 54))));
On peut éventuellement afficher le tableau grâce à :
<?php
echo "<pre>";
print_r($monTableauPHP);
echo "</pre>";
?>
Et voici le code permettant la création du tableau Javascript :
echo "<script type='text/javascript'>";
construisTableauJS($monTableauPHP, "monTableauJS");
document.write(monTableauJS.toSource());
echo "</script> ";
Vous obtenez ainsi un tableau Javascript : monTableauJS à partir d'un tableau php : $monTableauPHP


Comment permettre aux internautes de trier une liste ?
auteurs : SpaceFrog, simone.51
Voici un code qui permet à un utilisateur d'ordonner comme bon lui semble une liste (déroulante ou pas)
<HTML>
<script type="text/javascript">
var Obj=null;

function Deplacer(sens){
    if(Obj==null){return false;};
    var OptionSel= Obj.selectedIndex;

switch (true){
    case ( Obj.length == -1 & sens==-1):
        alert('Pas d\'option à déplacer');
        break;
    case(OptionSel== -1):
        alert('Selectionnez une option à déplacer');
        break;
    case(Obj.length==0):
        alert('Il n\'y a qu\'une option \!');
        break;
    case(OptionSel== 0 && sens==-1):
        alert('La première option ne peut être déplacée');
        break;

   case(OptionSel== Obj.length-1 && sens==1):
        alert('La dernière option ne peut être déplacée');
         break;

    case(sens==-1):
        // Ce code est le code qui est appelé lorque l'on veut remonter une
		//		option dans la liste
        // On mémorise dans des variables le texte et les valeurs des éléments
		// 		que l'on déplace.
        // Il suffit ensuite d'échanger les deux éléments
        var moveText1 = Obj[OptionSel-1].text;
        var moveText2 = Obj[OptionSel].text;
        var moveValue1 = Obj[OptionSel-1].value;
        var moveValue2 = Obj[OptionSel].value;

        // Echange des éléments
        Obj[OptionSel].text = moveText1;
        Obj[OptionSel].value = moveValue1;
        Obj[OptionSel-1].text = moveText2;
        Obj[OptionSel-1].value = moveValue2;
        Obj.selectedIndex = OptionSel-1;
        break;

   case(sens==1):
         // On procède de la même manière que pour faire monter une option.
         // La différence, c que dans ce cas, on prend en compte l'option suivante,
		 // 	et non la précedente comme auparavant
         var moveText1 = Obj[OptionSel].text;
         var moveText2 = Obj[OptionSel+1].text;
         var moveValue1 = Obj[OptionSel].value;
         var moveValue2 = Obj[OptionSel+1].value;
         Obj[OptionSel].text = moveText2;
         Obj[OptionSel].value = moveValue2;
         Obj[OptionSel+1].text = moveText1;
         Obj[OptionSel+1].value = moveValue1;
         Obj.selectedIndex = OptionSel+1;
         break;
    }
}
</script>



<BODY>
<FORM>

<select name="tag1" id="tag1" size="8" STYLE="WIDTH: 200px"
	onclick="Obj=this;" style="float:left;">
<option value="0">TEST1</option>
<option value="1">TEST2</option>
<option value="2">TEST3</option>
<option value="3">TEST4</option>
<option value="4">TEST5</option>
<option value="5">TEST6</option>
<option value="6">TEST7</option>
<option value="7">TEST8</option>
</select>
<div style="float:left;"><br/>
<br/>
<input type="button" name="boutMonter" id="boutMonter" value="Monter"
	onClick="Deplacer(-1);" style="width:80px"/><br/><br/>
<input type="button" name="boutDesc" id="boutDesc" value="Descendre"
	onClick="Deplacer(1);" style="width:80px"/>
</div>
</FORM>
</BODY>
</HTML>
Grâce à ce code, lorsque l'on clique sur sur un item de la liste pour le déplacer, la variable Obj prend la valeur de la liste déroulante.
Ainsi, dans la fonction deplacer, la variable Obj fait appel à la liste en question.
La variable OptionSel ne sert qu'à raccourcir les ligne de codes. Elle évite ainsi d'avoir à retaper à chaque fois Obj.selectedIndex.


Comment afficher la liste des balises d'un document?
auteur : Javatwister
Ce script permet d'afficher les balises qui composent le document, dans l'ordre:
Afficher les balises d'un document
/* Affiche les balises d'un noeud b. */
function afficheBalises(b){
	var d = "";
	var descendants = b.getElementsByTagName('*');
	for( i=0 ; i<descendants.length ; i++ ){
		var dist = distance(b,descendants[i]);
		for ( j=0 ; j < (dist-1) ; j++) {
			d += "__";
		}
		d += descendants[i].nodeName+'\n';
	}
	alert(d)
}
/* Calcule la distance entre deux noeuds. */
function distance(ancetre, descendant) {
	var dist = 0;
	var courant = descendant;
	while (courant != ancetre) {
		if (courant == null) {
			dist = -1;
			break;
		}
		dist += 1;
		courant = courant.parentNode;
	}
	return dist;
}
window.onload = function() {afficheBalises(document)};

precedent    sommaire      

Consultez les autres F.A.Q's


Les sources présentés sur cette pages sont libre de droits, et vous pouvez les utiliser à votre convenance. Par contre cette page de présentation de ces sources constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright ©2004  Developpez LLC. Tout droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérets. Cette page est déposée à la SACD.

Vos questions techniques : forum d'entraide Accueil - Publiez vos articles, tutoriels, cours et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones. Nous contacter - Copyright 2000..2005 www.developpez.com