[Ancien]Page Code Source

**Commodore** · 25/07/2006, 11h40

On ne peut pas faire un scroll horizontal dans une Selectbox en html. Cependant, il existe un moyen d'émuler ce type de Selectbox :

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
 
<html>
 <head>
  <title>Horizontal scroll bar dans un select box</title>
  <script language="javascript">
   //Scrolling sur DIV
   function OnDivScroll()
   {
    var liste = document.getElementById("liste");
    //horizontal scrolling: Pour éviter un scroll vertical quand la taille de la selectbox est 8 et le compte des items est plus grand
    //vertical scrolling: Pour voir tous les items de la selectbox
 
    //Vérifie si les items sont plus que 8, et mettre la taille de la select en conséquence
    if (liste.options.length > 8)
    {
     liste.size=liste.options.length;
    }
    else
    {
     liste.size=8;
    }
   }
 
   function OnSelectFocus()
   {
    if (document.getElementById("divListe").scrollLeft != 0)
    {
     document.getElementById("divListe").scrollLeft = 0;
    }
 
    var liste = document.getElementById('liste');
    if( liste.options.length > 8)
    {
      liste.focus();
      liste.size=8;
    }
   }   
  </script>
 </head>
 <body MS_POSITIONING="GridLayout">
  <form id="Form1" method="post" runat="server">
   <table cellpadding="0" cellspacing="0" border="0" align=center>
    <tr>
     <td>
      <asp:Label Runat=server ID="Label2"> Liste :</asp:Label>
     </td>
    </tr>
    <tr>
     <td>
      <br>
      <SELECT size="9" multiple style="WIDTH: 300px">
       <OPTION>Item 1</OPTION>
       <OPTION>Item 2</OPTION>
       <OPTION>Item 3</OPTION>
       <OPTION>Item 4</OPTION>
       <OPTION>Item 5</OPTION>
       <OPTION>Item 6</OPTION>
       <OPTION>Item 7</OPTION>
       <OPTION>Item 8</OPTION>
       <OPTION>Item 9</OPTION>
       <OPTION>Item 10</OPTION>
      </SELECT>
     </td>
    </tr>
    <tr>
     <td>
      <br>
      <hr>
      <br>
      <asp:Label Runat=server ID="Label1"> Liste :</asp:Label>
     </td>
    </tr>
    <tr>
     <td>
     <br>
      <div id="divListe" style="OVERFLOW: auto;WIDTH: 304px;HEIGHT: 147px"
       onscroll="OnDivScroll();">
       <SELECT id="liste" size="8" multiple onfocus="OnSelectFocus();">
        <OPTION>Item 1</OPTION>
        <OPTION>Item 2</OPTION>
        <OPTION>Item 3</OPTION>
        <OPTION>Item 4</OPTION>
        <OPTION>Item 5</OPTION>
        <OPTION>Item 6</OPTION>
        <OPTION>Item 7</OPTION>
        <OPTION>Item 8</OPTION>
        <OPTION>Item 9</OPTION>
        <OPTION>Item 10</OPTION>
       </SELECT>
      </div>
     </td>
    </tr>
   </table>
  </form>
 </body>
</html>

**sedryk** · 11/08/2006, 15h54

Titre: Images coulissantes
Auteur: Sedryk
Nécessaire: Images en pièce jointes
et javascript suivants :
- prototype -> prototype-1.4.0.js
- scriptaculous -> scriptaculous-js-1.6.1.zip
Description: J'ai commencé ce petit développement en me lançant un défi

