Contenu TH centré par rapport partie visible de sa colonne spannée

**philoo91** · 06/12/2017, 15h57

Bonjour,

Si vous voulez me filer un coup de main ce sera pas de refus.

Lorsque une celulle d'entete de tableau est très longue l'affichage centré de son texte peux ne pas être visible lorsque qu'une partie de sa colonne l'est.

Ce que je souhaiterais c'est d'avoir centrée le texte de l'entète de la/les colonnes visibles même partiellement lors d'un scroll horizontal.

En image c'est plus parlant :
Nom : scroll.png
Affichages : 153
Taille : 20,5 Ko

Nom : scroll.png
Affichages : 153
Taille : 20,5 Ko

**danielhagnoul** · 06/12/2017, 20h34

Une image peut être utile pour illustrer le propos, mais l'essentiel c'est les codes (CSS, HTML, JS) sans lesquels on ne peut tester le problème.

**philoo91** · 07/12/2017, 06h08

Bonjour,

Très bien voici :
Tu verras ce que j'ai tenté de faire en JS dans app.js avec les lignes 47 à 63 (en commentaire).
Pas jouable avec les padding right et left

index.html :

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
 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Bootstrap template</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="css/styles.css" rel="stylesheet">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
	<div class="container"> 
		<div class="ui-planning"></div>
	</div>
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="js/llls.js"></script>
	<script src="js/datemgr.js"></script>
	<script src="js/app.js"></script>
  </body>
</html>

css/styles.css :

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
p {
    margin: 0;
}
.ui-planning .content{
	margin:5px;	
	border: 1px solid #111;
	overflow:auto;
}
.ui-planning{
	border: black 3px solid;
	margin: 10px;
}
.ui-planning table{
	width:100%;
}
.ui-planning table, .ui-planning  thead th{
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding:5px;
	text-align:center;
	word-wrap: break-word;
}
.ui-planning table tr th[colspan="1440"]{
	border-bottom: 1px solid #ccc;
	border-top:2px solid  white;
}

js/llls.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
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
/*$Revision:   3.0  $*/
try {
	if(!Object.prototype.__defineGetter__ &&
	Object.defineProperty({}, "x", { get: function() { return true } }).x) {
		Object.defineProperty(Object.prototype, "__defineGetter__",
	 { enumerable: false, configurable: true,
		value: function(name, func) {
			Object.defineProperty(this, name,
			 { get: func, enumerable: true, configurable: true });
		} 
	 });
		Object.defineProperty(Object.prototype, "__defineSetter__",
	 { enumerable: false, configurable: true,
		value: function(name, func) {
			Object.defineProperty(this, name,
			 { set: func, enumerable: true, configurable: true });
		} 
	 });
	}
} catch(defPropException) { /*Do nothing if an exception occurs*/ };
 
 
window.Num=window.Num ||
    function (value){
		var value_=value || 0;
 
		if (!isNaN(value_))return Number(value_);
 
		var retVal= Globalize.parseFloat(value_.toString(), 10, Globalize.culture().name);
		return (isNaN(retVal)?0:retVal);
	};
 
window.className=window.className || 
	function  (obj){
		if (!obj)return '';
		var toClass = {}.toString 
		return toClass.call(obj).replace('[','').replace(']','').split(" ")[1].toUpperCase();
	}
 
addEventListener=addEventListener || 
	function (eventName,callBackProc){
		if (addEventListener)addEventListener(eventName, callBackProc, true);
		else if (attachEvent)attachEvent('on'+eventName, callBackProc);
	}
 
window.VarIsDef=window.VarIsDef || function VarIsDef(Var) {return (typeof Var!=undefined && Var!=null);} 
 
Array.prototype.objIndexOf = Array.prototype.objIndexOf || 
	function(propertyToSearch,propertyValueToSearch) {
		for (var i=0;i<this.length;i++) {
		  if (this[i].hasOwnProperty(propertyToSearch) && this[i][propertyToSearch]==propertyValueToSearch) return i;
		}
		return -1;
	}
 
window.execFunction=window.execFunction ||
	function execFunction(FunctionName_){
		if (!VarIsDef(FunctionName_))return;
		var i=function_exists(FunctionName_);
		if(typeof i=="function")i.call();
		FunctionName_='';
	}
 
