Verschil in positie van div's tov tabel bij nieuwe computer

luc99 · 19 apr 2023

Ik heb sinds een half jaar een planningstoepassing in gebruik.
De planningstool is een tabel ( kalender ) met kolommen ( dagen ) en rijen ( werknemers ), waar boven div's geplaatst worden ( taken ).
Deze taken hebben een begin datum en einddatum. Via een berekening wordt bepaald welke dag overeenkomt met de locatie waar de div gepositioneerd dient te worden.
Ik gebruik deze tool nu iets meer dan een half jaar zonder problemen op verschillende computers.

Nu is er een nieuwe college bij gekomen en merkten we vandaag dat om één of andere reden de div's ( taken ) niet op de juiste postitie geplaatst worden in de tabel.
Een taak die normaal op 2 mei ingevoerd is staat bij hem bijvoorbeeld op 9 mei.

Wat kan hier de reden van zijn ?

Aar · 19 apr 2023

Kan veel oorzaken hebben.
We hebben alleen geen glazen bol.

bron · 20 apr 2023

Een taak die normaal op 2 mei ingevoerd is staat bij hem bijvoorbeeld op 9 mei.

Bij collega op andere computer? Op tablet/phone ipv desktop? Met andere browser? Browser op andere breedte?

luc99 · 24 apr 2023

Intussen heb ik de oorzaak gevonden. Het probleem stelt zich bij de zoomfactor die ingesteld staat op de browser. Een goede oplossing heb ik hiervoor nog niet gevonden.

Hierna heb ik de volledige code toegevoegd van de toepassing waarmee je volgende zal zien :
Stel bij het begin de zoomfactor in op 100 - controleer de opgegeven data's en wijzig daarna de zoomfactor.
Op 23/10/2022 staat er een bruin blokje van 2 dagen en een jaar later op 23/10/2023 staat een zelfde blokje ook voor 2 dagen.
Door het wijzigen van de zoomfactor zal je zien dat het tweede blokje verschuift tov de achterliggende tabel.

Hoe kan ik dit oplossen ?

HTML:

<DOCTYPE HTML>
<html>
<head>
  
<link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
  
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>

  #col-1{
      min-width: 125px; 
      position: -webkit-sticky;
      position: sticky;
      left: 0px;
      background: #BCCADD;
      border-right: 1px solid #8BA0BC;
  }
  
  .eerste{
      min-width: 125px;
      position: -webkit-sticky; 
      position: sticky;
      left: 0px;
      z-index: 1000;
      background: #BCCADD;
      border-right: 1px solid #8BA0BC;
  }
  
  #tabell {
    position: absolute;
    left: 0px;
    top: 0px;
  }
    
  #scrollablearea {
    position: absolute;
    left: 127px;
    top: 69px;
  }
  
  table, th, td {
    border: 1px solid #8BA0BC;
    border-collapse: collapse;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;  
  }
  
  th {
      min-width: 20px; 
      height: 20px;
      border-right: 1px solid #8BA0BC;
      border-top: 1px solid #8BA0BC;
      border-bottom: 1px solid #8BA0BC;
      line-height: 20px;
      color: #000;
      background: #BCCADD repeat-x 0 center;
  }
  
  td {
      text-align: left;
      height: 23px;
  }
  
  .d0 {
      background-color: #DDDDDD;
  }
  
  .d6 {
      background-color: #DDDDDD;
  }
  
  .verlof {
      background-color: #ffbbaa;
  }
  
  .pverlof {
       background-color: #000000;
  }

 .vandaag {
      background-color: blue;
  }
  
  @keyframes blinker {  
    50% { opacity: 0; }
  }

  [title^="9999"] {
    background-color: red;
    color:white;
  }

</style>

</head>

<body>
  
<table id="tabell" border="1px"></table>
<div id="scrollablearea"></div>

