Discussion :

[Oluha]

Salut

J'essaye d'intégrer un calendrier dans mon formulaire. J'ai récupéré un script tout fait sur le net.
Il y a donc un tableau qui s'affiche sous l'élément du formulaire de type text.

Ce tableau se positionne bien sous IE6 et FF mais pas sous IE7 au niveau du la propriété "top" : http://www.magnificat.com/magnificat...romouvoir2.asp

C'est cette fonction qui détermine la position que doit prendre le tableau au niveau de la hauteur :

Code :

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

1
2
3
4
5
6
7
8
9
function ds_gettop(el) {
	var tmp = el.offsetTop;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetTop;
		el = el.offsetParent;
	}
	return tmp;
}

D'après ce que j'ai pu lire sur le net et le forum ca me semble pourtant bon

Une idée de ce que je pourrais faire ?

Merci

[Auteur]

bonjour,

place le tableau qui contient le calendrier dans un div avec le style position: absolute. Ce div place le dans le même td que l'input qui contient ton champ date :

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
 
<form>
<table border="1" style="position: absolute; top: 100px; left: 100px">
  <tr>
    <td style="width:20px">&nbsp;</td>
    <td style="width:20px">&nbsp;</td>
    <td style="width:20px">&nbsp;</td>
    <td style="width:20px">&nbsp;</td>
    <td>
    <input onclick="ds_sh(this);" name="date" id="date" readonly="readonly" style="cursor: text">
 
    <div style="position: absolute">
       <table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
       <tr><td id="ds_calclass">
       </td></tr>
       </table>
    </div>
 
    </td>
   <td style="width:20px">&nbsp;</td>
    <td style="width:20px">&nbsp;</td>
    <td style="width:20px">&nbsp;</td>
    <td style="width:20px">&nbsp;</td>
    <td style="width:20px">&nbsp;</td>
  </tr>
</table>
 
<div> 
bla bla bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
</form>

et place en commentaire le code

Code javascript :

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

1
2
3
4
5
6
7
 
    // Move the calendar container!
    /*the_left = ds_getleft(t);
	the_top = ds_gettop(t) + t.offsetHeight;
 
    document.getElementById('ds_conclass').style.left = the_left + 'px';
	document.getElementById('ds_conclass').style.top = the_top + 'px';*/

contenu dans la fonction ds_sh().

Il y aura une légère différence de présentation sous IE et Firefox :
avec IE le calendrier sera à droite de l'input, avec Firefox la calendrier sera sous l'input.

[edit]j'ai un souci avec la feuille de style sous Firefox [/edit]

[Auteur]

Petite correction Oluha.

[edit]j'ai un souci avec la feuille de style sous Firefox [/edit]

Le problème vient du div qui encadre le tableau du calendrier (cf. code HTML que j'ai fourni). Enlève le div, tout simplement :

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<td>
    <input onclick="ds_sh(this);" name="date" id="date" readonly="readonly" style="cursor: text">
 
       <table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
       <tr><td id="ds_calclass">
       </td></tr>
       </table>
 
    </td>

Quant à ta feuille de style, ne la modifie pas, le tableau est déjà en position absolute (ne précise ni le top ni le left)
Et mets bien en commentaire (ou supprime la) la partie javascript que j'ai donnée dans mon message précédent.

[Oluha]

Merci !

Pour que le calendrier se place sous l'input dans IE il suffit de rajouter un <br> :

Code :

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

1
2
3
4
5
6
<td><input onclick="ds_sh(this);" name="date" id="date" readonly="readonly" style="cursor: text"><br>
	<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
	<tr><td id="ds_calclass">
	</td></tr>
	</table>
</td>

Par contre le positionnement merde sous Netscape 7.1
Sous Opéra ca me semble OK.
Si quelqu'un a d'autres navigateurs sous Mac ou Linux ca serait sympa de me dire si le calendrier se positionne correctement

[Auteur]

dans la fonction function ds_sh()
Si tu remplaçais :

Code javascript :

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

1
2
3
// To change the position properly, we must show it first.
document.getElementById('ds_conclass').style.display = '';

par

Code javascript :

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

1
2
3
// To change the position properly, we must show it first.
document.getElementById('ds_conclass').style.display = 'block';

Sinon que se passe-t-il sous Netscape ?

[Oluha]

Ah oui là ca fonctionne !
Le pire c'est que j'avais vu cette erreur au niveau du display mais j'avais oublié de la corriger

Merci beaucoup pour ton aide