window.function_exists=window.function_exists ||
	function(e){
        if(typeof e=="string"&&typeof window[e]=="function")return window[e];
        if(typeof e=="function")return e;
        return false
    }
 
Math.sign = Math.sign || 
	function(x) {
		x = +x; // on convertit le paramètre en nombre
		if (x === 0 || isNaN(x))return 0;
		return x > 0 ? 1 : -1;
	}
 
Math.floorAt=Math.floorAt || 
	function (value,prec,decimalSign){
		var _prec=prec || 0;
		var _value=0;
		try {_value=eval(value);}catch(exception) {_value=0;};
 
		var _decimalSign=decimalSign || '.';
 
		_prec=(isNaN(_prec))?0:Number(_prec);
		_value=((isNaN(_value))?0:_value).toString();
		_decimalSign=(typeof _decimalSign!='string')?'.':(_decimalSign.length!=1)?'.':(".,".indexOf(_decimalSign)<0)?'.':_decimalSign;
		var _dsp=_value.indexOf(".");
		var _iPart=(_dsp<0)?_value:_value.substr(0,_dsp);
		var _dPart=((_dsp<0)?'':_value.substr(_dsp+1))+"0".repeat(_prec);
 
		return _iPart+((_prec!=0)?_decimalSign+_dPart.slice(0,_prec):'');
	}
 
window.trim=window.trim || 
    function(e,t){
        type=typeof e;
        if(type!=="string"&&type!=="number")return false;
        var n,r=0,i=0;e+="";
        if(!t){n=" \n\r	\fÂ*       ?????\u2028\u2029 "}
        else{t+="";n=t.replace(/([\[\]\(\)\.\?\/\*\{\}\+\$\^\:])/g,"$1")}
        r=e.length;
        for(i=0;i<r;i++){if(n.indexOf(e.charAt(i))===-1){e=e.substring(i);break}}
        r=e.length;
        for(i=r-1;i>=0;i--){if(n.indexOf(e.charAt(i))===-1){e=e.substring(0,i+1);break}}
        return n.indexOf(e.charAt(0))===-1?e:""
    }
 
String.prototype.repeat=String.prototype.repeat ||
	function (){
		var _times=arguments[0] || 0;
		var _retval='';
		if (isNaN(_times))return '';
		_times=parseInt(_times);
		for (var _t=0 ; _t<_times ; _t++)_retval+=this.toString();
		return _retval;
	}
 
window.is_jqueryOk=window.is_jqueryOk ||
	function(e){
        if(e===null)return false;
        type=typeof e;
        if(type=="string"&&e.length>0){
            e=$(e);
            if(e===null)return false;
            if(e.length==0)return false;
            type=typeof e
         }
         if(type!="object")return false;
         return e
    }
 
window.doEvent=window.doEvent ||
	function (obj,eventName){
		var jqObj=$(obj);
		var jsObj=jqObj[0] || obj;
		var _eventName=(eventName || '')+'';
 
		if (!jsObj && !jqObj)return;
		if (typeof _eventName!='string')return;
		if (_eventName.length==0)return;
 
		var disabled=jsObj.disabled
		var evt=document.createEvent("Event");
		evt.initEvent(_eventName,false,true);
 
		jsObj.disabled=false;
		jsObj.dispatchEvent(evt);
		jsObj.disabled=disabled;
	}	
 
window.valueIsIn=window.valueIsIn || 
	function (value){
		if (Array.isArray(this))return ($.inArray(value,this)!=-1);
		for (var prop in this){
			if (this[prop]==value)return true;
		}
		return false;
	}
 
window.getXPath=window.getXPath || 
	function (domObject){
		if (!VarIsDef(domObject))return '';
 
		var result='';
		var ps=$(domObject).parents();
		for (var pid=0;pid<ps.length;pid++) {
			var p=ps[pid];
			if (VarIsDef(p.nodeName)){
				var r=p.nodeName;
				if (p.nodeName.toLowerCase()=='div'){
					if (p.id.length!=0)r+='#'+p.id;
					if (VarIsDef($(p).attr('class'))) if ($(p).attr('class').length!=0)r+='.'+$(p).attr('class').trim().replace(/  /g,' ').replace(/ /g,'.');
				}
				result=r+' '+result;
			}
		};
		return result;
	}
 