Reproduire une sorte de menu flash que je trouvais sympa à base de 3 photos faites pour un site d'Abode Composant Photographer Profiles. Il reste encore un peu de travail mais c'est déjà pas mal.
Le code n'est pas encore parfait

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Untitled</title>
	<script language="JavaScript" type="text/javascript" src="prototype.js"></script>
	<script language="JavaScript" type="text/javascript" src="scriptaculous.js"></script>
	<script language="JavaScript" type="text/javascript" src="effects.js"></script>
	<script language="JavaScript" type="text/javascript">
	<!--
		var element_appear;
 
		function appear(element_name) {
			var one = document.getElementById('one');
			var two = document.getElementById('two');
			var three = document.getElementById('three');
			if (element_name == 'one' && element_appear != 'one') {
				reset_msg();
				new Effect.MoveBy('two', 0, 300 - getPos('two'));
				resize('two', 'one');
				new Effect.MoveBy('three', 0, 375 - getPos('three'));
				resize('three', 'one');
				element_appear='one';
				new Effect.Appear('one_msg', {queue: 'end'});
			}
			else if (element_name == 'two' && element_appear != 'two') {
				reset_msg();
				new Effect.MoveBy('two', 0, 75 - getPos('two'));
				resize('two', 'two');
				new Effect.MoveBy('three', 0, 375 - getPos('three'));
				resize('three', 'two');
				element_appear='two';
				new Effect.Appear('two_msg', {queue: 'end'});			
			}
			else if (element_name == 'three' && element_appear != 'three') {
				reset_msg();
				new Effect.MoveBy('two', 0, 75 - getPos('two'));
				resize('two', 'three');
				new Effect.MoveBy('three', 0, 150 - getPos('three'));
				resize('three', 'three');
				element_appear='three';
				new Effect.Appear('three_msg', {queue: 'end'});
			}
		}
 
		function reset_msg() {
			document.getElementById('one_msg').style.display='none';
			document.getElementById('two_msg').style.display='none';
			document.getElementById('three_msg').style.display='none';
		}
 
		function reset_element() {
			reset_msg();
			new Effect.MoveBy('two', 0, 150 - getPos('two'));
			resize('two', '');
			new Effect.MoveBy('three', 0, 300 - getPos('three'));
			resize('three', '');
			element_appear = '';
		}
 
		function getPos(element_name) {
			return document.getElementById(element_name).offsetLeft;
		}
 
		function resize(element_name, appear_element) {
			actual_size = document.getElementById(element_name).offsetWidth;
			target_size = 300;
			if (element_name=='two' && appear_element=='one') {
				target_size = 150;
			}
			if (element_name=='three' && appear_element=='one') {
				target_size = 75;
			} else if (element_name=='three' && appear_element=='two') {
				target_size = 75;
			} else if (element_name=='three' && appear_element=='') {
				target_size = 150;
			}
			new Effect.Scale(element_name, target_size * 100 / actual_size, {scaleY: false});
		}
 
	//-->
	</script>
</head>
<body>
	<div style="position: relative; width: 450px; height: 200px; left: 200px; top: 200px;" onmouseout="reset_element();">
		<div id="one" style="position: absolute; width: 300px; height: 200px; background: url(metro_m.jpg);" onmouseover="appear('one');">
			<div id="one_msg" style="display: none;">
			<div style="width: 300px; height: 50px; background-color: black;filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; ">
			<span style="width: 295px; margin: 10px 0 0 5px;filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; color: white; font-family:georgia; font-size: 25px; ">Metro ></span>
			</div>
			</div>
		</div>
		<div id="two" style="position: absolute; width: 300px; height: 200px; background: url(work_m.jpg); left: 150px;" onmouseover="appear('two');">
			<div id="two_msg" style="display: none;">
			<div style="width: 300px; height: 50px; background-color: black;filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; ">
			<span style="width: 295px; margin: 10px 0 0 5px;filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; color: white; font-family:georgia; font-size: 25px; ">Work ></span>
			</div>
			</div>
		</div>
		<div id="three" style="position: absolute; width: 150px; height: 200px; background: url(home_m.jpg); left: 300px;" onmouseover="appear('three');">
			<div id="three_msg" style="display: none;">
			<div style="width: 300px; height: 50px; background-color: black;filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; ">
			<span style="width: 295px; margin: 10px 0 0 5px;filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; color: white; font-family:georgia; font-size: 25px; ">Sweet Home ></span>
			</div>
			</div>
		</div>
	</div>
</body>
</html>

**FremyCompany** · 22/08/2006, 11h52

Nouveau Add-In bien de chez moi : Le select amélioré

Rien de bien nouveau, si ce n'est la possibilité d'afficher, de masquer, d'ajouter ou de supprimer des options (compatible IE+FF)

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
<html>
    <head>
        <title>Select Adapter</title>
        <script type="text/javascript">
        makeSelect=function(s) {
            if (s.tagName.toLowerCase() != "select") {
                throw "ArgumentException : 's' isn't a valid Select";
            }
            s.allOptions = new Array();
            var all=s.getElementsByTagName("option");
            for (var i=0; i<all.length; i++) {
                s.allOptions[i] = all[i].cloneNode(true);
                s.allOptions[i].display=true;
                s.allOptions[i].setAttribute("index", i)
                all[i].setAttribute("index", i)
            }
            s.allOptions.select=s;
            s.allOptions.add=function(text, value) {
                var index=this.length;
                var o=document.createElement("option");
                o.display=true;
                o.value=value;
                o.setAttribute("index", index)
                o.appendChild(document.createTextNode(text));
                this[index]=o;
                this.select.refresh();
                return index;
            }
            s.allOptions.remove=function(index) {
                this[index]=null; this.select.refresh(); return true;
            }
            s.refresh=function() {
                /* Conserver la selection IE+FF */
                /* Bug Connu : IE ne prend pas en charge la multi selection */
                var all=this.getElementsByTagName("option");
                for (var i=0; i<this.allOptions.length; i++) {
                    this.allOptions[i].removeAttribute("selected");
                    this.allOptions[i].selected=false;
                }
                for (var i=0; i<all.length; i++) {
                    var index=all[i].getAttribute("index");
                    var selected=all[i].selected;
                    if (""+selected+""=="true") {
                        this.allOptions[index].setAttribute("selected","selected");
                    }
                }
                /* Refresh, IE+FF */
                this.innerHTML="";
                var current=0; var selectedIndex=-1;
                for (var i=0; i<this.allOptions.length; i++) {
                    var o = this.allOptions[i];
                    if (o && o.display) {
                        var newO=o.cloneNode(true);
                        if (document.all) {
                            if(current && o.selected) {
                                selectedIndex=current; current=false;
                            }
                            current++;
                        }
                        this.appendChild(newO);
                    }
                }
                if (document.all && selectedIndex != -1) {
                    this.selectedIndex=selectedIndex;
                }
            }
            s.hide=function(index,noRefresh) {
                var o = this.allOptions[index];
                if (o) {
                    o.display=false;
                    if (!(noRefresh)) {
                        this.refresh();
                    }
                    return true;
                } else {
                    return false;
                }
            }
            s.show=function(index,noRefresh) {
                var o = this.allOptions[index];
                if (o) {
                    o.display=true;
                    if (!(noRefresh)) {
                        this.refresh();
                    }
                    return true;
                } else {
                    return false;
                }
            }
            s.hideAll=function() {
                for (var i=0; i<this.allOptions.length; i++) {
                    this.hide(i, true);
                }
                this.refresh()
            }
            s.showAll=function() {
                for (var i=0; i<this.allOptions.length; i++) {
                    this.show(i, true);
                }
                this.refresh()
            }
            return s;
        }
        </script>
    </head>
    <body>
        <select>
            <option value="0">0</option>
            <option value="1">1</option>
        </select>
        <script>
        var s = makeSelect(document.getElementsByTagName("select")[0]);
        </script>
        <input type="button" value="Ajouter une option" onclick="s.allOptions.add(s.allOptions.length,s.allOptions.length)" />
    </body>