<script>
function addNewTask(werknemer, werknemerID, werfstart, voorzienedagen, werf, kleur,taakID, werfID) {
    
  //Overloop de lijst van de namen en controleer 
  //of de naam van de werknemer bij de nieuwe taak reeds in de array
  //van de werknemers zit -> Zo ja, bepaal dan het id nummer hiervan
  var gevonden_id=[];
  var nieuw=[];

  for (var i = 0; i < namen.length; i++){
      if (splitnamentoNaam(namen[i]) == werknemer ){
          nieuw = "";
          gevonden_id = i;
          break;
      }        
      else {
         nieuw = "1"; 
         gevonden_id = i + 1;     
      }
  }

  //Indien nieuw waarde 1 heeft, dan wil dit zeggen dat de naam van de 
  //werknemer niet voorkomt in de lijst en er dus een extra regel
  //dient aangemaakt te worden.  Voor de persoonlijke verlofdagen
  //dient niets gedaan te worden.  Bij het aanmaken van het databestand
  //is voorzien dat van alle werknemers de verlofdagen worden opgenomen in 
  //het bestand

  if (nieuw == "1" ) {
      if (werknemerID < 9999 ) {  
          namen.push( werknemer + "#" + werknemerID ); 
     }
     else {
          namen.push( werknemer.substring(0, 19) + "#" + werknemerID );
     }         
      
      for(var k = 0; k < pverlof.length; k++){ 
          
          if ( pverlof[k].werknemerid == splitnamentoID(namen[i])) {
               var persoonlijkverlof = pverlof[k].dag;   
          }
        }

        var nieuwe_rij = "<tr><th id='rij" + i + "' class='eerste' title='" + splitnamentoID ( namen[i]) + "'>" + splitnamentoNaam ( namen[i]) + "</th>"
       
        if (werknemerID < 9999) {

            for (var j = 0; j < dagen.length; j++) {
                if(verlof.indexOf(convertDate(dagen[j].toString())) !== -1) 
                  { var klas = " class='verlof' "; } 
                else if (persoonlijkverlof.indexOf(convertDate(dagen[j].toString())) !== -1)
                  { var klas = " class='pverlof' "; }
                else
                  { var klas = " class='d" + dagen[j].getDay(); }  

                nieuwe_rij+= "<td id='" + i +"-"+ j + "' " + klas + "'>" + "</td>";      
            }

        } else {

            for (var j = 0; j < dagen.length; j++) {
                if(verlof.indexOf(convertDate(dagen[j].toString())) !== -1)  
                  { var klas = " class='verlof' "; } 
                else   
                  { var klas = " class='d" + dagen[j].getDay(); }  

                nieuwe_rij+= "<td id='" + i +"-"+ j + "' " + klas + "'>" + "</td>";      
            }

        }
        nieuwe_rij+= "</tr>";
      
        $('#tabell tr:last').after(nieuwe_rij);
    }
  
    //plaats nu de div als extra taak op de planning
    
    //bepaal hiermee de hoogste nummer van boxID    
    var num = $(".box").map(function() { return $(this).data('number'); }).get();
    var volgorde = Math.max.apply(Math, num) + 1;

    maakDiv(volgorde);           
    maakDivDraggable(volgorde);
    maakDivResizable(volgorde);
    maakDivClickable(volgorde);   
    maakDivHover(volgorde);

    var werfstart = makeDate ( werfstart, 2 )
    var diffTime = werfstart - startdate;
    var diffDays = Math.round( diffTime / (1000 * 3600 * 24));
    var positie = (diffDays * 23) ;
    var voorzienedagen = voorzienedagen * 23;
    var werf_volledig = werf; 
    var werf = CheckandReduceLengthWerfbeschrijving(werf_volledig, voorzienedagen);
    var txtkleur =  calculateTextColour(kleur);
    var top = ( gevonden_id ) * 23;
      
    $('#box' + volgorde ).append(werf)
                          .css({"left": positie +"px"})
                          .css({"width": voorzienedagen +"px"})
                          .css({"font-family": "Arial, Helvetica, sans-serif"})
                          .css({"font-size": "10px"})
                          .css({"font-weight": "bold"})
                          .css({"display": "flex"})
                          .css({"justify-content": "center"})
                          .css({"background": kleur})
                          .css({"color": txtkleur})
                          .css({"height": "22px"})
                          .css({"margin": "0 0"})
                          .css({"position": "absolute"})
                          .css({"opacity": "0.6"})
                          .css({"z-index": volgorde})
                          .css({"border": "1px solid #000"})
                          .css({"border-radius": "15px"})
                          .css({"align-items": "center"})
                          .css({"top": top + "px"})
                          .prop('title', werfID )
                          .attr('data-taakID', taakID )
                          .attr('data-number', volgorde )
                          .attr('data-werf', werf_volledig )
                          ;
}

