[Résolu] Afficher une popup lors du survol d'une bordure

Bonjour,

Les sections de mes futurs documents seront structurées comme suit :

<div>
<hn>Titre</hn>, avec n =2, 3 ou 4
<section>Lorem ipsum...</section>
</div>

Afin de faciliter la compréhension de l'organisation des documents, la div est bordée à gauche par une bordure.

Comme certaines sections peuvent être relativement conséquentes, et dépasser donc la hauteur de l'écran, j'aimerais pouvoir afficher en popup le titre de la section lors du survol de la bordure.

Est-il possible en JavaScript de gérer le survol d'une bordure ?
Si non, comment faire pour obtenir autrement le résultat escompté ?

Merci d'avance pour votre aide
Modifié par Beka (23 Sep 2018 - 18:16)

Salut,,

Non, faire un hover sur une bordure j'ai jamais vu. Si y'a une bordure y'a forcément un éléments visible à coté (celui justement qui est bordé). fait ton hover sur lui.

Merci Jencal de ta réponse.

Je comprends qu'en tant que propriété border-left la bordure n'est pas accessible à la souris.

Est-il alors possible de définir en tant que pseudo-élément :before de la div enveloppante un rectangle dont la largeur est celle de la bordure et dont la hauteur (inconnue a priori) est égale à celle de la div ?

Normalement, ce rectangle devrait pouvoir être accessible à la souris, en survol ou en clic.
Modifié par Beka (24 Sep 2018 - 10:39)

Question corollaire : est-ce que JavaScript permet de connaître la hauteur affichée d'un élément ?

Puis-je poser une question stupide:
quel est l'objectif de cette opération?
Très souvent, on a l'idée d'une "chose à faire" comme solution à un problème.
Si on avait une idée du problème, on pourrait peut être proposer une solution moins "bizarre" que faire quelque chose lors d'un survol de bordure.
Par ailleurs, qui dit "survol" dit "souris" ou "touchpad". En ce moment, on a de plus en plus d'utilisateurs depuis des appareils mobiles qui ne disposent pas de ces matériels.
Je suis plutôt en train d'aller à la chasse aux survols dans mes sites actuels pur trouver des solutions qui marchent sur appareils mobiles.

Beka a écrit :


Est-il alors possible de définir en tant que pseudo-élément :before de la div enveloppante un rectangle dont la largeur est celle de la bordure et dont la hauteur (inconnue a priori) est égale à celle de la div ?

Normalement, ce rectangle devrait pouvoir être accessible à la souris, en survol ou en clic.

Absolument avec .height() sur ton élément

et en javascript pure :
var offsetHeight = document.getElementById('myDiv').offsetHeight;
Modifié par JENCAL (24 Sep 2018 - 11:01)

Excellente question, PapyJP.

L'objectif est de pouvoir facilement voir à quel titre correspond une section (sensiblement) plus longue que la hauteur de l'écran sans devoir remonter en haut de la section pour voir le titre.

Les documents seront des cours détaillés de maths, avec moult exemples et compléments.
Une fois qu'elle est entièrement développée, une section peut être relativement longue.

Maintenant, pour contourner le problème de l'absence de souris lors de l'utilisation d'un appareil mobile, un rappel en affichage vertical — typiquement un élément fixed — du titre de la section affichée à l'écran ferait tout à fait l'affaire.

JENCAL a écrit :

Absolument avec .height() sur ton élément

et en javascript pure :
var offsetHeight = document.getElementById('myDiv').offsetHeight;

Merci Jencal,

Dans ce cas, la solution la plus simple est de placer un onclick sur ce rectangle. Et c'est moins visuellement invasif que la solution du rappel du titre en affichage vertical à laquelle je pensais dans mon message précédent.
Modifié par Beka (24 Sep 2018 - 11:19)

Beka a écrit :
Excellente question, PapyJP.
L'objectif est de pouvoir facilement voir à quel titre correspond une section (sensiblement) plus longue que la hauteur de l'écran sans devoir remonter en haut de la section pour voir le titre.

OK! je comprends le problème et la raison de la demande.
La solution d'un ::before avec :hover devrait marcher, mais pour un appareil mobile, je ne crois pas qu'on puisse faire un addEventListener sur un ::before.
Je verrais donc quelque chose comme
1) la section en position:relative et un padding à gauche important
2) une div en position:absolute, transparente, qui se superpose au padding, avec un eventListener sur click et touch qui affiche le titre de la section.
En tout cas je suis intéressé par la solution que tu ne vas pas manquer de trouver

PapyJP a écrit :

En tout cas je suis intéressé par la solution que tu ne vas pas manquer de trouver.

J'y travaillerai plus tard, probablement demain, et la communiquerai lorsque je l'aurai testée. Pour l'instant, je travaille sur une gestion assez sophistiquée des boutons développer et réduire.

La solution d'ensemble paraît finalement relativement simple.

Il suffit d'ajouter une div utilisée en tant que bordure gauche (position, largeur, couleur de fond...) dans la div enveloppante et dimensionner sa hauteur égale à la hauteur de la div enveloppante :

<div>
<div class = "bordure"></div>
<hn>Titre</hn>, avec n =2, 3 ou 4
<section>Lorem ipsum...</section>
</div>

Cette div contient comme attribut onclick = [routine d'affichage du titre]
(ou onmouseover = [routine d'affichage du titre] si l'appareil est un ordi muni d'une souris ou d'un touchpad).

Merci Jencal et PapyJP
Modifié par Beka (24 Sep 2018 - 15:45)

Super, met en résolut si c'est good !