</html>

**tommey** · 24/08/2006, 20h33

j'aurais bien aimé te le montrer mais je travail sur un intranet et en développement en plus...Et c'est pas moi qui gère les serveurs car je travail dans une grosse compagnie d'assurance...

mais la progress bar que j'ai est vraiment nice tu peux la paramètré comme tu veux!

Entk je te laisse j'ai du code à faire

**SpaceFrog** · 25/08/2006, 08h25

Beaucoup d'efforts pour pas grand chose si le bloqueur de popup est activé ...
Ne vaudrait itl pas mieux le modifier pour faire gérer le display d'un di au lieu d'un popup ?

**FremyCompany** · 25/08/2006, 10h46

Envoyé par SpaceFrog

Beaucoup d'efforts pour pas grand chose si le bloqueur de popup est activé ...
Ne vaudrait itl pas mieux le modifier pour faire gérer le display d'un di au lieu d'un popup ?

En effet, je n'y avais pas pensé... Ben de toute facon, ca prend pas tant de ligne de code que ca

**Auteur** · 25/08/2006, 12h34

Je vois régulièrement des questions sur ce sujet donc voici un petit script d'une info bulle :

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.clBulle{
width: 160px;
display: none;
position: absolute;
z-index : 1;
background-color: #F4F49C;
padding: 2px;
margin: 2px;
border-style: ridge;
border-width: 3px;
border-color: #F4F49C;
font-family: Arial;
font-size: 8pt;
}
 
.mesDiv{
background-color: #B3C2A1;
padding: 10px;
}
.monStyle1{
width: 150%;
height: 60px;
}
.monStyle2{
width: 220px;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
function MouseOver(ev)
{
  var Xdoc, Xfen, Ydoc, Yfen, htDiv, lgDiv, dX, dY;
  var Ybulle;
  var el=document.getElementById("Bulle");
 
  //on affiche la boite de dialogue pour evaluer ses dimensions.
  if (el.style.display!="inline")
      el.style.display="inline";
 
  //hauteur et largeur de la bulle
  htDiv = el.offsetHeight;
  lgDiv = el.offsetWidth;
 
  //delta de la bulle sous la souris
  dY=10;
  dX=10;
 
  //position de la souris :
  Xfen = ev.clientX;
  Xdoc = Xfen + document.body.scrollLeft;
 
  Yfen = ev.clientY;
  Ydoc = Yfen + document.body.scrollTop;
 
  //position de la bulle dans la page :
  if ((Xfen + lgDiv + dX) > document.body.clientWidth)
    el.style.left = document.body.clientWidth + document.body.scrollLeft - lgDiv;
  else
    el.style.left = Xdoc + dX;
 
  if ((Yfen + htDiv + dY) > document.body.clientHeight)
  {
     Ybulle = document.body.clientHeight + document.body.scrollTop - htDiv-5;
     if (parseInt(Ybulle)>parseInt(Ydoc))
     {
       el.style.top = Ybulle;
     }
     else
     {
       el.style.top = Ydoc - htDiv-dY;
     }
  }
  else
  {
     el.style.top = Ydoc + dY-5;
  }
 
  //contenu de la bulle :
  el.innerHTML = " Xdoc= "+Xdoc+" px ; Ydoc= "+Ydoc+" px<br>";
  el.innerHTML+= " Xfen= "+Xfen+" px ; Yfen= "+Yfen+" px";
 
}
 
function MouseOut()
{
 //on cache la bulle
 document.getElementById("Bulle").style.display = "none";
}
//-->
</script>
 
</head>
 
<body>
<div class="clBulle" id="Bulle">Mon info-bulle</div>
 
<div class="mesDiv monStyle1" onmousemove="MouseOver(event)" onmouseout="MouseOut()">
ici l&rsquo;info bulle se d&eacute;place avec la souris lorsque vous survolez ce
paragraphe... <br>
Déplacer l&rsquo;ascenseur horizontal et repositionnez la souris sur le paragraphe.
Lisez Xdoc et Xfen.... ;-)
</div>
 
