[tuto] Design - menu slide - corps scroll (Suite de l'ancien Forum)

Suite du fil de discussion du sujet [tuto] Design - menu slide - corps scroll
https://www.jeedom.com/forum/viewtopic.php?f=25&t=35100&hilit=scroll&start=220

Salut @winhex,

En passant en V4.0.25, ma barre verticale est décalé et j’ai un gros bloc noir la ou elle etait avant.

Avant :

Après :

Visiblement il y a un redimensionnement auto de la barre verticale et un repositionnement auto sur le bord de l’ecran alors qu’avant c’etait sur le bord du code html.

Malheureusement, je ne connais pas assez bien le code pour avoir le meme resultat qu’avant.

Une idée ?

Waahh le mec !! Tu reprends le sujet d’un autre membre présent sur ce forum (qui selon moi a la capacité de décider s’il souhaite reprendre son topic ici) et en plus tu reposes la même question déjà posé ailleurs et à laquelle tu n’as pas donné suite aux retours:

Parce que bon j’ai pas testé mais avec des styles dans ce genre la position de ta barre ne m’étonne qu’à moitié:

position: fixed;
	top: 0;
	left: 0;

Mon intension n’est pas de m’approprier quelquechose que je ne maitrise pas.
C’est juste pour aider à mon niveau en aidant à basculer sur le nouveau forum, et de centraliser le sujet.

@winhex si mon initiative te chiffone pas de pb je supprime le poste (t’as juste à le dire).

Pour le pb : j’avais essayé ta première idée sans succès sinon la position est déja fixed

Merci quand meme.

De plus, le scroll ne marche plus.

En changeant la valeur de left la barre ne bouge pas ? T’as fait un ctrl+F5 pour vider le cache du navigateur ?

Satané ctrl+F5

Merci

Tu a fait comment les petit bandeau sur tes cadres en CSS?

Salut,

Tu trouveras ton bonheur ici: https://www.jeedom.com/forum/viewtopic.php?t=40889

1 « J'aime »

@Salvialf : Tu as ete plus rapide que moi.

Sinon c’est bien issu de ce lien.

1 « J'aime »

Bonjour à tous,

J’ai un problème d’affichage depuis le passage à la V4 au niveau de mon menu ( cf capture d’écran ).
Le problème je pense ne vient pas du code mais bien du changement de version jeedom car cela fonctionner parfaitement avant le passage en V4 et que ce soit le menu Vertical ou horizontal, le problème persiste…
J’aimerai savoir si vous avez eut à modifier le code html après passage en V4 ?
si oui quelle sont les modifications à apporter ? ( @Salvialf une idée ? )
Merci d’avance, bonne journée et bonnes fêtes…

Salut j’avais par le passé testé le menu slide sur la v3.
je voudrais le mettre en place sur une v4 car ce que j’aime dans ce menu c’est la rapidité pour afficher une page a une autre forcement c’est juste du scroll.
Mais pour le coup une fois mes codes et design créés impossible de faire affiché le design corps, j’ai rentrer les id dans le code il me prend toujours mon premier design avec le premier ID.
Est-ce que l’appel des .src =’/index.php?v=d&p=plan&plan_id=25&fullscreen=1#section2’" a evolué avec la v4?

je pense que @Vins222 a au final le même problème car a mon avis son menu appel son propre design d’où la répétition.

je pense que c’est cette partie du code qui n’est plus adapté pour la v4?

<la><a onClick="planHeader_id=24; displayPlan();"><span class="fa maison-home63 fa-lg"></span></a></la>

<la class="active"><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=25&fullscreen=1#section1'">Résumé</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=25&fullscreen=1#section2'"><span class="fa jeedom-mouvement fa-lg"></span></a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=25&fullscreen=1#section3'">Extérieures</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=25&fullscreen=1#section4'">Luminaires</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=25&fullscreen=1#section5'">Vmc</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=25&fullscreen=1#section6'">Chauffages</a></la>

<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=25&fullscreen=1#section7'">7</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=25&fullscreen=1#section8'">8</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=25&fullscreen=1#section9'">9</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=25&fullscreen=1#section10'">10</a></la>

c’est pas ça, c’est le style « css »
Voir plus haut en v4

repartez sur du simple « squelette » d’iframe

Ok. Bon j’avoue la ça dépasse mes compétences, y aurait-il parmos les devs une âme charitable pour mettre au point ce menu en V4?

Hello, après pas mal de recherche et de test, j’ai réussi à faire fonctionner le principe du Design Menu et Design Coprs de winhex dans mon jeedom V4.
J’ai mixer ça avec un peu de « Ma-maison-intelligente » pour arriver à quelque chose qui me convient en fonctionnement. Mes Design ne sont pas encore terminés.

Je propose de vous partager mes fichiers, par contre, c’est beaucoup de tatonnemen, n’étant pas un codeur dans l’âme.

Le fichier du menu à mettre dans /montheme/menu_light_fix2
menu.css.txt (2,3 Ko)
(supprimer .txt et copier le fichier)

Dans le Design MENU (à créer si pas déjà fait) :
ajouter Texte/HTml pour le menu et copier le contenu du fichier suivant :
menu-design.txt (2,7 Ko)

ajouter Texte/Html pour l’iframe, qui affichera le contenu des Design :
iframe-menu-Design.txt (218 Octets)

Ensuite, créer un Design CORPS, qui comportera une zone Texte/HTML avec le contenu du fichier suivant :
Design-corps.txt (1,3 Ko)

Attention, il faut adapter les paramètres des Design Menu et Corps à votre affichage.
Dans mon cas, pour ce Design exemple, il s’agit d’un écran RPI officiel 7’'.

Là s’arrête ma modeste contribution.

1 « J'aime »

merci beaucoup pour ta ténacité et le partage

je vais pas de laisser à rien faire :grinning:

pour ton info, inspiration.

mettant donné 2,3 mois avant migration v4. avec pour but du full html (sans certitude d’y arrivé mais ça permet de s’ouvrir et toujours apprendre)
j’en connais guère mieux mais maintenant c’est le côté designer très peu abordé que je regarde (outils,…)

donc outils
d’abord le logiciel en ligne « figma »
regarde les vidéos
ex

j’aimerai voir le design de jeedom évolué comme figma. c’est gratuit de rêver. non pas que se soit impossible mais j’imagine même pas la somme d’heures pour y arriver donc je rêve.

ensuite tu as des plug, des videos pour reprendre le html, css

ensuites certains themes actuel
ex Neumorphic

le dernier me plais bien


ensuite un carnet un stylo de se que tu veux.

1 « J'aime »

Effectivement, le Neumorphic, ça donne des idées !!!
Mais j’ai peur d’y passer tout mon temps libre.
Déjà que là, j’ai dépassé mon quota WAF !!

1 « J'aime »

rien ne presse, surtout lorsqu’il fait beau.
laisse la graine germer ou pas.

si ta domotique est fonctionnel c’est pas vitale. mais quand même :grinning:
le waouh

Rien ne presse.
Mon Design est plutôt Flat et ça me va.

Même sans l’effet whaou !
On ne sais jamais pour une prochaine évoluton.

Quelqu’un aurait-il le code pour avoir les cadres avec les bandeaux. Le lien dans les messages ne fonctionne plus.

Merci