[Ancien]Page Code Source

Version imprimable

Voir 40 message(s) de cette discussion en une page

13/07/2004, 01h29
denisC

[Ancien]Page Code Source

Bonjour à tous.

L'équipe a pensé qu'il pourrait être intéressant de mettre à disposition une page recensant les petits bouts de codes récurrents, plutôt utiles pour vos développements.
Nous espérons que vous ajouterez les votres ci-dessous.
Nous nous efforcerons d'adapter ceux mis dans le forum également.

Merci donc, de poster ci-après ce que vous souhaitez mettre à la disposition de tous (votre code, ou celui d'autres dans ce forum). Ce code sera entièrement libre et gratuit.

Ce thread est un espace de stockage temporaire de vos codes avant intégration dans la future page Sources

Précisez à chaque fois :
- Titre
- Auteur
- Champ d'application

La rubrique Delphi possède déjà une telle page page sources : http://delphi.developpez.com/sources...fic_ressources, la nôtre sera semblable.

Merci de nous aider dans ce sens, et de permettre ainsi d'aider encore plus de monde.

L'équipe WEB.

[EDITION 15 JANVIER 2006]
La page est en cours de finalisation, vous pouvez rajouter des sources ici, elles seront intégrées.

Code permettant d'appeler des données serveur sans actualisation

Il s'agit de sortir à la demande les scores et les participants d'un jeu de poker.
Dès que le client tape un caractère, le serveur lui renvoie tous les résultats qui correspondent, dans l'ordre alphabétique;

Le principe est d'aller chercher les données dans une table MySQL via un fichier php appelé par

Code:

<script src="">

Pas de formulaire sur cette page, ce qui fait qu'on est plus dans une logique d'affichage de résultats que dans un système de suggestions (toute accusation de plagiat d'un certain google suggest serait démentie avec la dernière énergie).

Mais rien n'empêche de continuer le processus de sélection par un clic sur l'item, qui renverrait les valeurs dans un vrai formulaire, pour une autre soumission...

La table Mysql contient ici 2 simples champs "nom" (chaîne) et "score" (nombre)

page html (extension .php)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Affichage à la demande, sans quitter la page</title>


<style type="text/css">
ul {padding:0px;margin:0px;border:1px black solid;width:250px;height:200px;overflow:auto;list-style:none;}
.un {text-transform:lowercase;float:left;width:70%;font-size:12px;text-align:left;}
.un:first-letter {text-transform:uppercase;}
.deux {text-transform:lowercase;float:left;width:20%;font-size:12px;text-align:right;color:#ffffff;}
label {font-weight:bold;}
</style> 

</head>

<body>

<div id="scr"></div>

<script type="text/javascript">
// option d'affichage
var ordre="user";

function go(n){
// réduction des espaces multiples à un seul, dans la saisie
n=n.replace(/\s+/g,' ');

// si la saisie n'est pas vide
if(n.replace(/\s/g,'')){
// on vide tout le contenu de la balise div accueillant le script src=""
var cadre=document.getElementById("scr");
while(cadre.lastChild){cadre.removeChild(cadre.lastChild)};

// on crée une nouvelle balise de script
var newscr=document.createElement('script');
// on échappe les caractères ', " et \ dans la saisie
n=n.replace(/([^'"\\]*)(['"\\])/g,"$1\\\\$2");
// on donne pour propriété src à la balise l'adresse d'un fichier php qui va traiter les requêtes
// avec en arguments la valeur saisie et l'option choisie
newscr.setAttribute("src","suggest.inc.php?ch="+n+String.fromCharCode(38)+"ordre="+ordre);
// on affiche le script dans le div hôte
document.getElementById("scr").appendChild(newscr);
}
// sinon, on détruit la liste de résultats, si elle existe
else if(document.getElementById('liste')){
document.getElementById('f2').removeChild(document.getElementById('liste'));};
}
</script>

<div id="f2" style="margin:100px;text-align:left;">

<p style="text-align:left;">
<input type="radio" name="choix" checked="checked" onclick="ordre='user';document.getElementById('t').focus()" />meilleur score des participants<br />
<input type="radio" name="choix"  onclick="ordre='score';document.getElementById('t').focus()" />tous les scores par ordre des participants<br />
</p>

<input type="text" style="width:250px" id="t" onkeyup="go(this.value)" /> 
<label for="t">Saisissez le nom d'un concurrent</label>

</div>

</body>
</html>

fichier inclus (suggest.inc.php)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// si la liste de résultats existe, on la détruit;
if(document.getElementById('liste')){
document.getElementById('f2').removeChild(document.getElementById('liste'));};
 
// on crée une nouvelle balise de liste "ul" 
var l=document.createElement("ul"); 
 
<?php
// script d'accès à une table mysql, dans un fichier inclus
include('acces.inc.php');
 
// définition des variables recuillies dans l'url
$ch=$_GET['ch'];
$ordre=$_GET['ordre'];
 
// selon l'option choisie ('score' ou 'user'), la requête varie
if($ordre!='score'){
// sélection dans la table du meilleur score de chaque participant commençant par les lettres saisies
$req="select texte, MAX(score) AS score from poker where texte LIKE '$ch%' group by texte order by texte";}
else{
// sélection des scores ordonnées du meilleur au pire, pour les participants commençant par les lettres saisies
$req="select texte,score from poker where texte LIKE '$ch%' order by score desc,texte";};
$liste=mysql_query($req) or die('damned');
 
// nombre de résultats
$tot=mysql_num_rows($liste);
// s'il y a des résultats!
if($tot>0){
// pour chaque résultat
while ($liste2=mysql_fetch_array($liste)){
// on crée un élément 'li'
echo 'var it=document.createElement("li");'; 
// on crée un élément 'div' qui contiendra le participant
echo 'var itnom=document.createElement("div");'; 
// on crée un élément 'div' qui contiendra le score
echo 'var itscore=document.createElement("div");'; 
// on affecte les données au premier div
echo "var nomtx=document.createTextNode(\"$liste2[0]\");"; 
echo 'itnom.appendChild(nomtx);';
// on affecte les données au second div
echo "var scoretx=document.createTextNode(\"$liste2[1]\");"; 
echo 'itscore.appendChild(scoretx);';
// on définit la classe css des div
echo 'itnom.className="un";';
echo 'itscore.className="deux";';
// on affecte à la balise 'li' chacun des div
echo 'it.appendChild(itnom);';
echo 'it.appendChild(itscore);';
echo 'it.style.clear="left";';
// on affecte à la liste 'ul' chacun des éléments 'li'
echo 'l.appendChild(it);';
};
 
// ondonne un id à la liste
echo 'l.setAttribute("id","liste");';
// on affecte la liste à l'élément 'f2', dans la page
echo 'document.getElementById("f2").appendChild(l);';
};
?>

exemple: http://javatwist.imingo.net/suggest.php

La méthode innerText d'Internet Explorer, vous vous souvenez?

voici comment afficher le texte brut d'un document (utilité: 0,5 sur une échelle de 0 à 10) :P
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <script type="text/javascript"> var texte; var inner; function go(n,arch){// arguments "body", "élément déclencheur à sauvegarder" texte=""; // collecton de toutes les balises du body var bal=n.getElementsByTagName('*'); // on parcourt toutes les balises for(i=0;i<bal.length;i++){ // et tous leurs noeuds for(j=0;j<bal[i].childNodes.length;j++){ // si un noeud texte est repéré if(bal[i].childNodes[j].data){ // on ajoute son contenu à la chaîne "innerText" texte+=bal[i].childNodes[j].data+" "}}}; // on crée un div inner=document.createElement('div'); inner.style.border="solid 1px #ff0000"; inner.style.width="400px"; // en cliquant sur ce div, on restaurera le bouton de départ inner.onclick=function(){n.replaceChild(arch,this)}; // on place la chaîne "innerText" dans le div inner.appendChild(document.createTextNode(texte)); //on place le div en haut de page, à la place du bouton qui appelle la fonction n.replaceChild(inner,bal[0]); } </script> </head> <body> <p> <input type="button" value="voir le texte brut du document" onclick="go(document.body,this)" /> </p>
Dans la suite du document, toutes les balises seront automatiquement prises en compte, quels que soient les degrés de parenté;

remarque: extraordinairement, la méthode inner.setAttribute pour générer l'attribut onclick n'est pas acceptée par Firefox :lol:
du coup, j'ai adopté la méthode la plus large d'esprit

18/04/2005, 22h47
Celelibi
Comment mélanger les éléments d'un tableau ?

L'objet Array ne dispose pas de méthode faisant cela. Nonobstant il est possible de le faire grâce à la méthode sort.
Code:

1 2 3 4 5 6 7 8 function shuffle() { var funct = function () { return Math.floor((3*Math.random())-1); // retourne -1, 0 ou 1 }; return this.sort(funct); } Array.prototype.shuffle = shuffle;
Voir la documentation de la méthode sort pour en savoir plus sur son argument.

Ensuite on l'appel de la manière suivante :
Code:

1 2 var tablo = new Array(9, 5, 1, 7, 0, 3, 2, 8, 6, 4); tablo.shuffle();

Comment choisir n valeurs d'un ensemble de manière aléatoire sans doublon?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function random(){
var maxi=10;// nombre de valeurs à générer;
var tab=new Array("un","deux","trois","quatre","cinq","six","sept","huit","neuf","dix");// le tableau de valeurs possibles;
var tab2=new Array();// un tableau vide;
 
for(i=0;i<maxi;i++){// l'indice maximal est la longueur initiale du tableau;
 
var h=Math.floor(Math.random()*tab.length);// valeur aléatoire choisie parmi les éléments du tableau
tab2[i]=tab[h];// remplissage du tableau vide;
tab.splice(h,1)}// suppression de l'élément choisi dans le premier tableau
 
alert(tab2.join(' '));
}
 
 
random()

Le complément de la méthode perso "innerText" de l'autre jour:

Comment afficher la structure d'un document html?

Ce code est à insérer intégralement en haut de vos documents: il s'adaptera à vos structures les plus folles :wow:
(j'espère)

==> attention, si vous voulez conserver une page "xhtml valide", insérez le script dans un .js externe: je n'ai pas pris le temps de réécrire les "<" dans le code, ce qui permet d'alléger l'ensemble;

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script type="text/javascript">
 
function structure(n,arch){
 
var tags=new Array();
var large=0;
var enf=n.getElementsByTagName('*');
 
for(i=2;i!=n.getElementsByTagName('*').length;i++){
var tparent=enf[i];
var rang=-3;
while(tparent.parentNode){
tparent=tparent.parentNode;rang++;
if(rang>=large){large=rang}};
 
tags.push("l"+(rang*60+5)+"<"+enf[i].tagName.toLowerCase()+">");
tags.push(enf[i].getElementsByTagName('*').length);
}
 
 
for(i=0;i != tags.length;i++){
if(isFinite(tags[i])){
tags.splice(2*tags[i]+i+1,0,tags[i-1].replace('<','</'))};
 
var mono=/\/(br|input|img|hr)\>/g;
if(isFinite(tags[i]) || tags[i].search(mono)!=-1){
tags.splice(i,1,"")};
}
 
for(i=0;i != tags.length;i++){
if(tags[i+2]==tags[i].replace('<','<\/')){
tags[i]+=tags[i+2];
tags[i]=tags[i].replace('\n','');
tags.splice(i+2,1,"")};
 
var mono2=/\<(br|input|img|hr)\>/;
tags[i]=tags[i].replace(mono2,"<$1 />");
 
if(tags[i].split('<').length>2){tags[i]=tags[i].replace(/\>l\d+/,"> ")};
 
}
 
cadre=document.createElement('p');
cadre.style.cssText="margin-left:auto;margin-right:auto;text-align:left;font-weight:bold;border:solid #ff0000 2px;background-color:#ffff00;width:"+(large*60+100)+"px";
cadre.title="Cliquez pour m'effacer";
cadre.onclick=function(){enf[0].replaceChild(arch,this)}; 
 
for(i=0;i != tags.length;i++){
if(tags[i]!=""){
bb=document.createElement('div');
bb.style.marginLeft=tags[i].replace(/[^\d]+/g,"")+"px";
bb.appendChild(document.createTextNode(tags[i].substring(tags[i].indexOf('<'))));
cadre.appendChild(bb);}};
 
enf[0].replaceChild(cadre,arch);
}
 
</script>
 
</head>
 
<body>
 
<div style="text-align:center"> 
<input type="button" value="voir le texte brut du document" onclick="structure(document.body,this)" /> 
</div>

Un petit script pour changer le style "à la volée"...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function styleSwitcher(title)
{
  link = document.getElementsByTagName('link');
 
  for (var i = 0; i < link.length; i++)
  {
    if ((link[i].rel.indexOf('style') != -1) && (link[i].title))
      link[i].disabled = true;
    if (link[i].title == title)
      link[i].disabled = false;
  }
}

Ou encore obtinir le style courant...

Code:

1
2
3
4
5
6
7
8
9
10
function getCurrentStyle()
{
  link = document.getElementsByTagName('link');
 
  for (var i = 0; i < link.length; i++)
    if ((link[i].rel.indexOf('style') != -1) && (link[i].title))
      return link[i].title;
 
  return null;
}

Numéro du jour et de la semaine...

Voici une fonction qui permet d'avoir le numéro du jour dans l'année (1 à 365/366)...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getYearDay()
{
	var tmp = new Date(); // objet Date afin de marquer le premier jour de l'année
	var time = new Date(); // objet Date marquant le jour courrant
 
	tmp.setDate(1); // 1er
	tmp.setMonth(0); // janvier de l'année
 
	var tmp = tmp.getTime(); // temps en millisecondes du 1er janvier 1970 au 1er janvier de l'année
	var time = time.getTime(); // temps en millisecondes du 1er janvier 1970 à aujourd'hui
 
   /* on remet à l'échelle */
	var yearDay = Math.round(((time - tmp) / (24 * 3600000) + 1));
 
	return yearDay;
}

Puis une autre qui retourne le numéro de la semaine (1 à 52/53)...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getWeekNumber()
{
	var weekNumber = 0;
	var tmp = new Date(); // objet Date afin de marquer le premier jour de l'année
 
	tmp.setDate(1); // 1er
	tmp.setMonth(0); // janvier de l'année
 
	var firstDay = tmp.getDay() // numero du jour du 1er janvier (0:dimanche à 6:samedi)
 
	if (firstDay == 0) firstDay = 7; // si dimanche, alors on lui donne le numero qui va bien
	if ((firstDay < 5)) weekNumber++; // si la première semaine comporte le jeudi alors on la compte
   var rest = (7 - firsDay) + 1;
 
   weekNumber += Math.ceil((this.getYearDay() - rest) / 7);
 
	return weekNumber;
}

Elle peuvent aussi être adapté afin de retourner une valeur pour un jour définie...
Je ne peux pas dire que je les ai testé pour toutes les dates mais jusqu'à maintenant ça marche :roll:

[EDIT] rectification sur le calcul de la semaine ainsi que sur la manière d'arrondir...

entête de tableau fixe et tbody scrollant

Pour pallier à la lacune IE du Tbody qui ne scrolle pas ...
lorsque j'aurais un peut de temps je remplacerais le document.write ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>one</title>
<style type='text/css'>
td.headcol {width:auto;}
 
</style>
</head>
 
<body>
<div style="width:100%;overflow:hidden;">
<table border="1" style="width:100%;">
<tr colspan=5>
	<td class='headcol' id='col1'>one</td> 
	<td class='headcol' id='col2'>two</td> 
	<td class='headcol' id='col3'>three</td> 
	<td class='headcol' id='col4'>four</td>
   <td style="width:10px;">&nbsp;</td>
</tr>
</table>
<div>
 
<div style="width:100%;height:200px;overflow:auto;">
<table border="1" style="width:100%;">
<script type='text/javascript'>
var largcol = new Array()
for (i=1;i<5;i++){
largcol[i]=parseInt(document.getElementById('col'+i).offsetWidth)-3 + "px";
}
for (i=0;i<55;i++){
document.write("\<tr\>\<td style='width:"+largcol[1]+"'\>dsfqsdfsdd dsqf qsdf sdqf sqdf qsdf sdf &nbsp;\<\/td\>\<td style='width:"+largcol[2]+"'\>two\<\/td\>\<td style='width:"+largcol[3]+"'\>three\<\/td\>\<td style='width:"+largcol[4]+"'\>four\<\/td\>\<\/tr\>")
}
</script>
</table>
<div>
 
</body>
 
</html>

Je sais pas trop entre FAQ ou proposition de code source, mais ce n'est pas la première fois que je coirs cette question sur le forum ...
(remarquez depuis le temps que j'y traine c'est normal :lol: )

comment positionner l'item selectionné d'un select en haut le la zone visible:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <script type='text/javascript'> function selectedvisible(index){ var Obj=document.getElementById('sel') if(index>Obj.options.length-1){return false;} if(index+Obj.size<Obj.options.length){ Obj.selectedIndex=index+Obj.size; Obj.selectedIndex=index; } else{Obj.selectedIndex=Obj.options.length-Obj.size; Obj.selectedIndex=index;} } </script> </head> <body> <select id='sel' size=10 > <script type='text/javascript'> for(i=0; i<100;i++){document.write("<option>"+i+"</option>");} </script> </select> <input type='text' id="item" /> <input type="button" onclick="selectedvisible(document.getElementById('item').value)" value="selection"/> </script> </html>
Ce script peut très bien être adapté pour faire figurer l'element selectionné en milieu de liste ...

Un script pour effectuer une transformation xslt côté client:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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;
}

Fonction financière

Voilà une transcription de la fonction VB pmt qui retourne les annuités pour un pret à taux fixe avec versements constant...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script language="JavaScript" type="text/javascript">
 
function PMT(PV, Rate, nper) {
  var pmt = (PV * Rate) / (1 - Math.pow(1 + Rate, -nper))
  return arrondi(pmt, 2)
}
 
function arrondi(Nombre, decimales) {
  var temp1 = Nombre * Math.pow(10, decimales)
  var temp2 = Math.round(temp1)
  var temp3 = temp2 / Math.pow(10, decimales)
  return (temp3)
}
 
var Montant_total = 200000
var taux_interet = 0.09
var duree = 30
var annuite = PMT(Montant_total,taux_interet / 12, duree * 12)
 
function populate(){
document.body.appendChild(document.createTextNode("Montant du prêt:" + Montant_total+ " €"))
document.body.appendChild(document.createElement('br'))
document.body.appendChild(document.createTextNode("Taux d'intérêt :" + taux_interet * 100 + "%"))
document.body.appendChild(document.createElement('br'))
document.body.appendChild(document.createTextNode("Durée du prêt :" + duree + " années"))
document.body.appendChild(document.createElement('br'))
document.body.appendChild(document.createElement('br'))
document.body.appendChild(document.createTextNode("Annuité:" + annuite +" €"))
}
 
</script>

J'avoue que l'on ne s'en sert pas tous les jours ... :roll:

Comment rendre une balise object cliquable ...

deux solutions:
soit une image .gif de 1 pixel transparent moins groumande en place :
Code:

1 2 <object style="position:absolute;z-index:-100; top:100;left:100;height:100;width:100;border:solid 2px red;"></object> <div style="position: absolute; z-index: 100; cursor: pointer; top: 100; left: 100; height: 100; width: 100; background-image: url('transp.gif'); background-repeat: repeat;" onclick="alert('coucou')" ></div>
soit une image .gif tansparente de la taille de l'objet et on utilise juste une balise img sur le même principe ... ce qui permet éventuellement de mapper l'image ...
Code:

1 2 <object style="position:absolute;z-index:-100; top:100;left:100;height:100;width:100;border:solid 2px red;"></object> <img style="position: absolute; z-index: 100; cursor: pointer; top: 100; left: 100; height: 100; width: 100;" onclick="alert('coucou')" src="tranps.gif" > />

bannière bas de page up & down ...

un petit script vite fait pour une bannière de bas de page qui monte et descend...
pour le code déclenché par un bouton ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Bannière bas </title>
<script type="text/javascript">
var pos=-101
function launch(){
var banniere=document.getElementById('banniere')
var moveup=setInterval(function(){   
                              if(pos==0){clearInterval(moveup)}
                              else{banniere.style.bottom=pos;
                                   pos++;}
                               },10)   
 
setTimeout(function(){
var movedown=setInterval(function(){   
                              if(pos==-102){clearInterval(movedown)}
                              else{banniere.style.bottom=pos;
                                   pos--;}
                               },10)   
},5000)
 
}
</script>
 
</head>
 
<body style="overflow:hidden;margin:0px;">
<input type="button" onclick="launch()" value="go" />
<div id="banniere" style="position:absolute; bottom:-101px;left:0px; width:100%;background-color:red;color:white; font-size:30px;text-align:center;height:100px;width:100%;">bannière</div>
</body>
</html>

attention le body doit être en overflow:hidden...
faire attentions aux hauteurs du div pour le scroll...
le temps visible ici 5 secondes est dans le setTimeout ...
_________________

25/04/2006, 12h30
javatwister

En bossant sur la suppression dynamique de colonnes, j'en suis arrivé à faire des colonnes avec des listes: pas plus gourmand en html et finalement, le rendu n'est pas si éloigné;
L'intérêt est surtout de pouvoir atteindre n'importe quelle colonne sans boucler comme un malade...

lien avec beaucoup de données http://javatwist.imingo.net/ikea.htm

(je ne peux pas décemment mettre tout ce html ici mais j'attends de savoir si ça intéresse quelqu'un pour en faire un abrégé);
25/04/2006, 20h25
siddh

oui c'est interressant :D

bon alors je me lâche; merci siddh 8-)

[pour ceux qui liraient en diagonale, ne vous laissez pas impressionner par le nombre de lignes, l'important c'est le script (pas si long, avouez-le) et la css]

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tableau Ikea</title>
 
<style type="text/css">
#zone {
padding-top:50px;
height:300px;
width:100%;
overflow:auto;
}
#cadre {
visibility:hidden;
margin:0px;
}
.tit {
height:20px;
border-bottom:1px solid;
background-color:#ffff00;
font-weight:bold;
text-align:center;overflow:hidden;
}
#cadre ul {
border:1px solid;
height:200px;
float:left;
line-height:20px;
list-style-type:none;
margin:1px;
padding:0px;
background-color:cyan;
}
.ul1 {
width:100px;
overflow:auto;
}
.ul2 {
width:20px;
overflow:hidden
}
#cadre li {
border-bottom:1px solid;
}
#fantome {
font-size:20px;
font-weight:bold;
text-align:center;
padding-top:30px;
clear:left;
}
</style>
 
<script type="text/javascript">
var c, l, tot2;
var tot=30;
var t=[];
window.onload=function(){
 f=document.getElementById("fantome");
 c=document.getElementById("cadre");
 l=c.getElementsByTagName("ul");
 tot=30;
 for(i=0;i!=l.length;i++){
  t.push(l[i]);
  l[i].title=l[i].getElementsByTagName("li")[0].firstChild.data;
  tot+=l[i].offsetWidth+2;
  l[i].onmouseover=function(){
   f.firstChild.data=this.title;
  }
  l[i].onmouseout=function(){
    f.firstChild.data="?";
  }
  l[i].onclick=function(){
   if(this.className=="ul1"){
    this.className="ul2";
    c.appendChild(this);
    tot-=80;
    c.style.width=tot+"px";
   }
   else{
    this.className="ul1";
    c.insertBefore(this,l[0]);
    tot+=80;
    c.style.width=tot+"px";
    location.href="#t1";
   }
  }
 }
 c.style.width=tot+"px";
 c.style.visibility="visible";
 tot2=tot;
}
 
function ordo(){
 for(i=0;i!=l.length;i++){
  c.appendChild(t[i])
 }
}
 
function stretch(){
 for(i=0;i!=l.length;i++){
  l[i].className="ul1";
 };
 tot=tot2;
 c.style.width=tot+"px";
}
</script>
 
</head>
<body>
 
<div id="zone">
<div id="cadre">
<a id="t1">.</a>
 
 
 <ul class="ul1">
  <li class="tit">titre 1</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
 </ul>
 
 <ul class="ul1">
  <li class="tit">titre 2</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
 </ul>
 
 <ul class="ul1">
  <li class="tit">titre 3</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
 </ul>
 
 <ul class="ul1">
  <li class="tit">titre 4</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
 </ul>
 <ul class="ul1">
  <li class="tit">titre 5</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
 </ul>
 
 <ul class="ul1">
  <li class="tit">titre 6</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
 </ul>
 
 <ul class="ul1">
  <li class="tit">titre 7</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
 </ul>
 
 <ul class="ul1">
  <li class="tit">titre 8</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
  <li>seize</li>
  <li>dix-sept</li>
  <li>dix-huit</li>
  <li>dix-neuf</li>
  <li>vingt</li>
 </ul>
</div>
</div>
<div id="fantome">?</div>
<p style="text-align:center;padding-top:30px;">
<strong>
En cliquant sur une colonne, on la réduit et on l'envoie en fin de tableau;
<br />
Si on clique à nouveau dessus, on l'envoie en première position et on l'agrandit.
</strong>
<p style="text-align:center;">
<input type="button" value="réordonner" onclick="ordo()" /> 
<input type="button" value="déployer" onclick="stretch()" />
</p>
</body>
</html>

25/04/2006, 22h54
siddh

en plus c'est des listes et pas des tables :D
25/04/2006, 23h03
siddh
bon puisque on arrête pas de mettre des trucs sur le onload, voici un petit gestionnaire de chargement.

Pas parfait car il ne prend pas d'arguments pour les différentes méthodes et il me semble que call est dépréciée mais c'est super pratique quand même.

Et surtout je ne voulais pas faire un eval :D
Code:

1 2 3 4 5 6 var loads = new Array(); window.onload=function(){ for(var i=0;i<loads.length;i++) loads[i].call(); }
et apres il suffit de faire des trucs comme ça pour ajouter une action a déclencher sur le chargement :
Code:

1 2 3 4 5 function doSomething(){ alert("hello"); } loads.push(doSomething);

un petit code rigolo dont je vous laisse deviner l'intention ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
<script type="text/javascript">
var tab=[];
var t2, ind, ind2;
function arch(t){
 if(!t2){
  t2=t
 };
 if(t.value!=tab[ind]){ 
  tab.push(t.value);
 };
 ind=tab.length-1;
 ind2=ind;
}
 
function nav(sens){
 
 switch(sens){
  case "moins" :  if(ind2>0){
     t2.value=tab[--ind2]
    }
    else if(ind2==0){
     t2.value="";
     ind2--
    };
    break;
  case "plus" : if(ind>=ind2){
     t2.value=tab[++ind2]
    };
    break;
  default :  t2.value=tab[ind];
    ind2=ind;
    break;
 }
}
 
</script>
</head>
<body>
<div style="text-align:center;padding:30px;">
<textarea rows="10" cols="50" onkeyup="arch(this)"></textarea>
<p>
<input type="button" value="avant" onclick="nav('moins')" />
<input type="button" value="après" onclick="nav('plus')" />
<br />
<input type="button" value="texte actuel" onclick="nav()" />
</p>
</div>
</body>
</html>

26/04/2006, 11h22
siddh

effectivement c'est rigolo mais tu gère pas les effets de bord sur le plus ;)
26/04/2006, 12h02
javatwister

"bord" ?
26/04/2006, 12h05
siddh

effet de bord => quand tu arrive aux extremités.

en gros la t'as un undefined car tu test pas si t es arrivé au bout

ah oui, je vois; c'est parce que j'ai changé un signe de sens, pour validation w3c et j'avais fait une tite erreur :mrgreen:

il fallait donc lire:

Code:

1
2
3
 
 
if(ind>ind2)

bis:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
<script type="text/javascript">
var tab=[];
var t2, ind, ind2;
function arch(t){
if(!t2){
  t2=t
};
if(t.value!=tab[ind]){ 
  tab.push(t.value);
};
ind=tab.length-1;
ind2=ind;
}
 
function nav(sens){
 
switch(sens){
  case "moins" :  if(ind2>0){
     t2.value=tab[--ind2]
    }
    else if(ind2==0){
     t2.value="";
     ind2--
    };
    break;
  case "plus" : if(ind>ind2){
     t2.value=tab[++ind2]
    };
    break;
  default :  t2.value=tab[ind];
    ind2=ind;
    break;
}
}
 
</script>
</head>
<body>
<div style="text-align:center;padding:30px;">
<textarea rows="10" cols="50" onkeyup="arch(this)"></textarea>
<p>
<input type="button" value="avant" onclick="nav('moins')" />
<input type="button" value="après" onclick="nav('plus')" />
<br />
<input type="button" value="texte actuel" onclick="nav()" />
</p>
</div>
</body>
</html>

26/04/2006, 12h08
javatwister

content? :mrgreen:
26/04/2006, 12h21
siddh

bha c'est surtout pour les gens qui prendraient ton code sans trop le comprendre et qui pourraient pas le rajouter eux même ;)

:bravo:
26/04/2006, 14h48
SpaceFrog

pas glop le undefined sur la machine a propulser dans le temps ...
26/04/2006, 16h56
javatwister

l'a lu l'erratum le spacefrog? http://javatwist.imingo.net/sm12.gif
26/04/2006, 16h57
siddh

je crois pas :mouarf:
26/04/2006, 16h57
javatwister

tiens, voilà ce que ça donne: http://javatwist.imingo.net/histotext.php

validateur de dates yyyy/mm/dd:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<form style="display:none" id="quand" action="">
<p>
 
<input name="a" type="text" size="1" maxlength="4" /> 
<input name="m" type="text" size="1" maxlength="2" /> 
<input name="j" type="text" size="1" maxlength="2" /> 
<input type="button" value="ok" onclick="verif(f['a'].value,f['m'].value,f['j'].value)" /> 
 
</p>
</form>
 
<script type="text/javascript">
 
document.forms["quand"].style.display="block";
var f=document.forms["quand"].elements;
 
function verif(a,m,j){ 
 m-=1;
 d=new Date(a,m,j);
 var rep= (d.getFullYear()!=a || d.getMonth()!=m) ? "date invalide" : "date valide";
 alert(rep); 
} 
 
</script>

transférer des éléments d'un conteneur vers un autre et vice-versa;
conçu pour 2 conteneurs;

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title> 
 
<style type="text/css">
 
#c {
margin:80px 0px 80px 100px;
text-align:center;
width:460px;
}
 
#c ul {
padding:0px; 
margin:10px;
border:1px solid;
width:200px;
height:200px;
list-style-type:none;
line-height:20px;
text-align:center;
font-weight:bold;
background-color:#ffff00;
float:left;
}
 