function bepaalEndDate (){
    data.forEach(function(obj) {
        created_end.push( obj.enddec );
        created_end.sort();
      });

      var end_laatste_dag = ( created_end[created_end.length - 1]);
      var yy = parseInt(end_laatste_dag.substr(0,4)) + 1;
      var mmdd = end_laatste_dag.substr(4);
      var end_laatste_dag = yy + mmdd;
          
      return makeDate (end_laatste_dag, 1);
}

function bepaalStartDate () {
    data.forEach(function(obj) {
        created_start.push( obj.startdec);
        created_start.sort();
      });
         
      return makeDate (( created_start[0]), 1) ;
}

function bepaalvandaag(datum) {
    
    var d = new Date();
    var year = (( d.getYear()) + 1900).toString();
    var month = ( "0" + ( d.getMonth() + 1 ));
    var month = month.substr(month.length - 2);
    var day = (( "0" + (d.getDate())));
    var day = day.substr(day.length - 2);
    var output_vandaag = year + month + day;
    var output = output_vandaag ;

   if ( datum.length > 0 ){    
    var year = datum.substr(6,4);
    var month = datum.substr(3,2);
    var day = datum.substr(0,2);
   }

   var output = year + month + day;

   //kleur blokje van vandaag als aanduiding van huidige dag
   $('#' + output_vandaag ).css({"background": "blue"});
   $('#' + output_vandaag ).css({"color": "white"});
  
   $('html, body').animate({
                   scrollLeft: $("#" + output).offset().left - 265
                 }, 2000);
}

function blinkOff() {

    //bepaal hiermee de hoogste nummer van boxID    
    var num = $(".box").map(function() { return $(this).data('number'); }).get();
    var highest = Math.max.apply(Math, num) + 1;

  for (var i = 0; i < highest; i++) {      
      $('#box' + i ).css({"animation": "none"});
  }
}

function calculateTextColour(hex) {
    
    var g1 = parseInt(hex.substring(1,2),16) * 0.299;
    var g2 = parseInt(hex.substring(3,4),16) * 0.587;
    var g3 = parseInt(hex.substring(5,6),16) * 0.114;
    var g4 = parseInt(g1)+parseInt(g2)+parseInt(g3);
    
    if (g4 > 7) { return '#000000'} else { return '#ffffff'};
}

function CheckandReduceLengthWerfbeschrijving(beschrijving, dagen) {
    let d = dagen;
    let l = beschrijving.length;
    let t = beschrijving;
           
    canvas = document.createElement("canvas");
    context = canvas.getContext("2d");
    context.font = "11px Arial, Helvetica, sans-serif";
    width = context.measureText(t).width;
    formattedWidth = Math.ceil(width);
     
    if ( formattedWidth > d ) {    
      l--;
      var beschrijving = t.substr(0, l);
            
      return CheckandReduceLengthWerfbeschrijving(beschrijving,dagen)
    } else {
           
      return beschrijving;    
    } 
}

function convertDate(inputFormat) {
  function pad(s) { return (s < 10) ? '0' + s : s; }
  var d = new Date(inputFormat)
  return [pad(d.getDate()), pad(d.getMonth()+1), d.getFullYear()].join('/')
}

function convertMS(ms) {
  var d, h, m, s;
  s = Math.floor(ms / 1000);
  m = Math.floor(s / 60);
  s = s % 60;
  h = Math.floor(m / 60);
  m = m % 60;
  d = Math.floor(h / 24);
  h = h % 24;
  return { d: d, h: h, m: m, s: s };
}