<br><br><br>
 
<div class="mesDiv monStyle2" onmouseover="MouseOver(event)" onmouseout="MouseOut()">
par contre ici, l&rsquo;info-bulle appara&icirc;t et reste fixe jusqu&rsquo;&agrave; ce que vous
sortiez du paragraphe.
</div>
 
<br><br><br><br><br><br><br><br>
<!--
<br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
-->
<div class="mesDiv monStyle1" onmousemove="MouseOver(event)" onmouseout="MouseOut()">
ici l&rsquo;info bulle se d&eacute;place avec la souris lorsque vous survolez ce
paragraphe... <br>
Déplacer l&rsquo;ascenseur horizontal et repositionnez la souris sur le paragraphe.
Lisez Xdoc et Xfen.... ;-)
</div>
 
</body>
 
</html>

ce code fonctionne très bien avec Firefox et IE5.
Deux possibilités : la bulle suit la souris, ou la bulle reste fixe (cf. exemples).
Il gère les cas où la souris se trouve à droite de la page, ainsi que le cas où la souris se trouve en bas à droite de la page.

Merci de le tester avec d'autres navigateurs et de m'indiquer les corrections à faire le cas échéant.

**javatwister** · 26/08/2006, 14h39

création d'éléments DOM en série

Certains scripts obligent à une utilisation intensive des méthodes
appendChild(), document.createElement() et document.createTextNode();

pour tous les cas où vous créez une balise bloc et son contenu, utilisez la fonction crobj() :

Code :

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

1
2
3
4
5
6
function crobj(p,e,d){// parent, élement, texte
	p.appendChild(document.createElement(e)).appendChild(document.createTextNode(d));
}
 
// exemple
crobj(document.body,"p","nouveau paragraphe")

le seul objectif est de réduire considérablement le nombre d'instructions / variables / lignes dans vos codes, mais c'est quand même important

**SpaceFrog** · 24/08/2006, 15h47

Voici un exemple qui ne sert à rien ... d'autre que de montre la possibilité d'instanciation de la même focntion plusieurs fois en utilisant des paramètres propres à chaque objet qui déclenche la fonction ...

Dans ce cas chaque instance de setInterval est attribuée à l'objet lui même par l'intermédiaire de la création d'un attribut (run) et utilise une variable propre à chaque objet (level)...

le clearInterval est ainsi réalisable sur chaque objet individuellement ...

[edit]
Nouvelle version du fichier car le précédent code ne prenait pas en compte toutes les valeurs de l'array ...
[/edit]

**javatwister** · 27/08/2006, 09h57

récupération du contenu et de la longueur d'un tableau contenant des indices littéraux

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
<script type="text/javascript">
 
var tab = new Array();
 
tab["un"] = "valeur de un";
tab["un"] = "valeur de un"; // définition doublée volontairement
tab["deux"] = "valeur de deux";
tab["deux"] = "valeur de trois"; // redéfinition volontaire
tab[44] = "valeur de 44"; // indice numérique
 
 
 
function tabinfo(){
	var lg=0;
	var lignes="";
 
	for (ind in this){
		if(this.hasOwnProperty(ind)){	
			// seules les propriétés uniques 
			// et non héritées seront retenues
			lg++;
			lignes+='cle: ' + ind + ' ==> valeur: ' + this[ ind] + "\n";
		}
	}
 
	return  "ce tableau contient " + lg + " lignes:\n\n" + lignes;
}
 
Array.prototype.info=tabinfo;
 
 
alert( tab.info())
 
</script>

**Auteur** · 04/09/2006, 23h58

Dialogue entre deux fenêtres parentes (1) :
Fenêtre "fille" ouverte par window.open()

Les données sont émises et reçues via deux input. Le code n'est pas parfait dans la mesure où aucun test ne vérifie si la fenêtre mère ou la fenêtre fille est ouverte.

Mere.htm

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript" src="MereFille.js"></script>
 
</head>
 
<body onload="OuvreFenetreFille()">
<input type="text" id="inMere" size="20" maxlength="10">
<input type="button" value=">fenêtre fille" onclick="TransfertMereFille()">
 
<br><br>
<input type="text" readonly="readonly" id="outFille" size="20" maxlength="10">
</body>
 
