Ajouter 10 pixels à la largeur d'une div

Version imprimable

Bonsoir tout le monde.

Je cherche toujours à maitriser la largeur de l'affichage effectif d'un site qui ne doit fonctionner que sur mon réseau local. Pour cela, j'espère pouvoir détecter l'apparition d'un ascenseur. J'ai codé cette fonction :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 temoin=document.getElementById("bouge").clientHeight; teste(); function teste() { if (bouge.clientHeight==temoin) { l = bouge.scrollWidth; l=l+10; nl="'" + l + "px'"; document.getElementById("bouge").width= nl; teste(); } else { larg = bouge.offsetWidth; } }
J'ai une div qui a l'id "bouge" initialisée à 500 pixels de haut et de large. Mon programme "teste" est censé l'élargir progressivement par pas de 10 pixels, jusqu'à l'apparition d'un ascenseur horizontal.

Malheureusement, je n'arrive pas à modifier la largeur : la ligne qui devrait le faire ne fait rien, et tout ce que j'ai pu essayer de ce que j'ai trouvé sur le web n'y a rien changé...

Je suis sur firefox sur windows 10 (si ça peut aider).

Merci à qui pourra me débloquer.

AMIcalement.

Bonjour,

Citation:

document.getElementById("bouge").width= nl;

!?!
Code:

1 2 3 const elem = document.getElementById("bouge"); const largeur = 400; // par exemple elem.style.width = largeur +"px";

31/10/2019, 22h34
L'AMI Yves

Merci, NoSmoking !

Je ne sais pas comment je m'y suis pris : il me manquait un "style.", mais je suis sur que, parmi tous les essais que j'ai faits, parfois, il y était : il devait alors manquer autre chose. Et je n'ai sans doute jamais fait l'essai avec tout ce qui va bien en même temps.

Maintenant, je vois bien ma div "bouge" qui grandit, mais aucun ascenseur n'apparait quand elle atteint la taille de son conteneur : qu'est-ce qui manque encore ?

Y a-t-il des instructions CSS qui vont faire que ça marche, et d'autres non ?

AMIcalement.
01/11/2019, 09h50
Invité

Bonjour,

1- au lieu de compter sur la chance et le hasard... et de perdre du temps à bidouiller le code, fais une recherche :aie:

2- Explique clairement quel est le but de la manœuvre.
Pas "détecter la scrollbar", mais l'objectif final.

3- Et si tu veux de l'aide, montre les codes HTML et CSS associés.
01/11/2019, 09h51
NoSmoking
Citation:

Maintenant, je vois bien ma div "bouge" qui grandit, mais aucun ascenseur n'apparait quand elle atteint la taille de son conteneur : qu'est-ce qui manque encore ?

Ton conteneur doit avoir une largeur et un overflow posé pour qu'il n'y ait de débordement
exemple :
Code:

1 2 3 4 #conteneur { width: 60em; overflow: auto; }
02/11/2019, 15h28
L'AMI Yves

@ Nosmoking
Encore merci de donner des réponses constructives. J'arrive maintenant à faire ce que je veux, mais pas encore à en tirer les informations - ou à en tirer parti - pour atteindre mon but.

@ Jreaux62

Je n'ai pas inséré mon code, car il est composé de plusieurs fichiers, il y a du PHP, du HTML, du CSS et du Javascript (je passe sous silence le MySQL, qui n'intervient pas ici). J'ai pensé que la plupart des lecteurs n'y comprendraient rien, et que cela aurait demandé un effort disproportionné aux autres. J'ai préféré parler en bon français, car je en demande pas que l'on programme à ma place, je n'attends pas de réponse du genre "pour faire ça, il faut faire autrement..." : j'explique ce qui ne marche pas et je désire comprendre pourquoi.

Ce que je veux faire paraîtrait très simple : j'ai besoin d'afficher un tableau de 11 colonnes et (environ) 170 caractères, et cela (pour une question de lisibilité bien facile à comprendre) sur tout l'écran, et sans ascenseur.

Les développeurs de navigateurs n'ont en tête que l' "adaptative design", OK. Mais ce problème qui me paraît pourtant bien simple, j'ai l'impression qu'ils s'ingénient à le rendre impossible, j'en ai déjà parlé...

J'avais cru le résoudre, mais je suis tombé ces jours-ci sur un écran configuré pour afficher des plus gros caractères, ou un zoom de 175% ou je ne sais quoi, et je trouve qu'un écran "physique" prévu pour afficher 1080 pixels m'en déclare plus de 4000 : c'est vrai, là, je suis perdu.

AMIcalement.
02/11/2019, 16h08
Invité

