Position pour script calendrier

**adr22** · 16/01/2008, 16h20

Bonjour,

Je souhaite mettre le calendrier swazz sur mon site.
http://calendar.swazz.org/

Le fonctionnement est ok dans une page ayant une mise en page faite à base de tableaux imbriqués, mais lorsque c'est avec des div, le fenetre javascript apparait en haut à gauche au lieu de sous le input. Ceci étant surement du à son position:absolute.

L'objectif est d'avoir le calendrier qui apparait sous le input, collé. (voir démo sur le site si besoin).
Comment faire ?

Merci d'avance pour votre aide.
Adr

Code : javascript :

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
/* --- Swazz Javascript Calendar ---
/* --- v 1.0 3rd November 2006
By Oliver Bryant
http://calendar.swazz.org */
 
function getObj(objID)
{
    if (document.getElementById) {return document.getElementById(objID);}
    else if (document.all) {return document.all[objID];}
    else if (document.layers) {return document.layers[objID];}
}
 
function checkClick(e) {
	e?evt=e:evt=event;
	CSE=evt.target?evt.target:evt.srcElement;
	if (getObj('fc'))
		if (!isChild(CSE,getObj('fc')))
			getObj('fc').style.display='none';
}
 
function isChild(s,d) {
	while(s) {
		if (s==d) 
			return true;
		s=s.parentNode;
	}
	return false;
}
 
function Left(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}
 
function Top(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}
 
document.write('<table id="fc" style="position:absolute;border-collapse:collapse;background:#FFFFFF;border:1px solid #ABABAB;display:none" cellpadding=2>');
document.write('<tr><td style="cursor:pointer" onclick="csubm()"><img src="../ajax_form/arrowleftmonth.gif"></td><td colspan=5 id="mns" align="center" style="font:bold 13px Arial"></td><td align="right" style="cursor:pointer" onclick="caddm()"><img src="../ajax_form/arrowrightmonth.gif"></td></tr>');
document.write('<tr><td align=center style="background:#ABABAB;font:12px Arial">D</td><td align=center style="background:#ABABAB;font:12px Arial">L</td><td align=center style="background:#ABABAB;font:12px Arial">M</td><td align=center style="background:#ABABAB;font:12px Arial">M</td><td align=center style="background:#ABABAB;font:12px Arial">J</td><td align=center style="background:#ABABAB;font:12px Arial">V</td><td align=center style="background:#ABABAB;font:12px Arial">S</td></tr>');
for(var kk=1;kk<=6;kk++) {
	document.write('<tr>');
	for(var tt=1;tt<=7;tt++) {
		num=7 * (kk-1) - (-tt);
		document.write('<td id="v' + num + '" style="width:18px;height:18px">&nbsp;</td>');
	}
	document.write('</tr>');
}
document.write('</table>');
 
document.all?document.attachEvent('onclick',checkClick):document.addEventListener('click',checkClick,false);
 
 
// Calendar script
var now = new Date;
var sccm=now.getMonth();
var sccy=now.getFullYear();
var ccm=now.getMonth();
var ccy=now.getFullYear();
 
var updobj;
function lcs(ielem) {
	updobj=ielem;
	getObj('fc').style.left=Left(ielem);
	getObj('fc').style.top=Top(ielem)+ielem.offsetHeight;
	getObj('fc').style.display='';
 
	// First check date is valid
	curdt=ielem.value;
	curdtarr=curdt.split('/');
	isdt=true;
	for(var k=0;k<curdtarr.length;k++) {
		if (isNaN(curdtarr[k]))
			isdt=false;
	}
	if (isdt&(curdtarr.length==3)) {
		ccm=curdtarr[1]-1;
		ccy=curdtarr[2];
		prepcalendar(curdtarr[0],curdtarr[1]-1,curdtarr[2]);
	}
 
}
 
function evtTgt(e)
{
	var el;
	if(e.target)el=e.target;
	else if(e.srcElement)el=e.srcElement;
	if(el.nodeType==3)el=el.parentNode; // defeat Safari bug
	return el;
}
function EvtObj(e){if(!e)e=window.event;return e;}
function cs_over(e) {
	evtTgt(EvtObj(e)).style.background='#FFCC66';
}
function cs_out(e) {
	evtTgt(EvtObj(e)).style.background='#C4D3EA';
}
function cs_click(e) {
	updobj.value=calvalarr[evtTgt(EvtObj(e)).id.substring(1,evtTgt(EvtObj(e)).id.length)];
	getObj('fc').style.display='none';
 
}
 
var mn=new Array('JAN','FEB','MAR','AVR','MAI','JUN','JUL','AOU','SEP','OCT','NOV','DEC');
var mnn=new Array('31','28','31','30','31','30','31','31','30','31','30','31');
var mnl=new Array('31','29','31','30','31','30','31','31','30','31','30','31');
var calvalarr=new Array(42);
 
function f_cps(obj) {
	obj.style.background='#C4D3EA';
	obj.style.font='10px Arial';
	obj.style.color='#333333';
	obj.style.textAlign='center';
	obj.style.textDecoration='none';
	obj.style.border='1px solid #6487AE';
	obj.style.cursor='pointer';
}
 
function f_cpps(obj) {
	obj.style.background='#C4D3EA';
	obj.style.font='10px Arial';
	obj.style.color='#ABABAB';
	obj.style.textAlign='center';
	obj.style.textDecoration='line-through';
	obj.style.border='1px solid #6487AE';
	obj.style.cursor='default';
}
 
function f_hds(obj) {
	obj.style.background='#FFF799';
	obj.style.font='bold 10px Arial';
	obj.style.color='#333333';
	obj.style.textAlign='center';
	obj.style.border='1px solid #6487AE';
	obj.style.cursor='pointer';
}
 
