Discussion :

[ddaweb]

Bonjour,

Je refais le site de notre club qui est responsif via CSS.
Certaines div ont un contenu trop long pour un affichage sur Smartphone, ce qui oblige de scroller de trop ... ce qui n'est pas convivial pour les lecteurs.

Je souhaiterais donc ajouter une fonctionnalité Lire la suite ... dès que le CSS passe en mode Smartphone et pas dans les autres cas.
Pour compliquer l'histoire, il y a plusieurs div qui devraient être indépendantes pour la suite de la lecture sur une même page.

J'ai jquery-3.60 installé sur le site.

Ce que je trouve pas, c'est de faire la liaison avec @media screen du CSS et les div à masquer/afficher.

Comme j'ai le jquery installé, cela peut être en un ou plusieurs éléments (pas du javascript) :
- PHP
- CSS
- jquery

Je ne sais absolument pas si cela est possible
Si quelqu'un a une idée.

[NoSmoking]

Bonjour,

Certaines div ont un contenu trop long pour un affichage sur Smartphone,

est-ce à dire que quoiqu'il arrive cela n'est pas gênant de charger tout le contenu de celles-ci ?

Je souhaiterais donc ajouter une fonctionnalité Lire la suite ... dès que le CSS passe en mode Smartphone et pas dans les autres cas.

Les media queries font cela très bien pour peu que les bornes de bascules soient bien définies. Il suffit de gérer ensuite l'affichage, les dimensions des éléments visés.

Pour compliquer l'histoire, il y a plusieurs div qui devraient être indépendantes pour la suite de la lecture sur une même page.

Je ne comprend pas bien le sens de ta phrase !

Ce que je trouve pas, c'est de faire la liaison avec @media screen du CSS et les div à masquer/afficher.

Qu'est ce que tu ne comprends pas : Media queries !
Exemple simple :

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
body {
  background-color: #FFF;
}
@media (min-width:768px) {
  body {
    background-color: #DEF;
  }
}
@media (min-width:992px) {
  body {
    background-color: #FDE;
  }
}
@media (min-width:1200px) {
  body {
    background-color: #EFD;
  }
}

Je ne sais absolument pas si cela est possible

Oui

Le fait que tu aies JavaScript opérationnel peut t'aider pour un meilleur le dynamisme.

[ddaweb]

est-ce à dire que quoiqu'il arrive cela n'est pas gênant de charger tout le contenu de celles-ci ?

Le temps de chargement des pages complètes est dans le normes d'un confort de surf par GSM : moins de 2 sec. C'est juste la longueur du texte qui oblige de scroller beaucoup (trop d'infos ?, mais c'est le club qui veux )
Le CSS fait le gros du travail de la mise en page, le reste n'est que du texte.

Qu'est ce que tu ne comprends pas : Media queries !

Je n'ai aucun problème avec les Media queries, le site est bien responsive, je ne sais juste pas comment activer les Lire la suite ... quand celle-ci est dans la catégories GSM, c'est à dire : @media(max-width:767px) par ex.

Pour compliquer l'histoire, il y a plusieurs div qui devraient être indépendantes pour la suite de la lecture sur une même page.

Je ne comprend pas bien le sens de ta phrase !

Le site a 4 menus principaux (pages) et chacun d'eux ont des sous-menus sous forme d'ancre (contenu de la page donc) : plusieurs sous-menus peuvent avoir un Lire la suite...

Menu 1 : Le Club -> éléments de la page : Nous proposons - Les cours - Nos horaires - Adresse - Nos données
Menu 2 : Nos écoles -> éléments de la page : Les chiots - Education - Obéissance - Agility - Hooper
Menu 3 : Activités -> éléments de la page : Nos activités - Nos concours - Inscriptions
Menu 4 : Infos -> éléments de la page : Contacts - Plan - Liens / Sponsors - Nederlands

Le Facebook n'est qu'un lien

Voici une image du site de test en local pour le GSM :



J'espère que cela vous aide à mieux comprendre

EDIT :
Pour l'instant j'ai 2 bannières suivant la résolutio : 1 pour les PC et 1 pour GSM et tablette.
Je vais en faire une 3me pour le GSM qui devrait réduire de +/- 30% l'existante qui ne fait que 80ko

[NoSmoking]

Il existe plusieurs façons de mettre en oeuvre un « Lire +/- », un méthode « simple » étant d'utiliser le masquage/affichage via un élément <input type="checkbox"> associé à un élément <label>, seul ce dernier étant visible, ou non dans certains de tes cas.

Si l'<input> n'est pas coché, la zone correspondant est réduite en hauteur en jouant avec sa max-height:5em par exemple en prenant soin de mettre un overflow: hidden de bon aloi.
Lorsque celui-ci est coché, via son <label> associé, la zone correspondant est agrandie. En fait on passe la max-height à none.

Lorsque l'on veut le faire uniquement avec les media queries il suffit, en plus, de masquer le <label> et d'agrandir la zone correspondante en libérant sa max-height, avec max-height:none.

L'adjonction de JavaScript est un plus.

Sans entrer plus dans le détail, j'ai fait un exemple qui reprend dans la même page les deux situations.

Exemple en ligne : Read more - Read less.

[ddaweb]

Bonsoir NoSmoking,

Merci pour votre exemple, c'est exactement la partie dans "Les Articles".

Votre explication écrite ne m'a pas aidée pour faire le code, mais le principe y est très clair
Je vais passer par le code source de votre exemple (le code y est bien commenté, c'est super de votre part) ... je savais le CSS puissant, mais je me rend compte qu'il l'est encore bien plus

Je vous tiens au courant des résultats obtenus, code que je dois encore traduire à ma page.
Malheureusement, ce ne sera pas ce soir, mais j'ai pris le temps d'y jeter un coup d’œil ... et surtout vous remercier pour le temps que vous avez passé pour m'aider et créer cette page

NB : j'évite le javascript tant que je peu (il peut être désactivé), malgré ses bienfaits pour rendre un site plus convivial et interactif

@ très bientôt

[NoSmoking]

Votre explication écrite ne m'a pas aidée pour faire le code, mais le principe y est très clair

Je dois admettre que ce n'est qu'un exemple et que cela ne décrit pas clairement la façon de faire, je vais surement me pencher sur la rédaction d'une page plus claire, sachant quand même qu'il doit y en exister des Mo sur la toille .

Je vais passer par le code source de votre exemple (le code y est bien commenté, c'est super de votre part) ... je savais le CSS puissant, mais je me rend compte qu'il l'est encore bien plus

Merci bien, c'est un peu le rôle des exemples que je mets sur le forum.

NB : j'évite le javascript tant que je peu (il peut être désactivé), malgré ses bienfaits pour rendre un site plus convivial et interactif

Concernant les smartphones, je doute que le JavaScript soit désactivé, il n'y aurait dans ce cas que peu de sites « visitables ».
On peut avoir également la démarche inverse en masquant le surplus si JavaScript est activé en ajoutant une classe par exemple, mais ceci est un autre débat.