function foo(status, left, top, width, startdate, einddate) {
   
    blinkOff();
    $('#' + status ).css({"animation": "blinker 1.2s linear infinite"});

  var dag = Math.round(( Math.round(left) ) / 23);
  var rij = Math.round(( Math.round(top) ) / 23);
  var totaaldagen = Math.round(( Math.round(width)) / 23);
  var resultaat = ( getDateArray(startdate, einddate));
  var dd = resultaat[dag].getDate();
  var mm = resultaat[dag].getMonth() + 1;
  var yy = resultaat[dag].getYear() + 1900;
  var fdd = resultaat[dag + totaaldagen - 1].getDate();
  var fmm = resultaat[dag + totaaldagen - 1].getMonth() + 1;
  var fyy = resultaat[dag + totaaldagen - 1].getYear() + 1900;
  var ddmmyyyy = dd + "/" + mm + "/" + yy;
  var fddmmyyyy = fdd + "/" + fmm + "/" + fyy;
  var inhoud = $('#rij' + rij ).html();
  var werfcode = $('#' + status ).attr('title').substring(0,9);
  var werknemer = $('#rij' + rij ).attr('title'); 
  var taak = $('#' + status ).attr('data-taakID');
  var msg = status + "§" + ddmmyyyy + "§" + fddmmyyyy + "§" + werfcode + "§" + werknemer + "§" + taak + "§" + inhoud + "§" + totaaldagen 

}

function getDateArray(start, end) {
  var arr = new Array();
  var dt = new Date(start);
  while (dt <= end) {
    arr.push(new Date(dt));
    dt.setDate(dt.getDate() + 1);
  }
  return arr;
}

function getDaysInMonth(year, month) {
  return new Date(year, month, 0).getDate();
}

function GetMonthName(monthNumber) {
  var months = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'];
  return months[monthNumber - 1];
}

function ISO8601_week_no(dt) { 
  var tdt = new Date(dt.valueOf());
  var dayn = (dt.getDay() + 6) % 7;
  tdt.setDate(tdt.getDate() - dayn + 3);
  var firstThursday = tdt.valueOf();
  tdt.setMonth(0, 1);
  if (tdt.getDay() !== 4) 
    {
     tdt.setMonth(0, 1 + ((4 - tdt.getDay()) + 7) % 7);
    }

  return 1 + Math.ceil((firstThursday - tdt) / 604800000);
}

function makeDate (date, ctrl) {

  if (ctrl == 1 ) {
    var jaar = date.substr(0, 4);
    var maand = date.substr(4, 2);
    var dag = date.substr(6, 2);
    var resultaat = new Date(maand + "/" + dag + "/" + jaar);
    var resultaat = resultaat.getTime();
  } else { 
    var jaar = date.substr(0, 4);
    var maand = date.substr(5, 2);
    var dag = date.substr(8, 2); 
    var resultaat = new Date(maand + "/" + dag + "/" + jaar);
    var resultaat = resultaat.getTime();
  }
  
  return resultaat;  
}

function maakDiv(volgorde){
  $("#scrollablearea").append("<div id='box" + volgorde + "' class='box'></div>");
}

function maakDivClickable (volgorde) {
  $("#box" + volgorde ).click(function(event) {
      var box = $(event.target).attr('id');
      var position = $(event.target).position();
      var width = $(event.target).width();
                                   
      foo(box,position.left,position.top,width,startdate,einddate);
  });
}

function maakDivDraggable (volgorde){
 
  $( "#box" + volgorde ).draggable({
      multiple: true, 
      grid: [ 23, 23 ], 
      cursor: "grab",
      containment : "#scrollablearea",
      start: function( event, ui ) {}, 
      stop: function ( event, ui ) {
            var box = $(event.target).attr('id');
            var position = $(event.target).position();
            var width = $(event.target).width();

            foo(box,position.left,position.top,width,startdate,einddate);
       }
  });
}

function maakDivHover (volgorde){
  $('#box' + volgorde ).hover(function() { 
      $(this).css('cursor','pointer');
  });
}

function maakDivResizable (volgorde) {
  $( "#box" + volgorde ).resizable({
      handles: "e, w", 
      grid: [ 23, 23 ],
      containment: "#scrollablearea",
      stop: function ( event, ui ) {
             var box = $(event.target).attr('id');
             var position = $(event.target).position();
             var width = $(event.target).width();
             var beschrijving = $("#box" + volgorde ).text();
             
             var dagen = Math.round(( Math.round(width) ) / 23);
             var beschrijving_old = $("#box"+ volgorde ).attr('data-werf');
             var beschrijving_new = CheckandReduceLengthWerfbeschrijving(beschrijving_old, width);
            
            if ( beschrijving !== beschrijving_new ) {            
                $("#box" + volgorde).text(beschrijving_new);
                foo(box,position.left,position.top,width,startdate,einddate);
                return maakDivResizable(volgorde);         
            }

            foo(box,position.left,position.top,width,startdate,einddate);
       } 
  });
}