Je ne comprends pas comment on peut faire apparaitre la barre de défilement horizontale, alors qu'on ÉLARGIT le <div>. :koi:

Voici le fichier de base du site : index.php, que l'on appelle sans paramètres :

Code:

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
<body>
  <div id="bsurb">
    <div id="dixa">AaBbMm.123</div>
  </div>    
<script>
  haut=bsurb.clientHeight;  
  temoin=bsurb.scrollHeight;
  Dixa=dixa.offsetWidth;
  i=0;
  teste();
  function teste()
  { 
    if (bsurb.scrollHeight==temoin)
    {  
       larg = dixa.innerHTML.length * (Dixa/10);
       dixa.innerHTML += dixa.innerHTML.substring(i,i+1);
       i+=1;
       teste();
    }
    else 
    {
        alert(larg + " " + haut + "  " + Dixa);
        document.location="index.php?larg="+larg+"&haut="+haut+"&dixa="+Dixa;
    }
  }
</script>
  </body>
 </html>

Avec un peu de CSS :

Code:

1
2
3
html body {margin:0; padding:0;}  */
body {font-size:20px; zoom: normal; }
#bsurb {width:100%;height:100%;background-color:pink; overflow:auto; top:0;left:0; position:absolute;}

Bon, comme je l'ai dit dans le précédent message, il y a aussi du code php qui teste la présence du paramètre "larg" dans l'appel de index.php.

03/11/2019, 10h20
L'AMI Yves

As-tu été convaincu par la façon dont je fais apparaître un ascenseur horizontal en agrandissant le contenu d'une <div> (je crois qu'il manquait un "position:absolute;" dans le code que j'ai posté) ?

AMIcalement.
03/11/2019, 10h32
L'AMI Yves

Pour la question d'aujourd'hui, il me semble que j'ai déjà répondu : je me démène comme un beau diable pour obtenir ce qui paraissait évident aux programmeurs "de mon temps" : la largeur de l'écran sur lequel mon travail est en train de s'afficher. Je n'ai rien à battre du "responsive design", je ne veux pas qu'un autre (individu ou programme) décide à ma place si tel ou tel élément va s'afficher ici ou là : c'est moi qui programme, c'est moi qui décide.

En l'occurrence, je répète : je veux afficher un tableau avec tant de colonne, et avec, dans chaque colonne, un nombre de caractères que je décide moi-même, en fonction de critères qui sont les miens, et que tout cela s'affiche dans toute la largeur de l'écran, sans ascenseur horizontal, par ce que j'ai décidé que c'était la meilleure ergonomie à proposer aux utilisateurs de cette application, sachant qu'eux, ils vont avoir à gérer les données présentées, et ça va pas être de la tarte, et ils ne vont pas avoir besoin, en plus, de jouer de la souris pour aller les chercher.

C'est clair ?

AMIcalement.
03/11/2019, 10h45
Invité

Bon.

1- Je me suis permis de supprimer tous ce qui nuisait à la sérénité de cette discussion. :zen:
J'ai aussi changé ma phrase :

Citation:

1- au lieu de compter sur la chance et le hasard... et de perdre du temps à bidouiller le code, fais une recherche :aie:

Elle est plus dans l'esprit que je voulais lui donner.

2- Je viens seulement de lire ton explication :

Citation:

j'ai besoin d'afficher un tableau de 11 colonnes et (environ) 170 caractères, et cela (pour une question de lisibilité bien facile à comprendre) sur tout l'écran, et sans ascenseur

Pourquoi ne pas l'avoir dit tout-de-suite ?? 8O
Ça aurait été bien de montrer un code en rapport ! (avec une <table>, quitte à avoir des données bidons).

Citation:

Envoyé par L'AMI Yves

...je veux afficher un tableau ... et que tout cela s'affiche dans toute la largeur de l'écran

C'est pourtant simple :

Code:

table { width:100%; }

Où est le problème ??

3- Néanmoins, sachant que les colonnes du tableau s'adaptent aux données contenues, il peut arriver que la largeur MINIMUM du tableau soit fixée par l'incompressibilité de ces données.
DONC, ma question : que veux-tu faire/obtenir si le tableau dépasse effectivement ?

N.B.

Citation:

Envoyé par L'AMI Yves

...Je n'ai rien à battre du "responsive design"...c'est moi qui programme, c'est moi qui décide...

Apparemment, tu n'as pas vraiment compris le concept de "responsive design"...
Mais bon. C'est un autre débat... qu'on ne développera pas ici.

Bon.
Je ne sais pas si ça correspond à ton besoin mais voilà ce que j'ai fait : https://codepen.io/jreaux62/pen/MWWrLdd