</html>

Fille.htm

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
 
<html>
<head>
<title></title>
<script type="text/javascript" src="MereFille.js"></script>
</head>
 
<body>
<input type="text" id="inFille" size="20" maxlength="10">
<input type="button" value=">fenêtre mère" onclick="TransfertFilleMere()">
 
<input type="text" readonly="readonly" id="outMere" size="20" maxlength="10">
</body>
 
</html>

MereFille.js

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
 
var fenFille;
function OuvreFenetreFille()
{
 fenFille = window.open("Fille.htm","","height=100,width=300,toolbar=yes,menubar=yes,status=yes");
 //window.location.href="Fille.htm"
}
 
function TransfertMereFille()
{
  var elmtWinParent=document.getElementById("inMere");
  var elmtWinFille=fenFille.document.getElementById("outMere");
 
  elmtWinFille.value = elmtWinParent.value;
}
 
 
function TransfertFilleMere()
{
 var elmtWinParent=window.opener.document.getElementById("outFille");
 var elmtWinFille=document.getElementById("inFille");
 
 elmtWinParent.value=elmtWinFille.value;
}

**Auteur** · 05/09/2006, 00h03

Dialogue entre deux fenêtres parentes (2) :
Fenêtre "fille" ouverte par showModelessDialog()

Les données sont émises et reçues via un textarera. Le code n'est pas parfait dans la mesure où aucun test ne vérifie si la fenêtre mère ou la fenêtre fille est ouverte.

dialogMere.htm

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
var fen=null;
function fenetre()
{
  fen = window.showModelessDialog("dialogFille.htm",this,"dialogHeight:150px;dialogWidth:450px");
 
}
function transfert()
{
 if (fen!=null)
     fen.document.getElementById("idFille").value = document.getElementById("idMere").value;
}
//-->
</script>
 
</head>
 
<body>
<input type="button" value="Ouvrir Fille" id="BNom" onclick="fenetre()">
<br><br><br><br><br>
<textarea rows="2" cols="20" id="idMere">
</textarea>
<input type="button" value="Mere > Fille" id="BNom" onclick="transfert()">
 
 
</body>
 
</html>

dialogFille.htm

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function envoi()
{
 
 var parent = self.dialogArguments;
 parent.document.getElementById("idMere").value = document.getElementById("idFille").value;
}
 
//-->
</script>
 
</head>
 
<body style="padding: 20px;">
<textarea rows="2" cols="20" id="idFille" name="nom">bla bla
</textarea>
<input type="button" value="Fille > Mere" id="BNom" onclick="envoi()">
 
</body>
 
</html>

**Johnbob** · 14/09/2006, 14h46

Jeu de la Vie en Javascript (pour Internet Explorer)

Sous le nom de "Jeu de la Vie" on désigne un jeu inventé par le mathématicen John Horton Conway au début des années 70. Le jeu de la vie se présente sous la forme d'un tableau dont chaque case peut contenir ou non une cellule. Tout se passe ainsi : à chaque génération, l'état de chaque case à la génération suivante est décidé en fonction de son état et du nombre de cellules qui l'entourent :
- Une cellule vivante ne survivra que si elle a 2 ou 3 voisines précisement (elle ne doit être ni isolée ni étouffée).
- Une cellule apparait dans une case vide à la génération suivante, si et seulement si cette case est entourée de précisement 3 cellules (car il faut de la vie pour engendrer la vie).

En résumé : 2 ou 3 voisines pour survivre, 3 pour naître.

(Présentation extraite de ce site)

-----

