[Ancien]Page Code Source

**denisC** · 13/07/2004, 02h29

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.

**javatwister** · 25/02/2005, 16h41

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**javatwister** · 09/04/2005, 10h43

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)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

du coup, j'ai adopté la méthode la plus large d'esprit

**Celelibi** · 18/04/2005, 23h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**javatwister** · 19/04/2005, 09h21

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**javatwister** · 26/04/2005, 18h24

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

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Spack** · 31/01/2006, 22h53

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Spack** · 13/02/2006, 05h55

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**SpaceFrog** · 17/02/2006, 11h50

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SpaceFrog** · 22/02/2006, 17h54

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

)

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Spack** · 13/03/2006, 00h33

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 16/03/2006, 23h12

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 17/03/2006, 18h22

Comment rendre une balise object cliquable ...

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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" >&nbsp;/>

**SpaceFrog** · 10/04/2006, 15h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**javatwister** · 25/04/2006, 13h30

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é);

**siddh** · 25/04/2006, 21h25

oui c'est interressant

**javatwister** · 25/04/2006, 23h37

bon alors je me lâche; merci siddh

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**siddh** · 25/04/2006, 23h54

en plus c'est des listes et pas des tables

**siddh** · 26/04/2006, 00h03

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**onizuka-21** · 05/11/2006, 03h55

Interface en Javascript avec des fenêtres déplaçables et redimentionnables

Cette interface fonctionne grâce au fabuleux Scriptaculous, ce qui permet les effets d'apparition et de drag and drop.
Voici une démo, et une archive contenant le code à télécharger.

Etrangement IE ne marche pas sur mon site

...

[Ancien]Page Code Source

Contribuez

Vue hybride

Discussions similaires

Partager

Partager