#c li {
width:200px;
color:#ff0000;
}
 
</style>
 
</head> 
 
<body> 
 
<div id="c">
 
<p>
Cliquez sur l'un des chiffres pour tester
</p>
 
 <ul id="z1">
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
 </ul>
 
 <ul id="z2">
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
 </ul>
 
</div>
 
<script type="text/javascript">
 
// abstraction des 2 conteneurs dans un tableau dédié;
var t=[document.getElementById("z1"),document.getElementById("z2")];
var ch;
 
// pour chaque objet "ul"
for(n in t){
 /*création d'une propriété arbitraire "ind"
  dont la valeur est l'indice dans le tableau "t" */
 t[n].ind=n;
 ch=t[n].getElementsByTagName("li");
 
 // pour chaque objet "li"
 for(o in ch){
  // quand on clique dessus  
  ch[o].onclick=function(){
   /* si la propriété "ind" de la liste parente
   a pour valeur "0", on affecte l'élément
   en fin de la liste dont la valeur de "ind" égale "1",
   et vice versa;*/
   t[Math.abs(this.parentNode.ind-1)].appendChild(this)
  }
 }
}
 
</script> 
 
</body>
</html>

un timePicker ...

une solution afin d'eviter les controles de format d'heure, proposer un timePicker avec l'heure déja formattée ...
Voici un premier exemple, lmais je le trouve lent ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Time Picker</title>
 