window.isInArray=window.isInArray || 
	function (value,objX){
		if (typeof objX!='object')return false;
		if (VarIsDef(objX.length))return ($.inArray(value,objX)!=-1);
		for (var prop in objX){
			if (objX[prop]==value)return true;
		}
		return false;
	};
 
window.SortList=window.SortList || 
  	function (listname) { 
        var r=new Array();
        var o=new Object();
        if (typeof(listname)=='object')o=listname.options;
        else o=$(listname + " option"); 
        for (var iloop=0 ; iloop<o.length ; iloop++)r.push(o[iloop]);
        r.sort(function(a, b){return (a.text < b.text) ? -1 : (a.text > b.text) ? 1 : 0;}); 
        $(r).remove(); 
        $(listname).append($(r)); 
    }
 
window.isValidAngle=window.isValidAngle ||
	function (angle){
		if (isNaN(angle))return false;
		if (parseFloat(angle)!=parseInt(angle))return false;
		var _angle=parseInt(angle);
		return (_angle>=0 && _angle<=359);
	}
 
window.isValidColor=window.isValidColor || 
	function (color){
		if (isNaN(parseInt(color,16)))return false;
		var _color=parseInt(color,16);
		return (_color>=0 && _color<=parseInt('FFFFFF',16));
	}
 
window.grpDom=window.grpDom ||
	function (ids,defaultAll){
		var grp=new Array();
		if (!VarIsDef(ids))return grp;
 
		if (Array.isArray(ids))grp=ids;
		else if (typeof(ids)=='object')grp.push(ids);
		else if(typeof(ids)=='string'){
			if (ids='*')grp=$(defaultAll);
			else return grp=$(ids);
		}
 
		for (var iloop=0 ; iloop<grp.length ; iloop++){
			var e='';
			if (typeof(grp[iloop])=='string')grp[iloop]=$(grp[iloop]);
			if (VarIsDef(grp[iloop].id))e=grp[iloop].id;
			if (typeof(e)!='string')grp.splice(ilopp,1);
			else if (e.length==0)grp.splice(iloop,1);
				else {
					e=$("#"+e);
					if (e.length==0)grp.splice(iloop,1);
					else grp[iloop]=e[0];
				}
		}
		return grp;
	}
 
window.DOMParser=window.DOMParser || 
	function StringtoXML(text){
		 if (window.ActiveXObject){
			 var doc=new ActiveXObject('Microsoft.XMLDOM');
			 doc.async='false';
			 doc.loadXML(text);
		 } else {
			 var parser=new DOMParser();
			 var doc=parser.parseFromString(text,'text/xml');
		 }
		 return doc;
	 } 
 
window.clipboardGetData=function (fmt){
	var defaultFmt='text';
	var fmt_=fmt || defaultFmt;
	fmt_+='';
	if (typeof fmt_!='string')fmt_=defaultFmt;
	if (window.clipboardData)return window.clipboardData.getData(fmt_);
	return window.event.clipboardData.getData('text');
}

