[Ancien]Page Code Source

**javatwister** · 02/05/2006, 22h57

1) non, l'option doit avoir été "créée" d'une manière ou d'une autre

2) l'objet Option est tout à fait utilisable; mais il faudra aménager un peu la syntaxe: en fait, les 4 propriétés sont passées en argument, ce qui simplifie apparemment la création de la bête!
mais ça me contrarie d'avoir à définir (même par un booleen) les options defaultselected et selected;

Code :

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

1
2
 
op=new Option("text", "value", false, false);

**SpaceFrog** · 03/05/2006, 16h00

Je ne sais absolument pas à quoi cela peut servir hormis appeler des fonctions à partir d'une variable sans avoir à faire un switch ...

Je viens de réinventer le nommage des fonctions

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
window.one= function(){alert('one')}
window.two= function(){alert('two')}
window.three= function(){alert('three')}
choix='two'
new window[choix]
choix='one'
new window[choix]
//ou appel direct
new window['three']</script>

si vous voyez d'autres applications ...

à noter que

Code :

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

1
2
function four(){alert('four')}
new window['four']

fonctionne aussi

et juste pour pousser le bouchon un peu plus loin voici la syntaxe avec paramètres :

Code :

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

1
2
3
window.one= function(parametre){alert(parametre)}
choix='one'
new window[choix]('coucou')

**b Oo** · 05/05/2006, 09h27

Salut FMaz,
juste une question, si tu ne définis pas tes éléments avec la propriété style dans tes pages, alors tu ne peux faire de drag ?

b Oo

**amar00** · 05/05/2006, 17h27

Pas testé sur tous les navigateurs mais bon...

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
 
//----------------------------------------------------------------------
// prend en argument une instance dom d'une liste déroulante
// trie les données textuelles en ordre alphabétique croissant
// en conservant les valeurs associées
//----------------------------------------------------------------------
function trierListe(oListe){
   var strSep = "/#/";
   var arrValue = new Array();
   var sVal;
   var sText;
   var itemTab;
   //copie des infos dans un tableau
   for (var i=0; i<oListe.length; i++){
    arrValue[i] = oListe.options[i].text + strSep + oListe.options[i].value;
   }
   //tri croissant (insensible à la casse)
   arrValue.sort(function(x,y){
     var a = String(x).toLowerCase();
     var b = String(y).toLowerCase();
     if (a > b) return 1
     if (a < b) return -1
     return 0
     })
   //on vide la liste
   oListe.options.length = 0;
   //on l'alimente avec le tableau trié
   for (var i=0; i<arrValue.length; i++){
    itemTab = arrValue[i].split(strSep);
    var opt = new Option(itemTab[0],itemTab[1]);
    oListe.options[oListe.length]= opt;
   }
  }

**FremyCompany** · 06/05/2006, 18h50

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
<html>
<head>
<title>Testeur de mot de passe</title>
<head>
<body onload='var tester = new PassWordTester("pass1", "niveau_mdp", "<font color=red>Trop court</font>", "<font color=orange>Bas</font>", "<font color=blue>Moyen</font>", "<font color=green>Elevé</font>", "<font color=red>Impossible à determiner</font>");'>
<!-- Define the class -->
<script type="text/javascript" language="javascript">
var niv0txt, niv1txt, niv2txt, niv3txt, errtxt
function PassWordTester(champid, zoneid, _niv0txt, _niv1txt, _niv2txt, _niv3txt, _errtxt)
{
 niv0txt = _niv0txt
 niv1txt = _niv1txt ? _niv1txt : niv1txt
 niv2txt = _niv2txt ? _niv2txt : niv2txt
 niv3txt = _niv3txt ? _niv3txt : niv3txt
 errtxt = _errtxt ? _errtxt : errtxt
 var func = "test_pass('" + zoneid + "','" + champid + "');"
 setInterval(func,250);
}
function test_pass(zoneid, champid)
{
 var champ = document.getElementById(champid);
 var zone = document.getElementById(zoneid);
 zone.innerHTML = "Fonction lancée...";
 try
 {
  var mdp = champ.value;
  var taille = mdp.length;
  if (taille<6) {zone.innerHTML = niv0txt; return 0;}
  var securite = 0;
  var Chiffre = new RegExp("[0-9]","gi");
  var Special = new RegExp("[^a-zA-Z0-9]","gi");
  var chrs = new Array();
 
  for (var i=0;i<taille;i++)
  {
   var c = mdp.charAt(i);
   chrs[c] = 0;
  }
 
  for (var i=0;i<taille;i++)
  {
   var c = mdp.charAt(i);
   var cv = 0;
   chrs[c] = chrs[c] + 1
   if (chrs[c] < 4)
   {
    cv = 1;
    if (Chiffre.test(c))
     {cv = 2;}
    else if (Special.test(c))
      {cv = 3;}
   }
   securite = securite + cv
  }
  if (securite >= 13) {zone.innerHTML = niv3txt; return 3;}
  else if (securite >= 9) {zone.innerHTML = niv2txt; return 2;}
  else {zone.innerHTML = niv1txt; return 1;}
 }
 catch (e)
 {
  zone.innerHTML = errtxt ? errtxt + " <font size=1>(" + e.toString + ")</font>" : e.toString(); return -1;
 }
}
</script>
<form id="test" action="javascript:alert('Form Submitted !!!')">
Mot de passe ( au moins 6 caractéres ) : <br />
<input class="" type="password" id="pass1" name="pass1" size="40" maxlength="256" value="" /> &nbsp; &nbsp; <span id="niveau_mdp"></span><br />
Confirmez votre mot de passe : <br />
<input class="" type="password" id="pass2" name="pass2" size="40" maxlength="256" value="" /><br />
<input value="Envoyer !" type="submit" />
</form>
</body>
</html>

**FremyCompany** · 12/05/2006, 20h36

Un Xml qui soit le même pour tous les navigateurs

Utilser l'objet IXmlDom. Référez vous à la documentation et au code de l'objet.

Il est opérationel pour IE, FF, NS, Gecko-Based Browser et Opera.
Il souffre cepandant de quelques lenteurs inexpliquées sur les Gecko-Based Browser (FF et NS compris)

Serialiser en JS :

Voci le code qui permet de transformer un objet (tout type d'objet JS) en document Xml. Ce code ne fonctionne pas à 100% sur Opéra pour des raisons inexpliquées...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var obj = new Object();
obj.nbr1 = 1;
obj.nbr2 = 2.0;
obj.str1 = "str";
obj.boo1 = false;
obj.boo2 = true;
obj.reg1 = /g/gi;
obj.fnc1 = function () {};
obj.dat1 = new Date();
obj.arr1 = {obj1 : null, obj2 : undefined};
obj.arr2 = [0,1,2,3];
var XML = CXml(obj, "obj");

Session en JS :

Ne vous a-t-on jamais dit que cela n'existe pas et que cela n'existera jamais ??? Et bien celui qui vous a dit ca s'est trompé !

Voci un petit code pour le prouver !
Ce code ne fonctionne pas à 100% sur Opéra pour des raisons inexpliquées...

Sur votre page n°1

Code :

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

1
2
3
4
5
 
<body onunload="JSSession.Save()">
...
// Dans un script...
JSSession.Objet = 1;

Sur votre page n°2, dans un script :

Code :

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

alert(JSSession.Objet);

Cela vous donnera 1 comme réponse ! C'est évidement valable pour tous les objets de type JS.

On sait faire d'autres choses encore, mais je vous laisser lire le code par vous-même...

**siddh** · 13/05/2006, 10h20

apres y a aussi des truc comme JSON

**FremyCompany** · 13/05/2006, 13h51

Envoyé par siddh

apres y a aussi des truc comme JSON

En effet, j'avais déjà entendu parler de JSON ou JASON... Mais qu'est-ce donc au juste ? A quoi ca sert ?

**siddh** · 13/05/2006, 14h48

http://www.json.org/jsonfr.html

**FremyCompany** · 13/05/2006, 16h07

JSON est intéressant, c'est vrai.
M'enfin, maintenant que j'ai fait mon propre truc, je compte bien l'utiliser

EDIT : M'enfin, que vois-je ? JSON utilise eval ??? Beurk, quelle horreur. Et pour les variables de fonctions ???
Vive IJSA !

**FremyCompany** · 21/05/2006, 16h12

1. Utiliser IE + Windows Script Editor OU Visual Web Designer 2005 Express
2. Utiliser ce petit code (IE, FF, NS, ...) :

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
/* Methode 1 : Analyser un objet en profondeur... Parfois lent ... Peu pratique mais parfois très utile */
function debug(obj, name, prof) {
    var msg = name + obj;
 prof = (prof == null) ? true : prof;
 if (prof && (typeof (obj) == "array" || typeof (obj) == "object")){
    try {
        for (key in obj)
        {
            msg = msg + debug(obj[key], name + "[" + key + "]", false);
        }
    } catch (ex) {}}
    return msg;
}
 
/* Méthode 2 : Evaluation de scripts. Très maniable et très pratique */
// Penser à "0; var xyz = obj.xyz(); x.init()" pour exécuter une fonction et 
// en conserver la valeur en mémoire puis y ajouter autant de chose que voulu...
if (confirm("Lancer le débogage ?")) {
 var _V_DEBUG = null;
 var evalstr = "'Débogage Activé !'";
 while ((evalstr != "|END|") && (evalstr == "" ? (!confirm("Terminer le débogage ?")) : true)) 
 {
  try
  {
   eval("_V_DEBUG=" + evalstr);
  }
  catch (ex)
  {
   _V_DEBUG = "Impossible d'évaluer l'expression (" + evalstr + ") : " + ex.description;
  }
  var pnum = 0;
  try {for (key in _V_DEBUG) {pnum++}} catch(ex) {pnum = "Erreur : " + ex.description + " : -1"}
  alert("EVAL : " + _V_DEBUG + "\n\n" + pnum + " sous objet(s)")
  evalstr = prompt("Valeur à analyser : (|END| pour stopper)",evalstr)
 }
}

Il peut sans aucun doute être amélioré mais voila un bon début...

**FremyCompany** · 27/05/2006, 19h12

[27 MAI 2006]
Voial, j'ai updaté mes codes.
- IJSA 2.1.1 --> IJSA 4.0
- Le débuger a été amélioré.
[28 MAI 2006]
- IJSA 4.1 Beta

**Celelibi** · 04/06/2006, 21h35

Envoyé par FremyCompany

Serialiser en JS :

Voci le code qui permet de transformer un objet (tout type d'objet JS) en document Xml. Ce code ne fonctionne pas à 100% sur Opéra pour des raisons inexpliquées...

Dans le genre serialiser pas cher y'a la méthode universelle toSource() et sa réinterprétation se fait par un eval (je sais c'est moche).

Session en JS :

Ne vous a-t-on jamais dit que cela n'existe pas et que cela n'existera jamais ??? Et bien celui qui vous a dit ca s'est trompé !

Voci un petit code pour le prouver !

Si le principe des sessions se résume à stoquer des variables dans le cookie, alors en effet les sessions JavaScript existent... et ce puis aussi longtemps que le Javascript permet l'accès aux cookies (c'est à dire depuis toujours).

**FremyCompany** · 05/06/2006, 11h17

toSource ???
Ah ca me dégoute !
Je connaissais pas...
Je vais me renseigner...

Ben en effet, il s'agit de stocker des variables dans un cookie virtuel (détruit à la fermeture du navigateur et, normalement, jamais écrit sur le disque dur) ou non (si une instruction contraire est fournie dans le script). Mais bon, ne connaissant pas toSource, je me suis amusé à inventer une serialisation XML qui écrivait le contenu XML vers le cookie.

D'un autre coté, ce n'est qu'une application de mon projet, puisque le gros du code n'est qu'un objet XML Cross-Browser...

Apparement je n'étais pas le seul à ne pas connaitre toSource, car le projet SARISSA, qui fournit lui aussi des fonctions XML Cross-Browser, a sa propre XMLisation... Je la trouvais un peu obselète (String et Array uniquement) mais ca prouve bien que cette fonction est peu connue..
.
Je vais réviser mon code (encore une fois) et j'écrirais sans doute un tuto durant les vacances scolaires (je suis étudiant en 3e)....

**FremyCompany** · 10/06/2006, 19h43

Envoyé par Celelibi

Dans le genre serialiser pas cher y'a la méthode universelle toSource() et sa réinterprétation se fait par un eval (je sais c'est moche).

Lol, dans le genre universel j'ai vu mieux

Ca ne marche pas sur IE

**FremyCompany** · 23/06/2006, 15h20

Code IJSA Révisé.
Plus simple.
Pas de XML.
Si vous voulez le code, je le transmettrai.

J'en profite en passant pour ajouter un nouveau projet : JSWindows.
Vous me direz que ca existait déjà mais bon...
C'est ma foi assez bien fait, je vous conseille de regarder. Ca pourrait vous donner des idées. Ce n'est bien sur qu'une base. Si vous souhaiter ajouter des fonctions, modifier les images, ... faites comme bon vous semble !
Pensez juste à me prévenir, que j'améliore le code de base

**FremyCompany** · 24/06/2006, 13h57

Comment réaliser un semblant de Wizard (Step by Step) en JS sans utiliser de retour vers le serveur et en envoyant toutes les données en une seule fois ?

A rendre plus joli

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Page Dynamique</title>
</head>
<body>
 
<div id="divContent">
    Vous allez commencer les étapes...<br />
</div>
<input id="Button1" type="button" value="Avant" onclick="return Button1_onclick()" />
<input id="Button2" type="button" value="Apres" onclick="return Button2_onclick()" />
<br />
<script language="javascript" type="text/javascript">
// <!CDATA[
 
var current=0;
var navigable=false
var div0=document.getElementById("divContent")
var btt1=document.getElementById("Button1");
var btt2=document.getElementById("Button2");
btt1.disabled=true
 