<script type='text/javascript'>
var times12=new Array()
var times24=new Array()
 
function init(){
var timepick=document.createElement('select')
timepick.id='selTime'
document.body.appendChild(timepick)        
 
for (h=0;h<24;h++){var Heure=(h<13)?h:h-12;
                        Heure=(Heure.toString().length==1)?"0"+Heure:Heure;
                      var periode=(h<13)?"am":"pm";    
    for(m=0;m<60;m++){var mins=(m.toString().length==1)?"0"+m:m;
                        var HU=Heure+":"+mins+" "+periode
                        times12.push(HU)
                        }
                    }
 
for (h=0;h<24;h++){var Heure=(h.toString().length==1)?"0"+h:h;
     for(m=0;m<60;m++){var mins=(m.toString().length==1)?"0"+m:m;
                        var HU=Heure+":"+mins
                        times24.push(HU)
                        }
                    }
populateSelect(12)
document.getElementById('selTime').size='1';
}
 
function populateSelect(choice){
timelist=(choice==12)?times12:times24;
document.getElementById('selTime').options.length=0;
 
for (i=0;i<timelist.length;i++){
                                    var timeline=document.createElement('option');
                                    timeline.value=timelist[i];
                                    timeline.innerHTML=timelist[i];
                                    document.getElementById('selTime').appendChild(timeline);
                    }
            }
 