- Cette version propose une grille de 50*30 cases
- Les couleurs sont paramétrables
- Des structures (patterns) sont également proposées (2 types de randoms pour l'instant)

-----

Si vous aimez ce jeu et que vous aimez aussi le javascript, n'hésitez pas à améliorer mon code pour optimiser l'algorithme (c'est assez lent quand la grille est remplie) ou proposer d'autres "patterns"

Si vous êtes allergique à IE, vous pouvez également essayer de l'adapter pour Firefox... (Edit: En fait ça marche sous FF sauf les clics pour ajouter/retirer des cellules)

-----

Plus d'infos:
- Infos générales
- Structures remarquables

-----

Capture d'écran:

-----

Un fichier unique en pièce jointe qui regroupe Javascript, CSS et HTML

**Inconnu** · 16/09/2006, 22h34

J'utilise une methode différente pour recuperer des données sur le serveur sans recharger ma page.

Voici le fichier index.php3

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
 
<?
session_start();
if (!isset($_SESSION['fois'])): $_SESSION['fois']=0; endif;
$_SESSION['fois']++;
print "Page affich&eacute;e : $_SESSION[fois] fois.";
?>
<html>
<!-- Date de création: 16/09/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
 
<form action="villes.php3" method="post" target="envdonne">
<table>
<tr>
<td>
Code Postal :
</td>
<td>
<select name="CP" onchange="this.form.submit();">
    <option value="" selected> </option>
    <option value="13127"> 13127</option>
    <option value="13700"> 13700</option>
    <option value="13500"> 13500</option>
</select>
</td>
</tr>
<tr>
<td align="right">
Ville :
</td>
<td id="ici">
<input type="text" name="ville" size="20" maxlength="256" value="Aucune ville">
</td>
</form>
</tr>
</table>
<br><br>
Rechargez la page en cliquant <a href="index.php3">ici<a>.
 
<script>
 
</script>
 
</body>
</html>
<iframe style="visibility: hidden; position: absolute" name="envdonne"></iframe>

Voici le fichier javascript.js

Code :

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

1
2
3
4
5
6
7
8
9
 
function affichercode(code){
//document.write(test);
var ns4 = (document.layers)? true:false; /* Nescape 4 */
var ie4 = (document.all && !window.opera)? true:false; /* Internet Eplorer 4 */
var dom = (document.getElementById)? true:false; /* Nescape 6 ou Internet Eplorer 6 */
if (dom){document.getElementById("ici").innerHTML = code; return;}
if (ie4){document.all["ici"].innerHTML = code; return;}
if (ns4){ with (eval('document.'+"ici"+'.document')){open(); write(code); close();} return;}}

et Voici le fichier villes.php3

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
 
<?
if ($_POST['CP']=="13127"):
$ville="Vitrolles";
elseif ($_POST['CP']=="13700"):
$ville="Marignane";
elseif ($_POST['CP']=="13500"):
$ville="Martigues";
else:
$ville="Aucune ville";
endif;
 
print "<script>";
print "parent.affichercode('<input type=\"text\" name=\"ville\" size=\"20\" maxlength=\"34\" value=\"$ville\">');";
print "</script>";
?>

Voila !

Bien sûre, c'est optimisable à souhait !!!

Bon je sais pas ce que ça vaut, mais moi ça me convient bien mieux que AJAX.

Pour les pressés, voici le zip : Donneeserveur.zip

**alain31tl** · 16/09/2006, 23h05

Et tu vas créer un fichier de conditions avec 27000 villes ou plus ?

Code :

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

1
2
3
4
5
6
7
8
 
if ($_POST['CP']=="13127"):
$ville="Vitrolles";
elseif ($_POST['CP']=="13700"):
$ville="Marignane";
elseif ($_POST['CP']=="13500"):
$ville="Martigues";
// et ainsi de suite ?

**Inconnu** · 16/09/2006, 23h22

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
if ($_POST[CP]):
	$resville=mysql_query("SELECT * FROM villes WHERE CP='$_POST[CP]' ");
	if ($resville):
		$nbville=mysql_num_rows($resville);
		if ($nbville>0):
			$lignville=mysql_fetch_array($resville);
			$ville=$lignville[VILLE];
		endif;
	endif;
endif;

Par exemple !!!

**Bestiol** · 07/10/2006, 19h55

Voici un petit objet Console pour logger des informations pendant l'exécution d'un script. Le style CSS est personnalisable pour pouvoir, au besoin, l'intégrer au design d'un site.

Titre : Objet Console

Auteur : Olivier Lance

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
//Constructeur de l'objet
function Console(id, classLigne)
{
    //Conteneur des lignes du log
    this.log = document.getElementById(id);
    //Classe appliquée aux lignes du log
    this.classLn = classLigne;
}
 
//Fonction affichant une nouvelle ligne dans le log
Console.prototype.debug = function (texte) 
{
    //Création de la ligne
    var p = document.createElement("p");
 
    //Application de la classe
    p.className = this.classLn;
 
    //Ajout du texte
    p.appendChild(document.createTextNode("> " + texte));
 
    //Ajout de la ligne dans le log
    this.log.appendChild(p);
}
 
//Effacement du log
Console.prototype.effacer = function ()
{
    this.log.innerHTML = "";
}

L'utilisation est simple :

Création de la console en passant l'id du bloc qui contiendra les lignes du log et la classe CSS assignée à ces lignes :

Code :

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

var console = new Console("console", "ligne-console");

Ajout d'une ligne :

Code :

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

console.debug("Ma ligne de log");

Effacement du log :

Code :

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

console.effacer();

**trotters213** · 19/10/2006, 08h55

Menu déroulant à 2 niveaux ou plus si vous le souhaitez (passe identiquement sous IE, FF et Opera. Pas testé sur les autres)

Code HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--définition du DOCTYPE et de la méthode de sortie : XHTML-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
 
<!--inclusion CSS-->	
<link rel="stylesheet" href="text.css" type="text/css" />
<!--affichage de l'icone IRD dans la barre de navigation-->	
 
<!--inclusion script Javascript pour le menu déroulant-->
<script language="JavaScript" src="menu_deroulant.js" type="text/javascript"></script>
</head>
<body>
<div id="centrer">
 
<div id="menu">
	<ul>		
		<li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);"><img src="ton_image5.gif" alt="Menu 5" />
			<ul id="smenu5">
				<li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">smenu51</a>
					<ul class="dernier" id="smenu51">
						<li><a href="#">smenu511</a></li>
						<li><a href="#">smenu512</a></li>
						<li><a href="#">smenu513</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">smenu52</a>
					<ul class="dernier" id="smenu52">
						<li><a href="#">smenu521</a></li>
						<li><a href="#">smenu522</a></li>
						<li><a href="#">smenu523</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu53',true);" onmouseout="montre('smenu53',false);"><a href="#">smenu53</a>
					<ul class="dernier" id="smenu53">
						<li><a href="#">smenu531</a></li>
						<li><a href="#">smenu532</a></li>
						<li><a href="#">smenu533</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);"><img src="ton_image4.gif" alt="Menu 4" />
			<ul id="smenu4">
				<li onmouseover="montre('smenu41',true);" onmouseout="montre('smenu41',false);"><a href="#">smenu41</a>
					<ul id="smenu41">
						<li><a href="#">smenu411</a></li>
						<li><a href="#">smenu412</a></li>
						<li><a href="#">smenu413</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu42',true);" onmouseout="montre('smenu42',false);"><a href="#">smenu42</a>
					<ul id="smenu42">
						<li><a href="#">smenu421</a></li>
						<li><a href="#">smenu422</a></li>
						<li><a href="#">smenu423</a></li>
					</ul>
				</li>
				<li><a href="#">smenu43</a></li>
				<li><a href="#">smenu44</a></li>
			</ul>
		</li>	
		<li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);"><img src="ton_image3.gif" alt="Menu 3" />
			<ul id="smenu3">
				<li onmouseover="montre('smenu31',true);" onmouseout="montre('smenu31',false);"><a href="#">smenu31</a>
					<ul id="smenu31">
						<li><a href="#">smenu311</a></li>
						<li><a href="#">smenu312</a></li>
						<li><a href="#">smenu313</a></li>
					</ul>
				</li>
				<li><a href="#">smenu32</a></li>
				<li><a href="#">smenu33</a></li>
				<li><a href="#">smenu34</a></li>
				<li onmouseover="montre('smenu35',true);" onmouseout="montre('smenu35',false);"><a href="#">smenu35</a>
					<ul id="smenu35">
						<li><a href="#">smenu352</a></li>
						<li><a href="#">smenu353</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu36',true);" onmouseout="montre('smenu36',false);"><a href="#">smenu36</a>
					<ul id="smenu36">
						<li><a href="#">smenu361</a></li>
						<li><a href="#">smenu362</a></li>
						<li><a href="#">smenu363</a></li>
					</ul>
				</li>
			</ul>			
		</li>
		<li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);"><img src="ton_image2.gif" alt="Menu 2" />
			<ul id="smenu2">
				<li><a href="#">smenu21</a></li>
				<li><a href="#">smenu22</a></li>
				<li><a href="#">smenu23</a></li>
				<li onmouseover="montre('smenu24',true);" onmouseout="montre('smenu24',false);"><a href="#">smenu24</a>
					<ul id="smenu24">
						<li><a href="#">smenu241</a></li>
						<li><a href="#">smenu242</a></li>
						<li><a href="#">smenu243</a></li>
					</ul>
				</li>
			</ul>			
		</li>	
		<li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="ton_image1.gif" alt="Menu 1" />
			<ul id="smenu1">
				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">smenu11</a>
					<ul id="smenu11">
						<li><a href="#">smenu111</a></li>
						<li><a href="#">smenu112</a></li>
					</ul>
				</li>
				<li><a href="#">smenu12</a></li>
				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">smenu13</a>
					<ul id="smenu13">
						<li><a href="#">smenu131</a></li>
						<li><a href="#">smenu132</a></li>
						<li><a href="#">smenu133</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>	