function Button1_onclick() {
    current-=1
    div0.innerHTML=document.getElementById("divContent" + current).innerHTML
    if (current==1) {btt1.disabled=true}
    else {btt1.disabled=false}
    if (!navigable) {btt1.disabled=true}
    if (!document.getElementById("divContent" + (current+1))) {btt2.value="Envoyer !"; btt2.onclick=function() {document.forms['frm'].submit}}
    else {btt2.value="Après"; btt2.onclick=Button2_onclick}
}
 
function Button2_onclick() {
    if (current != 0) {
        document.getElementById("divContent" + current).innerHTML=div0.innerHTML
        var ok=true
        var allInput = document.getElementById("divContent" + current).getElementsByTagName("input")
        for (var i=0;i<allInput.length;i++)
        {
		    var cok = btt2_validate(allInput[i])
            ok = (ok && cok)
        }
        if (ok) {
           current+=1
        }
        else {
            alert('Vos champs ne sont pas complètés de manière correcte !');
        }
    } else {current+=1;}
    div0.innerHTML=document.getElementById("divContent" + current).innerHTML
    if (current==1) {btt1.disabled=true}
    else {btt1.disabled=false}
    if (!navigable) {btt1.disabled=true}
    if (!document.getElementById("divContent" + (current+1))) 
    {
        btt2.value="Envoyer !"; btt2.onclick=function() {
            if (current != 0) {
                document.getElementById("divContent" + current).innerHTML=div0.innerHTML
            };
            var ok=true
            var allInput = document.getElementById("divContent" + current).getElementsByTagName("input")
            for (var i=0;i<allInput.length;i++)
            {
	            var cok = btt2_validate(allInput[i])
                ok = (ok && cok)
            }
            if (ok) {
                document.forms['frm'].submit()            
            }
            else {
                alert('Vos champs ne sont pas complèter de manière correcte !');
            }
        }
    }
    else {btt2.value="Après"; btt2.onclick=Button2_onclick}
}
 
function btt2_validate(input) {
    var ok = (input.value!="")
    if (input.name=="age") {
        ok = (parseInt(input.value)==input.value)
    }
    return ok
}
 
// ]]>
</script>
 
<blockquote style="display: none; visibility: hidden;">
<form id="frm" action="index.html" submitdisabledcontrols="true" method="get">
<div id="divContent1">Step1 : <br />
Enter your name : <input type="text" name="name" />
</div>
<div id="divContent2">Step1 : <br />
Enter your age : <input type="text" name="age" /></div>
</form>
</blockquote>
</body>
</html>

**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** · 16/08/2006, 16h10

ProgressBar compatible IE+FF (et ce ne fut pas simple

)

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
<html>
<head>
    <title>ProgressBar</title>
</head>
<body>
    <div id="ProgressBar1" name="ProgressBar1" max="100" value="0" onchange="document.title = ('Le nouveau pourcentage est:' + this.layer.style.width)" style="height: 15px; width: 250px; border: 1px solid #000000;"></div>
    <input type="button" onclick="p.Value(p.Value() + 10)" value="Augmenter" />
    <input type="button" onclick="p.Value(p.Value() - 10)" value="Diminuer" />
    <script type="text/javascript">
    progressBar=function(progressBarNode) {
        var p=progressBarNode;
        p.input=document.createElement("input");
        p.input.type="hidden";
        p.input.name=p.getAttribute("name");
        p.layer=document.createElement("div");
        p.layer.style.backgroundColor="blue";
        p.layer.style.height="100%";
        p.layer.style.width="0%";
        p.appendChild(p.input);
        p.appendChild(p.layer);
        p._onchange=function() {
            var newTaille=((this.Value()*100)/this.Max());
            this.layer.style.width=newTaille+"%";
            try {
                this.OnChange();
            } catch (ex) {}
        }
        p.OnChange=function() {
            eval(this.getAttribute("onchange"));
        }
        p.Max=function(value) {
            if (value || value==0) { // SET
                this.setAttribute("max", value);
                this._onchange();
            } else { // GET
                return parseInt(this.getAttribute("max"));
            }
        }
        p.Value=function(value) {
            if (value || value==0) { // SET
                value=parseInt(value);
                if (value < 0) {value=0;}
                if (value > this.Max()) {value=this.Max();}
                this.setAttribute("value", value);
                this.input.setAttribute("value", value);
                this._onchange();
            } else { // GET
                return parseInt(this.getAttribute("value"));
            }
        }
        p._onchange();
        return p;
    }
    var p=progressBar(document.getElementById("ProgressBar1"));
    p.Value(10);
    </script>
</body>
</html>

[Ancien]Page Code Source

Contribuez

Discussions similaires

Partager

Partager