1. #1
    Membre à l'essai
    Homme Profil pro
    Lisses
    Inscrit en
    juillet 2013
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Lisses
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juillet 2013
    Messages : 22
    Points : 10
    Points
    10

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

    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 : 41
Taille : 20,5 Ko

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 761
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 761
    Points : 21 160
    Points
    21 160
    Billets dans le blog
    39

    Par défaut



    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.

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre à l'essai
    Homme Profil pro
    Lisses
    Inscrit en
    juillet 2013
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Lisses
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juillet 2013
    Messages : 22
    Points : 10
    Points
    10

    Par défaut

    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];
    	}
    };

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 761
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 761
    Points : 21 160
    Points
    21 160
    Billets dans le blog
    39

    Par défaut

    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>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. Jdialog centrée par rapport a la fenêtre
    Par Jonpool dans le forum Débuter
    Réponses: 3
    Dernier message: 15/03/2010, 00h57
  2. Position de l'image non centrée par rapport à l'écran
    Par marcandre dans le forum JavaScript
    Réponses: 4
    Dernier message: 09/02/2010, 16h57
  3. Texte centré par rapport à une image (sans table)
    Par devyan dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 13/12/2008, 21h10
  4. Réponses: 2
    Dernier message: 04/10/2006, 10h22
  5. tri d'index de tableau par rapport au contenu
    Par parisien dans le forum C
    Réponses: 7
    Dernier message: 14/02/2006, 00h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo