Discussion :

[Azzedesign]

Bonjour,
J'ai défini plusieurs CSS différents selon la taille de l'écran d'affichage, pour rendre plus lisible la vue sur petits écrans (smartphones et petites tablettes) j'affiche une seule catégorie à la fois (news ou videos) par le biais d'une checkbox et d'un label. La première partie de mon script ui décoche l'autre checkbox quand une nouvelle est cochée fonctionne parfaitement mais la partie qui récupère la taille des différents éléments composant l'élément parant afin d'additionner toutes les tailles pour définir celle du parent ne fonctionne pas.
J'essaye de récupérer la taille en utilisant document.GetElementById("MonId").offsetHeight mais rien ne se produit, pourquoi? (les infos de tailles d'éléments sont dans un fichier CSS).

Le code :

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
function updateGroupe(objSender) {
	var groupe = document.getElementsByName(objSender.name);
	if (objSender.checked) {
		for (i in groupe) {
			if (groupe[i] != objSender) groupe[i].checked = false;
		}
	}
	var hauteur1=document.getElementsById("deroule-news-label").offsetHeight;
	var hauteur2=document.getElementById("block-news").offsetHeight;
	var hauteur3=document.getElementsById("blockh").offsetHeight;
	var hauteur4=document.getElementsById("deroule-videos-label").offsetHeight;
	var hauteur5=document.getElementById("block-video").offsetHeight;
	var obj = document.getElementById("block-info");
	obj.style.height=hauteur1+hauteur2+hauteur3+hauteur4+hauteur5+"px";
}

Si quelqu'un peut me dire où ça pêche... ça me rend vraiment fou...

[Beginner.]

Salut,

Il nous faudrait un exemple de code html que tu utilises pour qu'on puisse tester...

On peut aussi utiliser getBoundingClientRect().height...


PS : J'avais eu aussi quelques soucis de ce genre il y a quelque temps, j'avais d'ailleurs ouvert ces fils :

- top, offsetTop et getBoundingClientRect().top
- offsetTop : propriété fiable ou pas ?

[Azzedesign]

tout simplement la page http://www.azzedesign.com/index.php mais le code ne sera utile que pour des version d'écran inférieur à 781px donc pour voir sur un écran d'ordinateur il faut réduire la fenêtre en largeur.

[Beginner.]

Ah ouais, il est spécial ce code, la façon de faire me parait compliquée *** ... Je pense qu'il y aurait des choses à changer...
Certains te proposeront peut-être une solution plutôt orientée CSS à la place de la solution avec des calculs de dimensions...

- Mais pour l'instant il y a une ligne de plus sur la page : var hauteur0=document.getElementsByClassName("news").offsetHeight;...

Et elle pose problème car document.getElementsByClassName("news") ne renvoi pas un seul élément mais une NodeList (il faut utiliser les crochets...).

- Ensuite ça bloque à la ligne : var hauteur1=document.getElementsById("deroule-news-label").offsetHeight; ce qui est normal car tu as mis un "s" de trop dans getElementsById...

Corrige déjà ça...

------
*** par exemple je n'utiliserais pas de checkbox, on peut s'en passer... Et ça t'éviterait ce code assez lourd :

Code :

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

1
2
3
4
5
6
var groupe = document.getElementsByName(objSender.name);
			  if (objSender.checked) {
			    for (i in groupe) {
			      if (groupe[i] != objSender) groupe[i].checked = false;
			    }
			  }

A noter qu'avec for (i in groupe) tu ne parcours pas seulement les deux checkbox mais aussi toutes les autres propriétés de "groupe" ce qui est inutile, une boucle for classique aurait fait l'affaire...

Mais bon perso j'éviterais les checkboxs...

[Invité]

Bonjour,

1- pour commencer, j'aime bien le design "vintage" (années 60) du site.

2- Par contre... je serai plus "radical" que Beginner.

• Les div avec scrollbar (alors qu'il y a déjà une scrollbar générale), ça c'est NIET !
  ZERO POINTE.
  
• Et en version phone : "Les billets d'info (à dérouler)", "Les vidéos (à dérouler)" à cliquer pour dérouler : IDEM.
  Surtout qu'on se retrouve ENCORE avec des div à scroller !
  L'horreur absolue (surtout sur écran tactile !).

3- C'est avant tout une question d'ergonomie.
Il existe une règle sur le web : "un minimum de clics/actions pour arriver au résultat recherché."

4- Revois la mise en page de toute la partie "block-info" (CSS à modifier)
Par exemple :

• je mettrais "Les billets d'infos" sous forme de bandeau, en slider : slick slider (Single Item)
• Quant aux "Vidéos", en dessous sur toute la largeur. 2 ou 1 par ligne.
  (j'ai vu que tu utilises déjà des display:flex; : ça peut servir...)

Et finis les soucis de "hauteurs en JavaScript"...

[danielhagnoul]

Il y a déjà bien des années que l'on n'est plus à quelques pixels près, nous sommes passés au "responsive design" : https://developer.mozilla.org/fr/doc...uilding_blocks

[Invité]

Je danielhagnoul

[Azzedesign]

Ah ouais, il est spécial ce code, la façon de faire me parait compliquée *** ... Je pense qu'il y aurait des choses à changer...
Certains te proposeront peut-être une solution plutôt orientée CSS à la place de la solution avec des calculs de dimensions...

- Mais pour l'instant il y a une ligne de plus sur la page : var hauteur0=document.getElementsByClassName("news").offsetHeight;...

Et elle pose problème car document.getElementsByClassName("news") ne renvoi pas un seul élément mais une NodeList (il faut utiliser les crochets...).

- Ensuite ça bloque à la ligne : var hauteur1=document.getElementsById("deroule-news-label").offsetHeight; ce qui est normal car tu as mis un "s" de trop dans getElementsById...

Corrige déjà ça...

Merci beaucoup, j'ai fait une erreur en essayant avec le cales car je ne savais pas qu'il fallait que je mette un "indice" de celui qui était utilisé et en essayant de remettre par Id je n'ai pas retiré le S car je l'avais pas vu.

------
*** par exemple je n'utiliserais pas de checkbox, on peut s'en passer... Et ça t'éviterait ce code assez lourd :

Code :

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

1
2
3
4
5
6
var groupe = document.getElementsByName(objSender.name);
			  if (objSender.checked) {
			    for (i in groupe) {
			      if (groupe[i] != objSender) groupe[i].checked = false;
			    }
			  }

A noter qu'avec for (i in groupe) tu ne parcours pas seulement les deux checkbox mais aussi toutes les autres propriétés de "groupe" ce qui est inutile, une boucle for classique aurait fait l'affaire...

Mais bon perso j'éviterais les checkboxs...

Oui, je vais essayer de rendre mon site plus attractif, actuellement je fais ça moi même et ce n'est pas mon métier donc je fais de mon mieux.
J'ai vu quelques solutions proposées dans une optique constructive des critiques, ce que j'accueille favorablement car certains autres on été plus proche du troll (et je ne répond jamais aux trolls), notamment sur un autre forum (car j'ai posté ailleurs aussi), ce que je trouve loin d'être constructif (les avis du genre "mais c'est de la merde" sans rien d'autre).

[Invité]

Bonjour,

Pour ma part, je t'ai proposé des solutions simples, et surtout ergonomiques et moderne.

Une autre solution SIMPLISSIME est de conserver tes 2 colonnes, mais de les laisser "dérouler" naturellement (pas de hauteur fixée).
Et remplace les float ("has been") par un display:table (sur le conteneur parent #block-info) et des display:table-cell sur les 2 colonnes.

Code css :

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
19
20
21
#block-info {
...
    /*height: 500px; A SUPPRIMER ! */
    display: table;
    width: 100%;
}
#block-news {
    /*float: left; A SUPPRIMER ! */
    width: 34%;
    /*height: 100%; A SUPPRIMER ! */
    /*overflow-x: hidden; A SUPPRIMER ! */
    display: table-cell;
    vertical-align: top;
#block-video {
    /*float: right; A SUPPRIMER ! */
    /*width: 64%; A SUPPRIMER ! (prendra la largeur restante) */
    /*height: 100%; A SUPPRIMER ! */
    /*overflow-x: hidden; A SUPPRIMER ! */
    display: table-cell;
    vertical-align: top;
}

N.B. La méthode des scrollbar dans la page date des années 90... et des frameset.

[Azzedesign]

Bonjour,

1- pour commencer, j'aime bien le design "vintage" (années 60) du site.

Merci, c'était pas voulu dans ce but néanmoins...

2- Par contre... je serai plus "radical" que Beginner.

• Les div avec scrollbar (alors qu'il y a déjà une scrollbar générale), ça c'est NIET !
  ZERO POINTE.
  
• Et en version phone : "Les billets d'info (à dérouler)", "Les vidéos (à dérouler)" à cliquer pour dérouler : IDEM.
  Surtout qu'on se retrouve ENCORE avec des div à scroller !
  L'horreur absolue (surtout sur écran tactile !).

3- C'est avant tout une question d'ergonomie.
Il existe une règle sur le web : "un minimum de clics/actions pour arriver au résultat recherché."

4- Revois la mise en page de toute la partie "block-info" (CSS à modifier)

Oui, je tiens à dire que je fais de mon mieux étant donné que je fais le site entièrement moi même et que ce n'est pas du tout mon métier. Je me forme donc à droite à gauche en recherchant parfois avec les moteurs de recherche (rarement des infos à jours donc) et souvent avec des videos Youtube (mais je cible quand même la crème, et, oui, on fait avec ce qu'on a)

Par exemple :

• je mettrais "Les billets d'infos" sous forme de bandeau, en slider : slick slider (Single Item)

Bonne idée, je vais explorer cette piste, ça va prendre du temps du faite des raisons citées plus haut mais c'est une piste interessante.

• Quant aux "Vidéos", en dessous sur toute la largeur. 2 ou 1 par ligne.
  (j'ai vu que tu utilises déjà des display:flex; : ça peut servir...)

Là c'est un peu plus subjectif, j'ai 26 vidéos à ce jour et j'en ai encore quatre ou cinq au moins à intégrer (j'ai eu beaucoup trop de travail, notamment rattraper une bêtise d'un autre à 8000€, j'ai pas eu trop de temps pour mon site), si on affiche tout je craint que le rooter ne soit jamais vu et j'aimerait qu'il le soit au maximum dans la mesure du possible (en omettant donc le problème de compatibilité des flexboxes). si j'ai plus de 30 videos ça risque d'être très compromis, surtout pour celles qui peuvent moins intéresser a plupart.
Dans ce cas peut être plutôt un autre slider pour les videos mais à vois sans trop charger.

Et finis les soucis de "hauteurs en JavaScript"...

Oui, on va tenter de s'en passer...

En tout cas merci de la critique constructive.

[Azzedesign]

Il y a déjà bien des années que l'on n'est plus à quelques pixels près, nous sommes passés au "responsive design" : https://developer.mozilla.org/fr/doc...uilding_blocks

Je vais étudier toutes les pistes mais comme dit ce n'est PAS mon métier, par conséquent certaines pistes peuvent être plus compliquées que d'autres à intégrer. Mon objectif est bien sur de rendre mon site attractif et je vais tenter de faire ça au mieux.

Merci à tous des remarques.

[Invité]

Pour tes vidéos, j'afficherais une colonne avec uniquement tous les titres des vidéos (sous forme de liste, avec lien vers la vidéo).
Ca permet d'accéder plus rapidement à une vidéo qui pourrait nous intéresser, sans devoir se taper toutes les pages (pagination).

[SpaceFrog]

Pour un look un peu plus moderne, change déjà rien que la police de caractère ça fera une grosse différence ...

[Azzedesign]

Bon,
J'ai résolu le problème, merci.
http://www.azzedesign.com/index.php

Suite à vos conseils j'ai essayé de trouver une autre alternative, j'ai utilisé les stick finalement pour les news et pour les vidéos, ce qui donne http://www.azzedesign.com/index2.php.
Par contre j'ai voulu mettre au moins 10 vidéos par page chargées mais visiblement même Youtube a ses limite et le temps de chargement est trop long à mon goût donc je suis revenu à 5 vidéos par pages mais je me demandais si il existe une solution pour charger le suivante 2 par deux quand on arrive 1 vidéo avant la dernière un peu comme sur le pages Facebook par exemple qui charge le contenu suivant quand on approche de ce qui est chargé, ce afin de ne pas devoir tout charger d'un coup.

Si quelqu'un peux m'aider pour trouver la solution.
Merci d'avance à tous.

PS : je ne suis toujours pas professionnel du développement, je fais toujours ça avec les moyens (connaissances) que j'ai réussi à obtenir sur les divers sites principalement, par conséquent je vous serais reconnaissant de votre indulgence et de votre bon sens.