</div>	
</div>	
</body>
</html>

Code CSS :

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
* {
margin:0px;
padding:0px;
background:#ffffff;
text-align:center;
}
 
body{
font-family:Arial, Helvetica, sans-serif;
}
 
img {
border:none;
}
 
a {  
color:#000000;
text-decoration:none;
text-transform:none;
}
 
/*centre la page et donne la largeur pour une basse résolution*/
#centrer {
margin-left:auto;
margin-right:auto;
width:776px;
}
 
/****************************/
/* 	début menu	déroulant	*/
/****************************/
ul, li {
list-style-type:none;
}
 
/*chaque sous-menu*/
#menu ul li {
position:relative;
float:right;
width:125px;
cursor:pointer;
display:block;
background:none;
height:22px;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}
 
#menu ul li ul li {
height:100%;
}
 
#menu ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
background:#3399ff;
}
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
}
 
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
left:-127px;
}

Code Javascript :

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
<!--
//au chargement de la page, on appelle la fonction montre()
window.onload=montre;
 
//affichage du menu déroulant et placement de ce dernier
function montre(id,affiche)
{
	var d = document.getElementById(id);
	//si on quitte un élément du menu
	if (d && !affiche) 
	{
		d.style.display='none'; //on l'efface
		var c=d.parentNode; //son parent
		if (c.parentNode.parentNode.parentNode.tagName!='DIV')  //si c'est un sous-menu, on rend à son parent les couleurs d'origine
		{
			c.firstChild.style.color='#39f';
			c.firstChild.style.background='#fff';
		}
	}
	//sinon si on se mets sur un élément du menu
	else if (d && affiche)
	{ 
		d.style.display='block'; //on l'affiche
		var c=d.parentNode; //son parent
		if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on donne à son parent les couleurs de survol
		{
			c.firstChild.style.color='#fff';
			c.firstChild.style.background='#39f';
		}
	}
}
//-->