// day selected
function prepcalendar(hd,cm,cy) {
	now=new Date();
	sd=now.getDate();
	td=new Date();
	td.setDate(1);
	td.setFullYear(cy);
	td.setMonth(cm);
	cd=td.getDay();
	getObj('mns').innerHTML=mn[cm]+ ' ' + cy;
	marr=((cy%4)==0)?mnl:mnn;
	for(var d=1;d<=42;d++) {
		f_cps(getObj('v'+parseInt(d)));
		if ((d >= (cd -(-1))) && (d<=cd-(-marr[cm]))) {
			dip=((d-cd < sd)&&(cm==sccm)&&(cy==sccy));
			htd=((hd!='')&&(d-cd==hd));
			if (dip)
				f_cpps(getObj('v'+parseInt(d)));
			else if (htd)
				f_hds(getObj('v'+parseInt(d)));
			else
				f_cps(getObj('v'+parseInt(d)));
 
			getObj('v'+parseInt(d)).onmouseover=(dip)?null:cs_over;
			getObj('v'+parseInt(d)).onmouseout=(dip)?null:cs_out;
			getObj('v'+parseInt(d)).onclick=(dip)?null:cs_click;
 
			getObj('v'+parseInt(d)).innerHTML=d-cd;	
			calvalarr[d]=''+(d-cd)+'/'+(cm-(-1))+'/'+cy;
		}
		else {
			getObj('v'+d).innerHTML='&nbsp;';
			getObj('v'+parseInt(d)).onmouseover=null;
			getObj('v'+parseInt(d)).onmouseout=null;
			getObj('v'+parseInt(d)).style.cursor='default';
			}
	}
}
 
prepcalendar('',ccm,ccy);
//getObj('fc'+cc).style.visibility='hidden';
 
function caddm() {
	marr=((ccy%4)==0)?mnl:mnn;
 
	ccm+=1;
	if (ccm>=12) {
		ccm=0;
		ccy++;
	}
	cdayf();
	prepcalendar('',ccm,ccy);
}
 
function csubm() {
	marr=((ccy%4)==0)?mnl:mnn;
 
	ccm-=1;
	if (ccm<0) {
		ccm=11;
		ccy--;
	}
	cdayf();
	prepcalendar('',ccm,ccy);
}
 
function cdayf() {
if ((ccy>sccy)|((ccy==sccy)&&(ccm>=sccm)))
	return;
else {
	ccy=sccy;
	ccm=sccm;
	cfd=scfd;
	}
}

Code simplifié dans mon fichier php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<html>
<head>
<script src="dossier/calendar_fiche.js"></script>
</head>
<body>
<div style="margin-left:50px; margin-top:50px">
<form>
<input type="text" name="depart" value="" onFocus="this.select();lcs(this)" onClick="event.cancelBubble=true;this.select();lcs(this)" style="width:150px" />
</form>
</div>
</body>
</html>

**SpaceFrog** · 16/01/2008, 16h36

Code :

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

1
2
getObj('fc').style.left=Left(ielem) +"px";
	getObj('fc').style.top=(Top(ielem)+ielem.offsetHeight)+"px";

**adr22** · 16/01/2008, 17h27

merci pour ton aide SpaceFrog !

**dingoth** · 16/01/2008, 17h43

Autre solution plus simple...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<html>
<head>
</head>
<body>
<div style="margin-left:50px; margin-top:50px">
<form>
<input type="text" name="depart" value="" onFocus="this.select();lcs(this)" onClick="event.cancelBubble=true;this.select();lcs(this)" style="width:150px" />
<script src="dossier/calendar_fiche.js"></script>
</form>
</div>
</body>
</html>

**SpaceFrog** · 16/01/2008, 17h46

quel rapport avec le positionnement ???

il faut preciser l'unité !!

**dingoth** · 16/01/2008, 17h56

Tu as raison, j'ai voulu aller trop vite et n'ai pas pris en compte le positionnement. Je modifie ma réponse :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
</head>
<body>
<div style="margin-left:50px; margin-top:50px">
<form>
<input type="text" name="depart" value="" onFocus="this.select();lcs(this)" onClick="event.cancelBubble=true;this.select();lcs(this)" style="width:150px" />
<div style="position: relative"><script src="dossier/calendar_fiche.js"></script></div>
</form>
</div>
</body>
</html>

Toujours plus simple que d'aller tripatouiller dans du javascript

**SpaceFrog** · 16/01/2008, 18h00

Je ne pense pas que cela focntionen comme cela sasn modifier le script ...

en fait le script genère un div en position absolute ...
alors coller la balise script dasn un div en position relative ...

**dingoth** · 17/01/2008, 00h54

bah... essaie

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head><title></title></head>
  <body style="margin: 0; padding: 0; border: 0">
    <!-- premier bloc, vert -->
    <div style="background-color: green; width: 100px; height: 100px;"></div>
    <!-- second bloc, rouge, qui se trouve sous le premier -->
    <div style="background-color: red; width: 100px; height: 100px; position: relative">
      <!-- troisième bloc, jaune, qui se trouve au milieu de l&apos;un des deux autres... Mais lequel ? -->
      <div style="background-color: yellow; width: 50px; height: 50px; position: absolute; top: 25px; left: 25px"></div>
    </div>
  </body>
</html>

Comme tu pourras le constater, le 3e bloc est absolu, pourtant, il est au centre du bloc rouge et non du vert, comme tu l'aurais cru. Et c'est normal, c'est le but du positionnement relatif.

Position pour script calendrier

JavaScript

Discussions similaires

Partager

Partager