js/app.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
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
function displayPlan(fromDate , toDate){
    var divUiPlanning=document.getElementsByClassName('ui-planning');
    if (!divUiPlanning.length){return;}
    divUiPlanning=divUiPlanning[0];
 
    var jours = new Array("dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi");
    var mois = new Array("janvier", "février", "mars", "avril", "mai", "juin", "juillet", "aôut", "septembre", "octobre", "novembre", "décembre");
 
    var divContent=divUiPlanning.appendChild(document.createElement('div'));
    divContent.setAttribute('class',"content")
 
    var table=divContent.appendChild(document.createElement('table'));
    var table_header=table.appendChild(document.createElement('thead'));
    var table_body=table.appendChild(document.createElement('tbody'));  
    var table_trDates=table_header.appendChild(document.createElement('tr')); 
    var table_trHours=table_header.appendChild(document.createElement('tr'));
    var table_trMinutes=table_header.appendChild(document.createElement('tr'));
 
    var fromDate=new Date(fromDate) || new Date();
    var toDate=new Date(toDate) || new Date();
    var nbDays=fromDate.interval(toDate).days;
 
    for (var iDays=0 ; iDays<nbDays ; iDays++){
        var colSpan=[0,0,0];
        for (iHours=0 ; iHours<24 ; iHours++){
            colSpan[0]=0;
            for (iMinutes=0 ; iMinutes<60 ; iMinutes+=5){
                var thMinutes=document.createElement('th');
                thMinutes.innerText=('0'+iMinutes).slice(-2);
                table_trMinutes.appendChild(thMinutes);       
                colSpan[0]++; 
            }
            var thHours=document.createElement('th');
            thHours.innerText=('0'+iHours).slice(-2)+"h";
            thHours.colSpan=colSpan[0];
            table_trHours.appendChild(thHours);
            colSpan[1]++;
        }
        var d=new Date(fromDate.setDate(fromDate.getDate()-fromDate.getDay()+1+iDays));
        var thDates=document.createElement('th');            
 
        thDates.innerText=d.daysNames()+" "+("0"+d.getDate()).slice(-2)+"/"+("0"+(d.getMonth()+1)).slice(-2)+"/"+d.getFullYear();           
 
        table_trDates.appendChild(thDates);      
        thDates.colSpan=colSpan[0]*colSpan[1];             
    }
 /*
    var allWith=table_trDates.parentElement.clientWidth;
    for (var iLoop=0 ; iLoop<table_trDates.children.length ; iLoop++){
        table_trDates.children[iLoop].style.paddingRight=(allWith/table_trDates.children.length)+"px";
        table_trDates.children[iLoop].style.paddingLeft="550px";
    }
 
    allWith=table_trDates.parentElement.clientWidth;
    divContent.onscroll=function(evt){
        console.log(this.scrollLeft);
        var oneWidth=allWith/table_trDates.children.length; //this.children[0].children[0].clientWidth
        var x=allWith/oneWidth-table_trDates.children.length; 
        table_trDates.children[x].style.paddingLeft=(550+this.scrollLeft-(oneWidth*x))+"px";
        evt.preventDefault();
        evt.stopPropagation();
    }
*/
}
 
$(document).ready(function (){
    var today=new Date();
    var fromDate=today.setDate(today.getDate()-today.getDay()+1);
    displayPlan("12/04/2017","12/16/2017");
});

js/datemgr.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
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
"use strict"
var daysNames=[];
var monthsNames=[];
 
monthsNames["en"]=["january","february","march","april","may","june","july","august","september","october","november","december"];
monthsNames["en-GB"]=monthsNames["en"];
monthsNames["fr"]=["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"];
monthsNames["fr-FR"]=monthsNames["fr"];
 
daysNames["en"]=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"];
daysNames["en-GB"]=daysNames["en"];
daysNames["fr"]=["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"];
daysNames["fr-FR"]=daysNames["fr"];
 