**FremyCompany** · 30/10/2006, 13h42

Eclaircicement de l'image lors du passage de la souris

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
<html>
    <head>
        <title>Opacity modifier</title>
        <script><!--
            getLocation=function(node) {
                var loc = {"width":node.offsetWidth,"height":node.offsetHeight };
            	var left=node.offsetLeft;
            	var top =node.offsetTop;
            	while(node.offsetParent) {
            		node=node.offsetParent;
            		left+=node.offsetLeft;
            		top +=node.offsetTop;
            	}
                loc.left=left;
                loc.top=top;
            	return loc;
            }
 
            addOpacityChangeEffect=function(node) {
                node.oo = document.createElement("div");
                node.oo.style.backgroundColor="black";
                node.oo.style.position="absolute";
                node.oo.opacity=25; // Opacité de départ (maximum de préférence)
                node.oo.opacityModifier=0; // A laisser à 0 par défaut, taux de modification de l'opacité en [%/cs]
                node.oo.onmouseover=function() {
                    this.opacityModifier=-1; // L'opacité diminue de 1% chaque centième de secconde
                }
                node.oo.onmouseout=function() {
                    this.opacityModifier=1; // L'opacité se rencorde de 1% chaque centième de secconde
                }
                node.oo.update=function(node) {
                    // Place le div au bon endroit
                    var loc=getLocation(node);
                    this.style.left=loc.left+"px";
                    this.style.width=loc.width+"px";
                    this.style.top=loc.top+"px";
                    this.style.height=loc.height+"px";
                    // Effectue le changement d'opacité (valeur)
                    this.opacity+=this.opacityModifier; 
                    if (this.opacity>25) {this.opacity=25;} // Opacité maximum
                    if (this.opacity<0) {this.opacity=0;} // Opacité minimum (souvent 0:transparent)
                    // Effectue le changement d'opacité (style)
                    this.style.opacity=(this.opacity/100); // FF
                    this.style.filter="alpha(opacity="+this.opacity+")" // IE
                    // Place le div au dessus de l'image
                    var zi = parseInt(node.style.zIndex);
                    if (zi < 0) { zi = 0 }
                    zi+=1;
                    this.style.zIndex=zi;
                }
                setInterval(function() { node.oo.update(node); }, 10);
                document.body.appendChild(node.oo);
            }
        --></script>
    </head>
    <body>
        <img id="image1" src="fremycompany.jpg"/>
        <script>addOpacityChangeEffect(document.getElementById("image1"));</script>
    </body>
</html>

En plus cela empeche de sauver l'image par click droit

[EDIT=Spafy]
Peut être juste préciser que le taux de sombre se gère sur ces lignes:

Code :

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

   if (this.opacity>25) {this.opacity=25;}

[/EDIT]

[EDIT=FremyCompany]
Voila qui est fait, j'en ai profité pour commenter le code

[/EDIT]

**FremyCompany** · 31/10/2006, 18h37

Des posts qui pourraient être intéressants (faut voir si ca ne va pas plutot dans d'autres FAQ comme HTML/CSS, ...) :

Enlever le soulignement d'un lien (IE) & le bord pointillé qui apparait autour de celui-ci une fois avoir (IE+FF)

Supprimer une instance d'objet depuis cette instance elle-même et sans référence globale à celle-ci pour liberer les résources utilisées
(lol le titre est long mais en fait c'est très simple)

Appliquer un traitement (event, property, ...) à toutes les balises dont le tag est <XXX>

Imprimer un texte ou du HTML particulier
Imprimer un document Word, Excel, ... via un lien (IE)

Encoder un texte JS en HTML et inversément

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
HTMLEncode=function(text) {
   var div=document.createElement("div");
   div.appendChild(document.createTextNode(text));
   return div.innerHTML;
}
 
HTMLUnEncode=function(html) {
   var div=document.createElement("div");
   div.innerHTML=HTML;
   if (div.innerText) { return div.innerText; } // IE
   if (div.textContent) { return div.innerText; } // FF
   if (div.text) { return div.text; } // Some browsers
   // Unable to get the node's text, get the data of the first node
   return div.firstChild.data; 
}

[Ancien]Page Code Source

Contribuez

Vue hybride

Discussions similaires

Partager

Partager