-> voir ce qui se passe en modifiant la largeur/hauteur de la fenêtre

Code:

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
<html>
  <body>
    <div id="parent">
      <div id="enfant">
 
        <table>
          <thead>
            <tr>
              <th>col 1</th>
              <th>col 2</th>
              <th>col 3</th>
              <th>col 4</th>
              <th>col 5</th>
              <th>col 6</th>
              <th>col 7</th>
              <th>col 8</th>
              <th>col 9</th>
              <th>col 10</th>
              <th>col 11</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                Cuius acerbitati uxor grave accesserat incentivum, germanitate Augusti turgida supra modum.
              </td>
              <td>
                Quam Hannibaliano regi fratris filio antehac Constantinus iunxerat pater, Megaera quaedam mortalis.
              </td>
              <td>
                Inflammatrix saevientis adsidua, humani cruoris avida nihil mitius quam maritus.
              </td>
              <td>
                Qui paulatim eruditiores facti processu temporis ad nocendum per clandestinos versutosque rumigerulos conpertis leviter addere quaedam male suetos falsa et placentia sibi discentes.
              </td>
              <td>
                Adfectati regni vel artium nefandarum calumnias insontibus adfligebant.
              </td>
              <td>
                Dum haec in oriente aguntur, Arelate hiemem agens Constantius post theatralis ludos atque circenses ambitioso editos apparatu diem sextum idus Octobres, qui imperii eius annum tricensimum terminabat.
              </td>
              <td>
                Insolentiae pondera gravius librans, siquid dubium deferebatur aut falsum, pro liquido accipiens et conperto.
              </td>
              <td>
                Inter alia excarnificatum Gerontium Magnentianae comitem partis exulari maerore multavit.
              </td>
              <td>
                Quam ob rem ut ii qui superiores sunt submittere se debent in amicitia, sic quodam modo inferiores extollere.
              </td>
              <td>
                Sunt enim quidam qui molestas amicitias faciunt, cum ipsi se contemni putant; quod non fere contingit nisi iis qui etiam contemnendos se arbitrantur.
              </td>
              <td>
                Qui hac opinione non modo verbis sed etiam opere levandi sunt.
              </td>
            </tr>
          </tbody>
        </table>
 
      </div>    
    </div>    
 
  </body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