function maakWerknemersArray() {
  // array van de werknemers namen wordt aangemaakt
  data.forEach(function(obj) {
    if ( obj.werknemerID < 9999 ) { namen.push( obj.name + "#" + obj.werknemerID ); } 
    namen.sort();
  });

  data.forEach(function(obj) {
    if ( obj.werknemerID > 9999 ) { namen.push( obj.name + "#" + obj.werknemerID ); } 
  });

  namen = $.unique(namen);
}

function splitnamentoID(combinatie) {
  myarray = combinatie.split("#");
  return myarray[1];
}
  
function splitnamentoNaam (combinatie) {
  myarray = combinatie.split("#");
  return myarray[0];
}

function deleteTask (taak){ 
  $('*[data-taakID="' + taak + '"]').remove();
}
</script>
<script type="text/javascript">	    var data =  [{"id":1,
"name":"Werknemer 1",
"start":"2022/10/23",
"startdec":"20221023",
"end":"2022/10/24",
"enddec":"20221024",
"werf":"Project woning",
"werknemerID":"3",
"taakID":"2186",
"color":"#88070A",
"textcolor":"black",
"totaaldagen":"2",
"werfID":"20190037",
"werfbeschrijving":"2019-0037 - Uitvoerder : Werknemer 1"
},{"id":2,
"name":"Werknemer 1",
"start":"2023/10/23",
"startdec":"20231023",
"end":"2023/10/24",
"enddec":"20231024",
"werf":"Project woning",
"werknemerID":"3",
"taakID":"2186",
"color":"#88070A",
"textcolor":"black",
"totaaldagen":"2",
"werfID":"20190037",
"werfbeschrijving":"2019-0037 - Uitvoerder : Werknemer 1"
}];
var verlof = ["11/03/2022","14/04/2022","15/04/2022","18/04/2022","27/05/2022","26/05/2022","06/06/2022","11/07/2022","12/07/2022","13/07/2022","14/07/2022","15/07/2022","21/07/2022","18/07/2022","19/07/2022","20/07/2022","25/07/2022","26/07/2022","27/07/2022","28/07/2022","22/07/2022","29/07/2022","01/08/2022","12/08/2022","15/08/2022","31/10/2022","01/11/2022","02/11/2022","11/11/2022","23/12/2022","26/12/2022","27/12/2022","28/12/2022","29/12/2022","30/12/2022","02/01/2023","03/01/2023","04/01/2023","05/01/2023","06/01/2023","10/04/2023","11/04/2023","01/05/2023","18/05/2023","19/05/2023","29/05/2023","10/07/2023","11/07/2023","12/07/2023","13/07/2023","14/07/2023","17/07/2023","18/07/2023","19/07/2023","20/07/2023","21/07/2023","24/07/2023","25/07/2023","26/07/2023","27/07/2023","28/07/2023","31/07/2023","14/08/2023","15/08/2023","30/10/2023","31/10/2023","01/11/2023","13/11/2023","12/01/2023"];
var pverlof = [{"werknemerid":3,"dag":[""]}];</script>
<script>
  
  var namen = [];
  var dagen = [];
  var created_start = [];
  var created_end = [];
  var startdate = [];
  var einddate = [];
 
  var zoom = window.devicePixelRatio; 

  $( function() {
  
    // volgende code wordt uitgevoerd indien er geclicked wordt buiten de scrollbaar gebied
    // dit om het eventueel blinken van een div uit te schakelen
    $(document).click(function(e){
        if ($(e.target).is('#scrollablearea,#scrollablearea *')) {
            return;
        }
        else
        {
            blinkOff();
        }
    });

    // array van de werknemers namen wordt aangemaakt
    maakWerknemersArray();
    
    // start & einddatum van de tabel wordt bepaald
    startdate = bepaalStartDate();
    einddate = bepaalEndDate();
    
    //opmaak van de tabel wordt hier gestart
    tabellOp();
    
    var areahoogte = $('#tabell').height() - 47;
    var areabreedte = $('#tabell').width() - 125;
    
    $('#scrollablearea').css({"height": areahoogte +"px"})
                        .css({"width": areabreedte +"px"})
      
    //voor elke werf wordt er een div aangemaakt en wordt de code om div
    //draggable en resizable te maken  
       
    for (var i = 0; i < data.length; i++) {
       var volgorde = i;
       var volgorde = volgorde +1;
       var hoogte = $('#tabell').height() - 23 ;
       var breedte = $('#tabell').width() - 23 ;

       maakDiv(volgorde);           
       maakDivDraggable(volgorde);
       maakDivResizable(volgorde);
       maakDivClickable(volgorde);   
       maakDivHover(volgorde);  
    }
      
    //positioneer de werven op de planning en geef de nodige eigenschappen mee per werf 
    var rijen = namen.length;
      
    for (var i = 0; i < data.length; i++) {
         //Bepaling van de X-as
         
         var werfstart = makeDate ( data[i].start, 2 )
         var diffTime = werfstart - startdate;
         var diffDays = Math.round( diffTime / (1000 * 3600 * 24));
         var positie = (diffDays * 23) ;
         var volgorde = i;
         var volgorde = volgorde +1;
         var werknemer = data[i].name;
         var voorzienedagen = data[i].totaaldagen * 23;
         var werf_volledig = data[i].werf;
         var werf = CheckandReduceLengthWerfbeschrijving(werf_volledig, voorzienedagen);
         var werfbeschrijving = data[i].werfbeschrijving;
         var kleur = data[i].color;
         var txtkleur =  calculateTextColour(kleur);
         
         var taakID = data[i].taakID;
           
         $('#box' + volgorde ).append(werf)
                              .css({"left": positie +"px"})
                              .css({"width": voorzienedagen +"px"})
                              .css({"font-family": "Arial, Helvetica, sans-serif"})
                              .css({"font-size": "10px"})
                              .css({"font-weight": "bold"})
                              .css({"display": "flex"})
                              .css({"justify-content": "center"})
                              .css({"background": kleur})
                              .css({"color": txtkleur})
                              .css({"height": "22px"})
                              .css({"margin": "0 0"})
                              .css({"position": "absolute"})
                              .css({"opacity": "0.6"})
                              .css({"z-index": volgorde})
                              .css({"border": "1px solid #000"})
                              .css({"border-radius": "15px"})
                              .css({"align-items": "center"})
                              .prop('title', werfbeschrijving )
                              .attr('data-taakID', taakID )
                              .attr('data-number', volgorde )
                              .attr('data-werf', werf_volledig )
                              ;
  
         //Bepaling van de Y-as
         for (var r = 0; r < rijen; r++) { 
           var inhoud = $('#rij' + r ).html();
           if (werknemer == inhoud ) {
                 var top = ( r * 23) ;
                 $('#box' + volgorde ).css({"top": top +"px"});
              }
         }
    }
    
    //Kleurt blokje van vandaag en scrollt in de tabel naar vandaag
    bepaalvandaag("");  
  
    function tabellOp() {
      dagen =  getDateArray(startdate, einddate);
      var row = "<tr><th id='col-1'> Planning </th>";
      var tabellget = document.querySelector("#tabell");
      tabellget.innerHTML = "test";
  
      //Maak regel met de maand namen in de hoofding
      for (var i = 0; i < dagen.length; i++) {
        var groepeer = getDaysInMonth ( dagen[i].getYear() + 1900, dagen[i].getMonth() + 1) - dagen[i].getDate() + 1;
          
        row += "<th colspan='" + groepeer +"'>" + GetMonthName ( dagen[i].getMonth() + 1 ) + " " + ( dagen[i].getYear() + 1900 ) + "</th>";
        
        i = i + groepeer - 1 ;
      }
  
      row += "</tr>";
      
      //Maak regel met de weeknummers in de hoofding 
      row += "<tr><th class='eerste'></th>";
      for (var i = 0; i < dagen.length; i++) {
        var week = ISO8601_week_no(dagen[i]);
        var groepeer = 7 - dagen[i].getDay() + 1 ; 
        
        row += "<th colspan='" + groepeer +"'>" + week + "</th>";
        
        i = i + groepeer - 1 ;
           
      }
  
      //Maak regel met de dagen in de hoofding
      row += "<tr><th class='eerste'></th>";
  
      for (var i = 0; i < dagen.length; i++) {
        var yy = ( dagen[i].getYear()) + 1900;
        var mm = ( "0" + ( dagen[i].getMonth() + 1 ));
        var mm = mm.substr(mm.length - 2);
        var dd = ( "0" + dagen[i].getDate());
        var dd = dd.substr(dd.length - 2 );
        
        row += "<th id='" + yy + mm + dd + "' class='personeel'>" + dagen[i].getDate() + "</th>";
      }
      row += "</tr>";
    
      //Maak de data regels
      for (var i = 0; i < namen.length; i++) {
  
        //Maak de array met het persoonlijk verlof per geselecteerde werknemer   
        for(var k = 0; k < pverlof.length; k++){ 
          if ( pverlof[k].werknemerid == splitnamentoID(namen[i])) {
               var persoonlijkverlof = pverlof[k].dag;   
          }
        }
  
         row += "<tr><th id='rij" + i + "' class='eerste' title='" + splitnamentoID (namen[i]) + "'>" + splitnamentoNaam (namen[i]) + "</th>";
        for (var j = 0; j < dagen.length; j++) {

              var currentDate = new Date();
              var day = currentDate.getDate();
              var month = currentDate.getMonth() + 1;
              var year = currentDate.getFullYear();
              var todaydate=month + "/" + day + "/" + year;

              var day = dagen[j].getDate();
              var month = dagen[j].getMonth() + 1;
              var year = dagen[j].getFullYear();
              var datereeks = month + "/" + day + "/" + year;

              if(verlof.indexOf(convertDate(dagen[j].toString())) !== -1)  
              {  
                 var klas = " class='verlof' ";  
              } 
              else if (persoonlijkverlof.indexOf(convertDate(dagen[j].toString())) !== -1)
              {
                 var klas = " class='pverlof' ";
              }
              else if (datereeks == todaydate)
              {
                var klas = " class='vandaag' ";
              }
              else  
              {  
                 var klas = " class='d" + dagen[j].getDay();
              }  
            
            row += "<td id='" + i +"-"+ j + "' " + klas + "'>" + "</td>";  
        }
        row += "</tr>";
      }
    
      tabellget.innerHTML = row;
      
    }
  }); 
   
  </script>
  
  </body>
  </html>