</script>
</head>
 
<body onload="init()" >
<input type='radio' name="spanchoice" id="twelve" checked onmouseup="populateSelect(12)"><label for="twelve"  onmouseup="populateSelect(12)">12 heures (am/pm)</label><br/>
<input type='radio' name="spanchoice" id="twentyfour" onmouseup="populateSelect(24)"><label for="twentyfour" onmouseup="populateSelect(24)">24 heures </label><br/>
</body>
</html>

y'a le size qui ne fonctionne pas (pour en faire un spinner)
vos suggestion pour le rendre plus rapide sont les bienvenues ...

27/04/2006, 21h06
FMaz

J'ai peut-être mon code de Drag and Drop avec support des DropZone qui pourrait être bien (mais pas parfait).

Ca intéresserait quelqu'un ?
27/04/2006, 22h08
siddh

Au lieu de demander l'avis, postez vos codes :P

Apres on fais le tri quand on intègre dans les pages sources de toute manière.

En réponse à SF, j'ai beaucoup plus rapide et beaucoup plus long :mrgreen:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
<script type="text/javascript">
 
var r, cadre, s, s2, op, format;
var nbr, decal, plus, zero;
 
window.onload=function(){
r=document.getElementsByName("h");
cadre=document.getElementById("sel");
s=document.createElement("select");
s2=document.createElement("select");
cadre.appendChild(s);
cadre.appendChild(s2);
r[0].checked=true;
for (var i=0;i!=r.length;i++){
  r[i].format=r[i].value;
  r[i].onclick=init
};
format=12;
init()
}
 
function init(){ 
nbr=-1;
decal=r[0].checked ?1:0;
plus= this.format==12 ? "am" : "";
while(s.lastChild){
  s.removeChild(s.lastChild)
}; 
 
for(var j=0;j!=25+decal;j++){
  nbr++
  op=document.createElement("option");
  if(nbr==13 && this.format==12){  
   nbr=0;
   plus="pm"
  };
  zero= nbr>=10 ? "" : "0";
  op.text=zero+nbr+plus;
  op.value=zero+nbr+plus;
  s.add(op,undefined)
};
 
s.onchange=function(){
  change(this)
};
while(s2.lastChild){
  s2.removeChild(s2.lastChild)
};
for(var k=0;k!=60;k++){
  zero = k>=10 ? "" : "0";
  op=document.createElement("option");
  op.text=zero+k;
  op.value=zero+k;
  s2.add(op,undefined)
};
}
 
function change(q){
nbr=-1;
decal=r[0].checked ?1:0; 
if(q.value=="12am" || q.value=="12pm" || q.value==24){
  while(s2.lastChild){
   s2.removeChild(s2.lastChild)
  };
 
  op=document.createElement("option");
  op.text="00";
  op.value="00";
  s2.add(op,undefined)
}
else{
  for(var k=0;k != 60;k++){
   zero = k>=10 ? "" : "0";
   op=document.createElement("option");
   op.text=zero+k;
   op.value=zero+k;
   s2.add(op,undefined)
  }
}
}
 