function dateMgr(){
	this.init();
}
dateMgr.prototype={	
	fmt: function fmt(){return ["Weeks","Days","Hours","Minutes","Seconds","Milliseconds"]},
	daysNames:function daysNames(d){
		var _name=window.daysNames[this.lang];
		var _d=(!VarIsDef(d))?this:d;	
 
		return _name[(className(_d)==='DATE')?_d.getDay():(className(_d)==='NUMBER')?_d:(isNaN(_d))?-1:parseFloat(_d)] || _name;
	},
	monthsNames:function monthsNames(d){
		var _name=window.monthsNames[this.langUse] || window.monthsNames['en'];
		var _d=(!VarIsDef(d))?this:d;		
 
		return _name[(className(_d)==='DATE')?_d.getMonth():(className(_d)==='NUMBER')?_d:(isNaN(_d))?-1:parseFloat(_d)] || _name;
	},
	add:function add(d)	{
 
	},
	holidays:function holidays(d){
		var _holyday=function(y,m,d,label){return {date:new Date(y,m,d),label:label};}
		var _d=d || this;
		var Y=(className(_d)==='DATE')?_d.getFullYear():(className(_d)==='NUMBER')?_d:(isNaN(_d))?0:parseFloat(_d);
		var easter=new Date().easter(d)
		return [
				new _holyday(Y,"00","01","jour de l'an"),	
				new _holyday(Y,"04","01","jour du travail"),
				new _holyday(Y,"04","08","armistice 1945"),
				new _holyday(Y,"06","14","fête nationale"),
				new _holyday(Y,"07","15","assomption"),
				new _holyday(Y,"10","01","toussaint"),
				new _holyday(Y,"10","11","armistice 1914"),
				new _holyday(Y,"11","25","noël"),
				new _holyday(Y, easter.getMonth(), easter.getDate()+1,"paques"),
				new _holyday(Y, easter.getMonth(), easter.getDate()+39,"ascencion"),
				new _holyday(Y, easter.getMonth(), easter.getDate()+50,"pentecôte")
			   ].sort(function(a,b){
				return a.date.getTime()-b.date.getTime();
				})
	},
	isHoliday:function isHoliday(d){
		var _d=d || this;
		if(className(_d)!=='DATE')return false;
		var is=false;
		var iLoop=0;
		var _holidays=this.holidays(_d)
		while (!is && iLoop<_holidays.length){
			is=(_holidays[iLoop].date.toString()===_d.toString());
			iLoop+=+(!is);
		}
		return is;
	},
	easter:function easter(d){
		var _d=d || this;
		var Y=(className(_d)==='DATE')?_d.getFullYear():(className(_d)==='NUMBER')?_d:(isNaN(_d))?0:parseFloat(_d);
		if (Y==0)return Y;
 
		var G = Y%19;
		var C = Math.floor(Y/100);
		var H = (C - Math.floor(C/4) - Math.floor((8*C+13)/25) + 19*G + 15)%30;
		var I = H - Math.floor(H/28)*(1 - Math.floor(H/28)*Math.floor(29/(H + 1))*Math.floor((21 - G)/11));
		var J = (Y*1 + Math.floor(Y/4) + I + 2 - C + Math.floor(C/4))%7;
		var L = I - J;
		var easterMonth = 3 + Math.floor((L + 40)/44);
		var easterDay = L + 28 - 31*Math.floor(easterMonth/4);
		return new Date(Y, easterMonth-1, easterDay);
	},
	quantum:function quantum(d){
		var _d=d || this;
		var retVal=0;
		if (className(_d)!='DATE')return retVal;
		var y=_d.getFullYear(),m=_d.getMonth();
		for (var iLoop=0 ; iLoop<m ; iLoop++)retVal+=this.monthSize(new Date(y,iLoop));
		return retVal+_d.getDate();
	},
	isLeapYear:function isLeapYear(d){
		var _d=d || this;
		var y=(className(_d)==='DATE')?_d.getFullYear():(className(_d)==='NUMBER')?_d:(isNaN(_d))?0:parseFloat(_d);
		if (y!=0)return (new Date(y,1,29).getDate()==29);
		return false;
	},
	monthSize:function monthSize(d) {
		var _d=d || this;
		if (className(_d)==='DATE')return new Date(new Date(_d.getFullYear(),_d.getMonth()+1).getTime()-(1000*3600*24)).getDate();
		return 0;
	},
	yearSize:function yearSize(d){
		var _d=d || this;
		var y=(className(_d)==='DATE')?_d.getFullYear():(className(_d)==='NUMBER')?_d:(isNaN(_d))?0:parseFloat(_d);
		if (y!=0)return ((new Date().isLeapYear(y))?366:365);
		return 0;
	},
	interval:function interval(dS,dE,fmt){
		var diff = {millisecondes:0,seconds:0,minutes:0,hours:0,days:0,weeks:0};                           // Initialisation du retour
		if (arguments.length==0)return diff;
		if (arguments.length==1){
			dE=dS;
			dS=this; 
		}
		var _dE=Date.UTC(dE.getFullYear(),dE.getMonth(),dE.getDate(),dE.getHours(),dE.getMinutes(),dE.getSeconds(),dE.getMilliseconds());
		var _dS=Date.UTC(dS.getFullYear(),dS.getMonth(),dS.getDate(),dS.getHours(),dS.getMinutes(),dS.getSeconds(),dS.getMilliseconds());
		var delay=Math.abs(_dE-_dS);
 
 
		diff.days=Math.floor(delay/(24*3600*1000));
		delay=delay % (24*3600*1000);
 
		diff.weeks=Math.floor(diff.days/7);
 
		diff.hours=Math.floor(delay/(3600*1000));
		delay=delay % (3600*1000);
 
		diff.minutes=Math.floor(delay/(60*1000));
		delay=delay % (60*1000);
 
		diff.seconds=Math.floor(delay/1000);
		delay=delay % 1000;
 
		diff.millisecondes=delay;
		return diff;
	},
	getYearDay:function getYearDay() { //1 - 366
		var year  = this.getFullYear();
		var month = this.getMonth();
		var day   = this.getDate();
 
		var offset = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
 
		//l'année bissextile n'est utile qu'à partir de mars
		var bissextile = (month < 2) ? 0 : (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0));
 
		return parseInt(day + offset[month] + bissextile);
	},
	getMonday:function getMonday() {
		var offset = (this.getDay() + 6) % 7;
		return new Date(this.getFullYear(), this.getMonth(), this.getDate()-offset);
	},
	getWeek:function getWeek() { //1 - 53
		var year = this.getFullYear();
		var week;
 
		//dernier lundi de l'année
		var lastMonday = new Date(year, 11, 31).getMonday();
 
		//la date est dans la dernière semaine de l'année
		//mais cette semaine fait partie de l'année suivante
		if(this >= lastMonday && lastMonday.getDate() > 28) {
			week = 1;
		}
		else {
			//premier lundi de l'année
			var firstMonday = new Date(year, 0, 1).getMonday();
 
			//correction si nécessaire (le lundi se situe l'année précédente)
			if(firstMonday.getFullYear() < year) firstMonday = new Date(year, 0, 8).getMonday();
 
			//nombre de jours écoulés depuis le premier lundi
			var days = this.getYearDay() - firstMonday.getYearDay();
 
			//window.alert(days);
 
			//si le nombre de jours est négatif on va chercher
			//la dernière semaine de l'année précédente (52 ou 53)
			if(days < 0) {
				week = new Date(year, this.getMonth(), this.getDate()+days).getWeek();
			}
			else {
				//numéro de la semaine
				week = 1 + parseInt(days / 7);
 
				//on ajoute une semaine si la première semaine
				//de l'année ne fait pas partie de l'année précédente
				week += (new Date(year-1, 11, 31).getMonday().getDate() > 28);
			}
		}
 
		return parseInt(week);
	},
	init:function(){
		var _langUse='fr-FR';
 
		this.__proto__.__proto__.__defineGetter__('lang',function(){return _langUse || 'en';});
		this.__proto__.__proto__.__defineSetter__('lang',function(lang){
			if (typeof lang=='string')_langUse=lang;
		});
	}
}
 
