Discussion :

[L'AMI Yves]

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 :

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
  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.

[NoSmoking]

Bonjour,

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

!?!

Code :

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

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

[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.

[Invité]

Bonjour,

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

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.

[NoSmoking]

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 css :

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

1
2
3
4
#conteneur {
  width: 60em;
  overflow: auto;
}

[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.

[Invité]

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

[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.

[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.

[Invité]

Bon.

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

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

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


2- Je viens seulement de lire ton explication :

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 ??
Ça aurait été bien de montrer un code en rapport ! (avec une <table>, quitte à avoir des données bidons).

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

C'est pourtant simple :

Code css :

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

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.

...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.