html, body {margin:0; padding:0; width:100%; height:100%; min-height:100%; }
body {
  display:table;
  font-size:20px; zoom: normal; 
}
#parent {
  display:table-cell;
  width:100%;
  height:100%;
  overflow:auto; /* IMPORTANT */
}
#enfant {
  position:absolute; 
  top:0; left:0; 
  height:100%; 
  width:auto; min-width:100%; /* IMPORTANT */
}
table { 
  width:100%; 
  border-collapse:collapse; 
  background:lightgrey;
}
table th, table td { padding:5px; border:1px solid black; vertical-align:top; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"use strict";
const parent = document.querySelector('#parent');
const enfant = document.querySelector('#enfant');
// -----------
function check_contain()
{
  let parent_W = parent.offsetWidth;
  let enfant_W = enfant.offsetWidth;
  if( parent_W != enfant_W )
  {
    var msg = ( "Le tableau dépasse en largeur ! \n- largeur fenêtre = " + parent.offsetWidth + " px\n- parent_W = " + parent_W + ' px \n- enfant_W = ' + enfant_W + " px" );
    console.log( msg );
    alert( msg );
  }
}
// -----------
window.onload = function(){
  check_contain();
};
window.onresize = function(){
  check_contain();
};
// -----------

03/11/2019, 16h02
L'AMI Yves

Je peux comprendre que tu sois intéressé à résoudre "à ta sauce" les problèmes posés par d'autres, mais peux-tu comprendre que je ne demande jamais - et je ne désire jamais - copier la solution d'un autre. J'ai exposé ce que je cherchais à faire, un peu comment j'essayais de le faire (après avoir fait des recherches, ne t'en déplaise), et la raison de mon échec a été trouvée.

Il est bien possible - probable ? - que je n'aie pas compris le concept de "responsive design", la belle affaire... As-tu compris ma philosophie du développement informatique ?

De ce que j'ai pu voir, au cours de mes recherches, c'est que les développeurs de navigateurs prétendent résoudre "à leur sauce" les problèmes qui se posent aux développeurs de sites web, et que le résultat est que ça pose encore plus de problèmes à ceux qui essaient de faire des choses précises et propres : au lieu de prendre en compte la taille de l'écran en hauteur et en largeur, concepts simples, il faut comprendre et anticiper ce que va faire le navigateur : à mon sens, c'est plus difficile et ça réserve plus de surprises (et rarement des bonnes !)

Voila ce que je pense, mais tout le monde a le droit de penser autre chose.

AMIcalement.
03/11/2019, 18h21
Invité

Bon, ben...
Manifestement, je n'ai toujours pas compris.
Tant pis.
J'ai cru bien faire...

De rien... (Ah ! Pardon, j'ai cru que tu disais "Merci"... :calim2: )

[EDIT] cela dit...
Je sais que ça ne parait pas "évident" en me lisant... :aie: , mais je ne reste pas "fâché" bien longtemps *.
Je n'ai aucun ressentiment envers toi, crois-le bien.
(d'ailleurs, j'ai retiré l'"Avertissement" que je t'avais donné... sous le coup d'une montée de sang..." ;) )

Donc... Si tu veux qu'on reprenne une discussion plus sereine et constructive..., je suis disponible **.

* J'aboie souvent, mais je mords rarement.
** Par contre, il faudra me ré-expliquer, avec moult détails (et avec le code ad hoc), car je n'ai vraiment pas compris la finalité de ta demande.
03/11/2019, 21h54
Beginner.

Salut,

J'avoue que je n'ai pas non plus compris le problème, il faudrait découper le problème en questions précises tout en expliquant l'objectif...

Citation:

Envoyé par jreaux62

Je ne comprends pas comment on peut faire apparaitre la barre de défilement horizontale, alors qu'on ÉLARGIT le <div>. :koi:

Euh ben moi aussi je ne comprends pas...

Citation:

Envoyé par L'AMI Yves

J'ai une div qui a l'id "bouge" initialisée à 500 pixels de haut et de large. Mon programme "teste" est censé l'élargir progressivement par pas de 10 pixels, jusqu'à l'apparition d'un ascenseur horizontal.

Pourquoi ajouter à chaque fois 10px ? On peut savoir par calcul quand un ascenseur apparait...
04/11/2019, 16h59
grunk

Je comprend pas bien ta croisade contre le responsive design alors que ca n'a aucun impact dans ton cas. A partir du moment ou tu ne passes pas par un framework css comme bootstrap le responsive n'est à aucun moment actif.

Si tu veux que ton tableau de X colonnes utilise tous l'espace utile , tu lui donne une largeur de 100%.
Maintenant si tu réduits l'espace d'affichage suffisament pour qu'il n'y est plus la place de dessiner le tableau , effectivement tu vas avoir une barre de défilement. Mais là y'a pas de solution magique si j'ai 500px utile mais que ce que je dois dessiner en fait 600 soit je cache le surplus (overflow:hidden) soit je l'affiche avec une barre de scroll.

Citation:

De ce que j'ai pu voir, au cours de mes recherches, c'est que les développeurs de navigateurs prétendent résoudre "à leur sauce" les problèmes qui se posent aux développeurs de sites web, et que le résultat est que ça pose encore plus de problèmes à ceux qui essaient de faire des choses précises et propres : au lieu de prendre en compte la taille de l'écran en hauteur et en largeur, concepts simples, il faut comprendre et anticiper ce que va faire le navigateur : à mon sens, c'est plus difficile et ça réserve plus de surprises (et rarement des bonnes !)

La taille de l'écran en hauteur et largeur ça ne veux rien dire. D'une part parce que ton navigateur n'est pas forcément en plein écran , d'autre part parce que la surface utile d'affichage n'est pas celle de ton écran et pour finir tu vas rencontrer des problématique de viewport particulièrement sur mobile qui affiche souvent dans des fenêtre virtuelle plus grande que ce que l'écran est vraiment.
Mais tous le monde à sans doute tord sur la façon de procéder ;)

Pour faire du web depuis la fin des années 90 je peux t'assurer que la "sauce" des développeur de navigateur est bien meilleure maintenant qu'avant... Tellement d'ailleurs que une bonne partie du développement en client lourd s'insipire de ce qui se fait en web pour les UI.
04/11/2019, 17h12
Invité
Bonjour,

Citation:

Envoyé par grunk

...soit je cache le surplus (overflow:hidden) soit je l'affiche avec une barre de scroll...

3ème option :
- de mon coté, je m'étais essayer à l'ajustement du fontsize : https://codepen.io/jreaux62/pen/GRRyedY
  -> réduire la fenêtre pour activer le "onresize" et/ou "actualisez" la page (F5)
J'ai limité la réduction de font-size à 10px, pour que ça reste un minimum "lisible".
Cela dit, en dessous d'une certaine largeur de fenêtre, la <table> atteint sa limite de largeur : les textes contenus dans les <td> n'étant pas incompressibles.

D'où ma question (restée sans réponse) : "Que fait-on dans ce cas-là ?