for (var f in new dateMgr()){
	if (typeof dateMgr.prototype[f]==='function'){
		Date.prototype[f]=Date.prototype[f] || dateMgr.prototype[f];
		 delete dateMgr.prototype[f];
	}
};

**danielhagnoul** · 08/12/2017, 11h56

J'ai regardé et testé vos codes, ils génèrent une Table. Cette Table ayant une largeur invraisemblable vous restreignez l'affichage de la Table au premier élément TH.

Le premier TH couvre 288 colonnes et son contenu (un titre) est centré, il est donc invisible à l'ouverture de la page web et il est invisible la plupart du temps lorsqu'on fait défiler les 288 colonnes.

La question est donc : "Comment rendre le contenu du TH visible pendant que l'on parcourt les 288 colonnes ?"

Je ne vois qu'une seule possibilité, répétez plusieurs fois le contenu du TH.

Vos "TH heure" couvre 12 colonnes et dans la partie visible de votre table on en voit trois, donc 3 * 12 = 36.
Il faut donc diviser le "TH jour" qui couvre actuellement 288 colonnes en 288/36 = 8. De cette manière, le Jour sera visible pendant la totalité du défilement.

Au lieu de : <th colspan="288">lundi 04/12/2017</th>
Vous aurez 8 fois : <th colspan="36">lundi 04/12/2017</th>

Contenu TH centré par rapport partie visible de sa colonne spannée

JavaScript

Discussions similaires

Partager

Partager