</script>
 
</head>
<body>
 
<p>
<input type="radio" value="12" name="h" id="h1" />
<label for="h1">12 heures</label>
<input type="radio" value="24" name="h" id="h2" />
<label for="h2">24 heures</label>
</p>
 
<p id="sel" style="float:left">
</p>
 
<p style="float:left">
<input type="button" value="valider" onclick="alert(s.value.substring(0,2)+'h'+s2.value+' '+s.value.substring(2))" />
</p>
 
</body>
</html>

28/04/2006, 12h03
SpaceFrog

ouaip mais pas glop la double saisie imposée ... :(
ce qui explique la division par 24 du temps ...
28/04/2006, 12h19
javatwister

double saisie? 8O

t'es pas sérieux là? :lol: t'as vu la différence de vitesse!

Voici mon script de drag and drop.
J'en avais 2 versions, une adapté à mes besoin (celle-ci) et l'autre avec quelques bug non-corrigés. Je vous poste donc la moins générique mais la plus stable, vous n'aurez qu'à emputer ce qui est innutile.

Le javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
 
// Conception de Francois Mazerolle, 2006
// Vous pouvez utiliser et/ou modifier ce script dans un contexte non-lucratif seulement.
// Si vous désirez une authorisation d'usage commerciale, veuillez me contacter à l'adresse suivante: admin@maz-concept.com
//
// Conception by Francois Mazerolle, 2006
// You can use and/or modify this script for non-lucrative purposes only.
// If you need a commercial usage authorisation, please contact me at: admin@maz-concept.com 
 
//BUG(S) À CORRIGER:
// - Si un DG contiend un tag <img> le drag va mal démarré si le onMousedown est fait sur l'image.
 
//Note: DG = L'élément déplacable (dragable), DZ= Drop Zone, zone pour lacher un DG.
 
 
//Concernant tout le script
var isdrag=false; //Si un Drag est en cours.
var dragobj; //DG qui est en train d'être dragé
var dzallowed; //DZ authorisé par le DG
var startdz; //Concerver en mémoire la DZ de départ
 
//Concernant la fonction SlideTo
var sensX=0;
var sensY=0;
var moveSteps=-1; //Combien de déplacement il y aurra entre les 2 positions. Pas une config, elle doit commencer à -1
 
//Concernant les fonctions qui servent à détecter des positions et celles qui utilisent les positions
var posx = 0; // Position actuelle du curseur
var posy = 0;
var posxobj = 0; //Position du curseur sur l'objet (soustraite cette valeur à la position du curseur pour avoir les coordonnées de l'objet)
var posyobj = 0;
var posxini = 0; //Position d'origine du DG
var posyini = 0;
var elemposx= 0; //Position d'un élément
var elemposy= 0;
 
function position(e){ // Fonction qui détecte la position du curseur sur la page
 
    if (!e) var e = window.event;
    if (e.pageX || e.pageY){
        posx = e.pageX;
        posy = e.pageY;
    }else if (e.clientX || e.clientY){
        posx = e.clientX + document.body.scrollLeft;
        posy = e.clientY + document.body.scrollTop;
    }
 
    if(isdrag){
        SetCurrentDGPos(posx-posxobj,posy-posyobj);
    }
}
 
function ElementPosition(obj){ // Fonction qui détecte la position d'un élément sur la page
    //Définir la position de l'élément
    elemposx=0;
    elemposy=0;
 
    if (obj.offsetParent){
        while (obj.offsetParent)
        {
            elemposx += obj.offsetLeft
            elemposy += obj.offsetTop
            obj = obj.offsetParent;
        }
    }else if (obj.x){
        elemposx += obj.x;
        elemposy += obj.y;
    }    
}
 
function FindDiv(type,name,changeclass){ //Fonction qui retourne l'objet selon son type et son nom (id, param#2)
    //Trouver le DG
    var dgIds;
    var dgId;
    var statut=false;
    void(el=document.getElementsByTagName("div"));
    for(i=0;i<el.length;i++){
        dgIds=el[i].id.split("|");
        if(dgIds[0]==type){ //Si l'objet trouvé est du type de celui que l'ont recherche
 
            dgId=dgIds[1].split(",");
            for(e=0;e<dgId.length;e++){ //Lister tout les id associé à cet item
 
                //Si ll'objet est celui recherché
                if(name==dgId[e]){
                    if(changeclass!=""){ //Changer sa classe (besoin #1)
                        el[i].className=changeclass;
                        statut=true;
                    }else{ //Retourner l'objet (Besoin #2)
                        return el[i];
                    }
                }
            }
        }
    }
    return statut;
}
 
function FindCurrentDZ(mba) { //Fonction qui recherche si nous sommes au dessus d'une DZ et qui retourne l'objet DZ si oui.
    //mba = Must Be Authorized (true ou false)
    var IsAuthorised=false;
    var dzIds;
    var dzId;
    void(el=document.getElementsByTagName("div"));
    for(var i=0;i<el.length;i++){
        if(el[i].id.substring(0,2)=="dz"){
 
            if (mba){
                //Passer toutes les DZ authorisés en mémoire
                for (var e=0;e<dzallowed.length;e++){
                    dzIds=el[i].id.split("|");
 
                    //Si la DZ est authorisée
                    dzId=dzIds[1].split(",");
                    for(j=0;j<dzId.length;j++){ //Lister tout les id associé à cet item
                        if(dzallowed[e]==dzId[j]){
                            IsAuthorised=true;
                        }
                    }
                }
            }else{ IsAuthorised=true; }
 
            if (IsAuthorised){
                //Trouver la position réelle sur la page de l'élément
                ElementPosition(el[i]);
 
                //Déterminer si le curseur est dans la DZ
                if ((elemposx < posx)
                && ((elemposx+el[i].offsetWidth) > posx)
                && (elemposy < posy)
                && ((elemposy+el[i].offsetHeight) > posy)){
                    return el[i];
                }
            }
            IsAuthorised=false;
        }
    }
    return false; //Aucune DZ trouvée
}
 
 
 
function start_drag(e){ //Détecter les début de click pour lancer la début d'un drag
 
    //Vérifier qu'aucun drag est en cours actuellement
    if(isdrag){ return false; }
 
    //Trouver la position actuelle du curseur
    position(e);
 
    //Trouver tout les DG
    var dgId;
    void(el=document.getElementsByTagName("div"));
    for(var i=0;i<el.length;i++){
        dgId=el[i].id.split("|");
        if(dgId[0]=="dg"){
 
            //Déterminer si le curseur est dans le DG
            if (el[i].offsetLeft < posx
            && (el[i].offsetLeft+el[i].offsetWidth) > posx
            && el[i].offsetTop < posy
            && (el[i].offsetTop+el[i].offsetHeight) > posy){
 
                //Encadrer les DZ acceptées par ce DG
                dzallowed=dgId[2].split(",");
                var dzId;
                for (var e=0;e<dzallowed.length;e++){
                    if(dzallowed[e]!=""){
                        dzId=FindDiv("dz",dzallowed[e],"dropable_on");
                        if(!dzId)
                            alert (dzallowed[e]+" est indéfini.");
                    }
                }
 
                //Trouver la position innitiale du DG que nous dragons (s'il est dropé n'importe ou, il reviendra à sa position innitiale)
                posxini = el[i].offsetLeft;
                posyini = el[i].offsetTop;
 
                //Démarrer un Drag (afin d'empecher 2 drag simultanés)
                isdrag = true; 
 
                //Placer le DG au dessus de tout
                el[i].style.zIndex=9999;
 
                // Mettre en mémoire l'objet que nous sommes en train de drager
                dragobj = el[i];
 
                //Trouver si nous sommes actuellement dans un DZ
                startdz = FindCurrentDZ(false);
 
                //Trouver la position du curseur dans l'objet
                if(isdefined('dragobj')) {
                    posxobj=posx-dragobj.offsetLeft;
                    posyobj=posy-dragobj.offsetTop;
                }
 
                //Mettre un curseur de déplacement
                document.body.style.cursor="move";
 
                //Surveiller les mouvement de souri ainsi que le relachement du bouton de souris.
                if (document.attachEvent) { //IE
                    document.attachEvent ('onmousemove', position);
                    document.attachEvent ('onmouseup', stop_drag);
                }else{ //FF
                    document.addEventListener('mousemove', position, false);
                    document.addEventListener('mouseup', stop_drag, false);
                }
 
                //Quitter la fonction afin de ne pas démarrer 2 drag en même temps.
                return false;
 
            }
        }
    }
}
 
function stop_drag(e){ //Fonction qui arrête le Drag.
    var dzId;
    var dz;
 
    //Vérifier qu'un drag est en cours actuellement (Sinon on est supposé arrêter quoi ? Bug de IE qui detach pas assez rapidement l'objet)
    if(!isdrag){ return false; }
 
    if (document.attachEvent) { //IE
        detachEvent ('onmousemove', position);
    }else{
        document.removeEventListener('mousemove', position, false);
    }
 
 
    //Trouver si nous sommes actuellement sur une DZ
    dz = FindCurrentDZ(true);
    if(dz){ // Si une DZ authorisée est trouvée
        dzId=dz.id.split("|");
 
        //Trouver la position réelle sur la page de l'élément
        ElementPosition(dz);
 
        //Changer la position d'origine de l'élément à dragger pour la position de la DZ authorisée**
        posxini = elemposx+(dz.offsetWidth/2-dragobj.offsetWidth/2);
        posyini = elemposy+(dz.offsetHeight/2-dragobj.offsetHeight/2);
 
        //Un changement à été fait, vérifier si la DZ comporte une action et que la DZ n'est pas celle de départ.
        if (dzId.length>2 && startdz!=dz) {
            eval(dzId[2]); // Exécuter l'action de la DZ.
        }
    }
 
 
    //Passer toutes les DZ authorisés en mémoire
    for (var e=0;e<dzallowed.length;e++){
        dzId=FindDiv("dz",dzallowed[e],"dropable_off");
    }
 
    //Replacer l'item à son emplacement initial ou dans son DZ**^^ si c'est nécésaire
    slideTo(posxini,posyini,10);
 
    //Placer le DG à son élévation normale
    dragobj.style.zIndex=1;
 
    //Mettre un curseur normal
    document.body.style.cursor="default";
}
 
 
//Fonctions de déplacement
function slideTo(tx, ty, interval) { //Fonction qui "Glisse" un objet vers une position
 
    if(moveSteps==-1){
        moveSteps=20; //Nombre de déplacement à effectuer (Plus le nombre est grand plus le déplacement est lent)
    }
 
    // Calculer le "pas" de chaque déplacement
    sensX=Math.round((dragobj.offsetLeft-tx)/moveSteps)
    sensY=Math.round((dragobj.offsetTop-ty)/moveSteps)
 
    if(moveSteps>0){
        dragobj.style.left=dragobj.offsetLeft-sensX+"px";
        dragobj.style.top=dragobj.offsetTop-sensY+"px";
    }
    moveSteps-=1;
 
    //Si le déplacement est terminé, placer précisément l'objet et stoper le timer, sinon, continuer le déplacement
    if(moveSteps==0){
        if(isdefined('timerID')) {
            clearTimeout(timerID);
        }
        SetCurrentDGPos(posxini,posyini);
        moveSteps=-1;
 
        // Le drag est terminé (Note, si jamais le drag ne se terminait jamais, il sera impossible de commencer un autre drag)
        isdrag = false; 
    }else{
        timerID = setTimeout("slideTo("+tx+", "+ty+", "+interval+")", interval);
    }
}
 
function SetDGintoDZ(dg,dz,smooth){ //Fonction qui place le DG dans un DZ simplement en passant leurs noms.
 
 
    dragobj=FindDiv("dg",dg,"");
 
    //Si le DG est introuvable, innutile de chercher le DZ
    if(!isdefined('dragobj')) { return false; }
 
 
    //Trouver la position du DZ
    dropobj=FindDiv("dz",dz,"");
    ElementPosition(dropobj);
    posxini = elemposx+(dropobj.offsetWidth/2-dragobj.offsetWidth/2);
    posyini = elemposy+(dropobj.offsetHeight/2-dragobj.offsetHeight/2);
 
 
    //Effectuer le placement
    if(smooth){
        slideTo(posxini,posyini,5)
    }else{
        SetCurrentDGPos(posxini,posyini);
    }
}
 
function SetCurrentDGPos(x,y){ // Fonction qui place le DG actuel (dragobj) à une position précise.
    dragobj.style.left = x+"px";
    dragobj.style.top  = y+"px";
    return false;
}
 
 
 
 
 
 
//Mini-fonction d'une ligne
function IfDrag_retFalse(e){ if(isdrag) return false; } //Retourne false si un drag est en cours
function isdefined(variable){ return (typeof(window[variable]) == "undefined")?  false: true; } //Fonction qui détermine si une variable est définie
 
 
 
 
//Surveiller les évènements qui lance le drag
if (document.attachEvent) { //IE
    document.attachEvent ('onmousedown', start_drag);
}else{
    document.addEventListener("mousedown",start_drag,true);
 
}
//Afin d'éviter que le drag sélectionne du texte en arrière plan lors de déplacements
document.onselectstart=IfDrag_retFalse;
document.onmousedown=IfDrag_retFalse;
 
 
// ### FIN DU SCRIPT

Exemple d'utilisation:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 <!-- DZ: Les Drop Zones -->
  <!-- id="dz|<id>|<action lorsque dropé>"-->
 <div id="dz|zone_a|test('hell');" style="background-color:gray;width:100px;height:100px;border:3px solid black;">
  Drop-Zone 02
 </div>
  <div id="dz|zone_b" style="background-color:gray;width:100px;height:100px;border:3px solid black;">
 Drop-Zone 02
 </div>
  <div id="dz|zone_c" style="background-color:gray;width:100px;height:100px;border:3px solid black;">
 Drop-Zone 03
 </div>
 
 
 <!-- DG: Les éléments DraGables -->
 <!-- id="dg|<id>|<DZ autorisés>"-->
<div id="dg|item812|zone_a,zone_c" class="dragable" style="position:absolute;background-color:red;width:90px;height:90px;">
	Drag me !
	<table align="center" style="border:1px solid black;">
		<tr><td>Tableau</td></tr>
		<tr><td align="center"><div style="background-image:url('img.gif');width:30px;height:30px;"></div></td></tr>
	</table>
</div>

Voilà, si vous utilisez cette source, laissez-moi un petit mot :)

02/05/2006, 19h34
Auteur
juste deux petites questions (Javatwister et Spacefrog) sur le script des formats d'heures :
Code:

1 2 3 4 5 op=document.createElement("option"); op.text="00"; op.value="00"; s2.add(op,undefined)
1- Est-ce que la méthode createElement() est nécessaire dans la mesure où la méthode add est appelée ? En d'autres termes est-ce que add (qui ajoute l'option au select) ne créé pas en même temps l'élément dans la page ?

2-peut-on remplacer ce code (et supprimer createElement()) par :
Code:

1 2 3 4 5 op=new Option(); op.text="00"; op.value="00"; s2.add(op,undefined)

Voir 40 message(s) de cette discussion en une page