Aar · 25 apr 2023

Kan je dit op JSfiddle.net delen?
Dat werkt wat makkelijker.

luc99 · 25 apr 2023

Op onderstaande link vind je deze terug op JSFiddle.net

https://jsfiddle.net/luc99/oqd81Lh4/3/

bron · 25 apr 2023

Verander bovenaan jouw <head> in dit.
Misschien lost name="viewport" het op?

HTML:

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Planning</title>

<link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
  integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>
/* VERVANG DEZE REGEL DOOR JOUW STYLE
</style>

</head>

Fiddle is ruim 750 regels

dat is een beetje teveel in tijd gezien

luc99 · 25 apr 2023

De aanpassing van de head heeft niet het gewenster resultaat gegeven.
Op volgende link van JSFiddle.net heb ik alvast een iets beknoptere versie geplaatst zodat het eenvouder wordt om de code te bekijken.

https://jsfiddle.net/luc99/oqd81Lh4/10/

bron · 25 apr 2023

Ik begrijp de vraag nog niet. Als ik de browser op 125% zet (of iets anders) dan lijkt alles er goed uit te zien.

Wat bedoel je met positie tussen div en tabel

luc99 · 25 apr 2023

Het verschil zie je als je verschuift naar 23 oktober 2023

luc99 · 25 apr 2023

Wat ik als eerste niet duidelijk vind is waarom in de tabel de th van de dagen 23 x 23 aangeeft in de inspector terwijl deze volgens de css 20 x 20 ingesteld zijn. Als dit duidelijk wordt voor mij denk ik wel de oplossing te kunnen vinden

bron · 25 apr 2023

Ah, ik zie het, het item op 26-27 oktober 2023. De maker van de planner is uitgegaan van schaal 100% en heeft in de JavaScript function's heel precies de positie (als absolute waarde) uitgerekend.

In een andere schaal, bijvoorbeeld 125% , ontstaat er een opeenstapeling van onnauwkeurigheden omdat de browser na elke berekening van div breedte x 125% zal afronden op hele pixels want een scherm kent alleen hele pixels. Des te verder naar rechts, des te meer afrondingen er zijn geweest. Alleen compleet herschrijven van de planner zou een oplossing zijn, denk ik.

Wat ik als eerste niet duidelijk vind is waarom in de tabel de th van de dagen 23 x 23 aangeeft in de inspector terwijl deze volgens de css 20 x 20 ingesteld zijn. Als dit duidelijk wordt voor mij denk ik wel de oplossing te kunnen vinden

In de JavaScript staat 23 en dat werkt in de schaal 100% goed.

Code:

var positie = (diffDays * 23) ;

luc99 · 25 apr 2023

Ik zie dat als ik de borders van de tabel op 0px zet en bij de tabel eigenschappen van tabel, th en de spacing ook op 0 zet, de breedte van de th's via de inspector effectief 20 px wordt. Als ik dan bij de berekening voor bepaling van de positie vermenigvuldig met 20 lijkt alles wel te lukken. Ik denk hieruit af te leiden dat de breedte van 1px van de border dus niet volledig overeenkomt met 1px, maar bijvoorbeeld 0.9998 door dit te vermenigvuldigen ontstaan deze verschillen.

bron · 25 apr 2023

Ik denk hieruit af te leiden dat de breedte van 1px van de border dus niet volledig overeenkomt met 1px, maar bijvoorbeeld 0.9998

Ik denk ergens in de berekening van JS floating numbers

0.1 * 0.2 = 0.0200.....00004

luc99 · 25 apr 2023

Dit begrijp ik niet, wat bedoel je hiermee ?

bron · 25 apr 2023

JavaScript rekent niet goed met decimalen.
Daarmee bedoel ik dat de planner veel functies heeft waarin afmetingen worden berekend en die worden vanuit de JavaScript als inline style in de html gezet.

luc99 · 26 apr 2023

Oplossing gevonden : box-sizing: border-box is de magische css.

Hiermee gaat de th effectief de opgegeven afmeting krijgen van breedte. Al wat er bij zit zoals margin, padding, border zit inbegrepen in de breedte van de pixels. Als ik de th's daardoor instel op 20 zal ook effectief de breedte 20px zijn en kan er ook vermenigvuldigd worden met 20.

bron · 26 apr 2023

luc99 zei:
Oplossing gevonden : box-sizing: border-box is de magische css.

Hiermee gaat de th effectief de opgegeven afmeting krijgen van breedte. Al wat er bij zit zoals margin, padding, border zit inbegrepen in de breedte van de pixels. Als ik de th's daardoor instel op 20 zal ook effectief de breedte 20px zijn en kan er ook vermenigvuldigd worden met 20.

Yep, box-sizing is idd de oplossing, mooi gevonden!
Zelf kom ik op dit, bovenaan in de <style> sectie.

Code:

td {
  box-sizing: border-box;
}

Nog een nootje: Bij box-sizing hoort de margin niet bij de box

kenikavanbis · 26 apr 2023

Ik voede dit even aan mijn programmeer robot

lijn 5 te bekijken bij mijn enter zou er een spatie moeten komen
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>

om even nog een verschil te laten merken waar je mogelijk snelheid kan halen [afhankelijk van browser]

"> >>>>wijzigen>>>>>> naar " > de spatie maakt dat bij sommige browser enkel loops minder in de code lopen en hierdoor zichtbaar sneller lijkt zeker bij veel tags

bron · 27 apr 2023

In de planner zal snelheid minder belangrijk zijn denk ik. Een verschil in snelheid tussen een spatie of een enter (als die er is) staat niet in verhouding tot de laadtijd van jquery-3.6.0.min.js (89 kB). Als "jquery-3.6.0.slim.min.js" 73 kB wordt gebruikt is de laadtijd ietsje korter maar in deze app niet interessant.

Verschil in positie van div's tov tabel bij nieuwe computer

Gebruiker

Inventaris

Moderator

Gebruiker

Inventaris

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Terugkerende gebruiker

Moderator

Wij waarderen jouw privacy