[tuto] slide dans un design

[winhex]

si vous voulez essayé

vidéo https://youtu.be/riRlEJxTWuU

un slide equipements droite/gauche sur mobile
sur pc faut clic et ensuite les fleches du clavier

je tourne avec un vieux jeedom (message suivant pour une version jeedom recente)

20190508_213414.jpg (64.46 Kio) Consulté 3198 fois

se qui permet de le faire dans un design

Screenshot_20190508-213722_Chrome.jpg (95.92 Kio) Consulté 3198 fois

d'abord un tableau
1 ligne 6 colonnes
ensuite

parametres optionnels sur la tuile.png (70.87 Kio) Consulté 3191 fois

un style
display:flex;width:360px;height:180px;overflow:auto;

[winhex]

je ne sais pas la personnalisation avancé (sous configuration) existera toujours alors on va procédé differement

je supprime se qui précède (hormis le tableau)
on va dans le design

swap data plan.png (96.05 Kio) Consulté 3190 fois

on recherche le data-plan_id
chaque elements d'un design posséde un data plan
f12 / icône du bas à gauche / on balade la souris sur l'équipement / le data plan id et à la fin d'une balise precedente

data plan.png (116.77 Kio) Consulté 3190 fois

dans un html existant ou crée pour l'occasion
dans une balise style "css"

Code : Tout sélectionner

<style>
 [data-plan_id="707"] { 
   display:flex;width:360px;height:180px;overflow:auto;
         }
         </style>

ou on pourrait le mettre dans un script aussi

Code : Tout sélectionner

var Temperatures = $('[data-plan_id="707"]');     
             $( document ).ready(function() {
Temperatures.css('display','flex').css('height','180px').css('overflow','auto').css('width','360px');          
         }

pour cacher la barre de défilement sous chrome Android en style

::-webkit-scrollbar {
display: none;
}
etant un tableau c'est assez facile d'ajouter une ligne consigne (height:280px)

slide.png (50.6 Kio) Consulté 3157 fois

maintenant si on voulait faire un bouton qui slide
overflow invisible et un scroolto en script
je vous laisse cherché vous avez les bases (de toutes manières je vais le faire pour mes VR mais je n'y suis pas encore)

HS
mon design (la base)
chaque menu vert un design différent
tous les équipements s'affiche et un hide pour chacun hormis se que je veux voir en accès
si je clic sur températures
tous les équipement se cache hide
et show pour ceux que je veux voir
afin d'éviter de tous voir un bref moment lors de l'accès
un html blanc qui disparaît une fois la page construite

lien pour la sonde
viewtopic.php?f=29&t=44352

lien avec les menus
viewtopic.php?f=24&t=45317&p=730401#p730401

[winhex]

dans un design un html "slide" sur un de nos logs

Screenshot_20190525-102606_Chrome.jpg (161.45 Kio) Consulté 3054 fois

Screenshot_20190525-094455_Chrome.jpg (119.35 Kio) Consulté 3070 fois

Code : Tout sélectionner

<div style="width:90%;height:80%;">
<a class="btn btn-warning pull-right" data-state="1" id="in_eventLogStopStart"><i class="fa fa-pause"></i> {{Pause}}</a>
<input class="form-control pull-right" id="in_eventLogSearch" style="width : 300px;" placeholder="{{Rechercher}}" />

      <pre id="pre_globallog" style="display: block;overflow: auto; width:100%;height:100%; font-size:0.9em;line-height: 0.9em;text-align:left !important;" class="pre_eventlog"></pre>

<script>
	jeedom.log.autoupdate({
		log : 'backup',
		display : $('.pre_eventlog'),
		search : $('#in_eventLogSearch'),
		control : $('#in_eventLogStopStart'),
	});
</script>
  </div>

auto actualisé,..

pour en créé un merci befa

tous ceux qui sont dans le dossier log ainssi que scénario fonctionne de la même manière

pour plusieurs dans le même design faudra changé les class / id pour chaque html (ou créé un imput list pointant sur différent log)

hs
le dossier log comporte un petit fichier .htaccess empêchant son accès d'une autre manière (lien, jquery,..)

[winhex]

garder un scrollbar général et enlevé pour 1 overflow
dans un fichier texte/html

Code : Tout sélectionner

<script>
   $('[data-plan_id="927"]').css('overflow','auto');
  
</script>
<style>
[data-plan_id="927"]::-webkit-scrollbar {
   display: none; 
    }
</style>

voir la petite barre en haut à droite (général)
celle sous les sondes n'y est pas