Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

[tuto] Design - menu slide - corps scroll

Cette partie est réservée à l'utilisation de l'interface web pour smartphone et tablettes
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 28 oct. 2019, 23:15

pour guide mais vraiment simple chez moi
https://youtu.be/0gY89zW_pnM
je scroll via la souris (la molette) toujours vers le bas
et tu as un retour en haut

regarde la barre de lien (l'id du design suivi de slide1,2,3)
et la barre de scroll

GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 29 oct. 2019, 08:58

ah tu es trop fort !!! effectivement ça fonctionne parfaitement! reste à adapter pour le faire coller à la dernière version du menu mais ça ne doit pas etre trop compliqué (du moins je devrais m'en sortir avce mes petites competences).
par contre, pas certain que ça fonctionne avec le tactile, du moins pas sur un PC... je vais creuser.

Merci encore !

GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 29 oct. 2019, 09:01

Je valide !!! ça fonctionne même sur iphone ! cool

GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 30 oct. 2019, 11:55

Bon bah autant le scroll avec des anchor data c'est simple à maitriser autant le slide.... j 'ai beau chercher, je ne trouve pas. ça ne fonctionne pas! Grrrr.

Je crois que je vais rester sur ta dernière version de design en attendant car c'est quand même déja très très bien et prendre le temps de me consacrer sur le fond et un peu moins sur la forme.

a plus
Guillaume

Almy
Timide
Messages : 453
Inscription : 23 juin 2015, 23:43

Re: [tuto] Design - menu slide - corps scroll

Message par Almy » 30 oct. 2019, 16:31

Bonjour,

Je vous propose de basculer sur le nouveau forum.
J'ai ouvert une page dédiée et fait les liens bidirectionnels.

https://community.jeedom.com/t/tuto-des ... forum/5922
Débutant Bordelais motivé sans compétences en info et élec mais prêt a relever le défi de la domotique.

MERCI À VOUS TOUS (JEEDOM et forum) pour votre aide sans laquelle je ne serais pas là où j'en suis.

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 30 oct. 2019, 18:27

ça ne me dérange pas, tu peux faire se que tu veux.
avec se sujet ou d'autres si tu t'engages à les suivre,

ça fait longtemps qu'avec @GGR72700 on est HS ici
avec des expérimentations

je fait durée le plaisir au max ici (ça gagne du temps soit 1 ans et 2 mois avant la disparition complete du sujet ici)

@GGR72700 j'en était arrivé au même résultat mais on apprend a notre rythme

j'ai rien fait depuis se week end ma dernière trouvaille pour mettre plusieurs div latéral /horizontal

Code : Tout sélectionner

<!-- Learn about this code on MDN: https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_%C3%A9l%C3%A9ments_sur_les_lignes_d_une_grille_CSS -->

<div class="wrapper">
  <div class="box1">Un</div>
  <div class="box2">Deux</div>
  <div class="box3">Trois</div>
  <div class="box4">Quatre</div>
</div>
<style>
  * {box-sizing: border-box;}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
.box1 {
  grid-column: 1 ;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 2 ;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 3 ;
  grid-row: 1 ;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3 ;
}

</style>
avec pour idée tester dans le futur avec se genre de mise en place

sinon faire un scroll possible impossible ça je sais faire mais pas avec un height fixe

Code : Tout sélectionner

      $("#section2").click(function() {
    alert("go section1"); 
$( 'body' ).css('overflow','hidden');
});  
          $("#section3").click(function() {

$( 'body' ).css('overflow-y','scroll');
});

GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 30 oct. 2019, 21:58

Salut,
Je ne suis pas vraiment d'accord sur le coup du hors sujet, ça reste une évolution du design, qui part dans toous les sens certe, mais une évolution quand même et c'est en echangeant et bidouillant qu'on améliore tout ça. je suis persuadé que d'ici 6mois on aura un truc à peu près figé :lol:

pas mal ton bout de code pour faire les box ! ça peut grave servir à la mise en page du design ! et tout ça en 1 seul HTML ! j'aime bien l'idée.

Pour le coup du scroll, je vais vraiment laissé tomber pour le moment, c'est trop galère à mettre en place.... mais peut etre que je rechangerai encore d'avis avec le temps.

Le design actuel est vraiment pas mal, il y a juste certainement quelques améliorations à apporter au menu flottant pour que ce soit plus pratique à l'utilisation:
  • l'activer avec un swipe plutot qu'en cliquant sur la zone section (ce serai plus intuitif et surtout ça éviterai de le voir apparaitre/disparaitre quand on navigue avec l'icone qui se trouve dans la section
  • le faire disparaitre en fondu si possible une fois qu'on a cliqué sur une icone
.
après il y a tellement de chose possible que je n'arrive pas à me stabiliser... on est un peu tous comme ça ici je pense.

@ plus

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 31 oct. 2019, 20:51

ma reflection
ça sert de prendre du recul

en faite le clic section pourrait être un bouton
mais non = remonté jusqu a la barre clic apparaître le menu (actuel mais provisoire)
un bouton fixe bas aussi mais encore une manip

un swipe droite gauche = j'ai commencé à testé mais il existe plein de possibilité fonctionnel,
un bandeau vertical invisible, full page swipe,..
je garderai la plus simple sans dependance (par contre pour toi si tu veux dans le futur changé de section au swipe ça peut être problématique)

il en existe une autre de possibilité :
le scroll bas fait disparaître le menu (auto hiding)

le scroll haut fait apparaître le menu (peu importe ou l'on se trouve dans la verticalité ) avec en plus dans la liste une flèche haut retour en haut scroll mouth

je reste sur le swipe

edit voila un html à copier ou tu veux en attendant de l'intégrer dans le menu
la distance est de 250px afin de ne pas venir embrouiller avec les scroll horizontal (menu,...)

Code : Tout sélectionner

<script>
  /*===============================*/
/*=== Swipe avec Touch Events ===*/
/*===============================*/
// Si l'écran est plus petit que "x" pixels (optionnel) // 1024px ici
if(screen.width <= 1024) {
	var startX = 0; // Position de départ
	var distance = 250; // 300 px de swipe pour afficher le menu

	// Au premier point de contact
	window.addEventListener("touchstart", function(evt) {
		// Récupère les "touches" effectuées
		var touches = evt.changedTouches[0];
		startX = touches.pageX;
		between = 0;
	}, false);

	// Quand les points de contact sont en mouvement
	window.addEventListener("touchmove", function(evt) {
		// Limite les effets de bord avec le tactile...
		evt.preventDefault();
		evt.stopPropagation();
	}, false);

	// Quand le contact s'arrête
	window.addEventListener("touchend", function(evt) {
		var touches = evt.changedTouches[0];
		var between = touches.pageX - startX;

		// Détection de la direction
		if(between > 0) {
			var orientation = "droite";
   //       alert("droite");
		} else {
			var orientation = "gauche";
     //     alert("gauche");
		}

		// effet pour le menu slide
		if(Math.abs(between) >= distance && orientation == "droite") {
          $( ".menu-flottant" ).fadeOut( "slow" );
		}
		if(Math.abs(between) >= distance && orientation == "gauche") {
          $( ".menu-flottant" ).fadeIn( "slow" );
		}
	}, false);
}
</script>

GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 31 oct. 2019, 23:22

Salut

Oui effectivement, le swipe c est ce qu il y a de plus intuitif mais par contre le faire sur la hauteur je ne sais pas trop... car on utilise le scroll dans ce design et c est bien sympa justement. Je crains de des fois faire le swipe au mauvais endroit en voulant scroller et ça ferai apparaître la barre (si j ai bien compris ton idée bien sur).

Pour moi le top serai:
Un petit swipe partant du bord droit vers le milieu et la barre apparaît en suivant le doigt (donc il faut que la distance du swipe soit faible pour activer l apparition. Idéalement que si on lache le doigt avant de l avoir sorti au Max elle se recache (on peut rêver).
Et un swipe gauche vers droite pour la re glisser hors champ.
Mais aussi qu elle disparaisse d elle même en fondu après 5 secondes si on ne clique pas ou immédiatement après un clique.

Je demande la lune, je sais. Je serai incapable de faire un truc pareil avec mon niveau actuel mais ça viendra, question te temps !

Question, tu l utilises un peu le design actuel ? Car c est en l utilisant qu on de rends compte de ce qui est bien ou a améliorer.

Ca fait deux trois jours que je fais mumuse sur la tablette et c est franchement pas mal. Même le swipe pour changer de section ne me semble plus aussi indispensable. Et encore une fois, quand on compare à ce qui se fait d autre, c est quand même hyper mega super cool ! Même ma femme commence à jouer avec
A plus


Envoyé de mon iPhone en utilisant Tapatalk

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 31 oct. 2019, 23:41

regarde mon message il y a un edit

oui je l'utilise
pour moi mon tableau de bord doit regroupé le max d'info pertinentes et aussi futile afin qu'une anomalie de comportement ou autre se jette à mon attention
et normalement les autres section des actions ou des infos plus détaillé.
vacances scolaires chez moi depuis 1 semaine : enfant parfois présent ou pas
j'y vais tous les jours (tv,chauffage,heure de levée ..) que je surveilles. (ex: petit nut oublié dans le cartable m'a évité de chauffer). et comme j'ai pas bien le temps au taf faut que l'info soit rapide

GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 01 nov. 2019, 07:58

Merci pour le code du slide ! Je vais tester ça ce soir !
Et du coup je pourrais même tester vite fait un swipe de section avec ce bout de code en faisant un scroll to view! A voir, je teste et je te dis.

C est clair qu il faut pouvoir voir en un coup d l’œil si tout est normal ou pas. Dans la même série, je me suis rendu compte depuis que j ai commencé à faire le fond de mon design que la pompe de la piscine consommait plus que la normale: et bien merci la domotique car elle m à permis d intervenir avant que la pompe se bloque totalement à cause d un roulement HS. Du coup je me tâte même à en mettre une avec vitesse variable histoire de pousser le truc un peu plus loin mais là pour le coup je suis hors sujet :)
A plus

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 01 nov. 2019, 10:17

rendre à césar
une adaptation de se tuto en francais
https://blog.internet-formation.fr/2019 ... ipt-natif/

se qui donne dans un html

Code : Tout sélectionner


<head>
  <!--
https://blog.internet-formation.fr/2019/01/creer-un-menu-lateral-swipe-menu-avec-touch-events-et-click-en-css-3-et-javascript-natif/
https://css-tricks.com/simple-swipe-with-vanilla-javascript/
-->
	<meta charset="utf-8"/>
	<title>Effet menu Slide en CSS 3 et Javascript Vanilla</title>
	<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
	<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:900|Exo:300,400,700" rel="stylesheet"/>
<style>
  * {margin:0; padding:0; font-size:1em; box-sizing:border-box;}

body {font-family:'Exo', sans-serif; font-weight:300;}

/* Header */
#header {background:url('images/banner.png') no-repeat; background-size:cover; width:100%; padding-top:8em; line-height:16em; text-align:center; position:relative;}

/* Contents */
	/* Main-Block */
	#main-block {padding:4em 8em;}
	#main-block #main-title {margin-bottom:2em;}
	#main-block #main-title h1 {font-size:1.8em; text-align:center; color:#121212; text-transform:uppercase; margin-bottom:.2em; font-family:'Alegreya Sans SC', sans-serif;}
	#main-block #main-title h2 {font-size:1.2em; text-align:center; color:#636363;}
	#main-block #main-title h2::after {content:""; display:block; height:2px; width:10%; margin:1em auto 0; background:#f1c40f;}
	#main-block p,
	#main-block ul,
	#main-block ol {margin-bottom:1em; color:#444;}


/*================================*/
/*=== Partie sur le Swipe Menu ===*/
/*================================*/
/* Menu burger */
#menu-burger {position:absolute; top:2.5em; right:3.5em; display:inline-block; cursor:pointer;}
#menu-burger .bar1,
#menu-burger .bar2,
#menu-burger .bar3 {width:32px; height:5px; background-color:#F1F1F1; margin:6px 0; transition:0.4s;}
#menu-burger:hover {opacity:.75; transition:.5s;}
#menu-burger.clicked .bar1 {-webkit-transform:rotate(-45deg) translate(-9px, 6px); transform:rotate(-45deg) translate(-9px, 6px);}
#menu-burger.clicked .bar2 {opacity: 0;}
#menu-burger.clicked .bar3 {-webkit-transform:rotate(45deg) translate(-8px, -8px); transform:rotate(45deg) translate(-8px, -8px);}

/* Main menu (slide) */
#menu {position:fixed; z-index:9999; left:-25%; top:auto; background:#e74c3c; padding:4em 2em; width:25%; min-height:100%; box-shadow:1px 0 1px #9A2519;}
#menu ul li {list-style:none;}
#menu ul li a {display:block; color:#fff; text-decoration:none; font-weight:700; background:#2c3e50; transition:background .5s; padding:1em; text-align:center; margin-bottom:.5em; box-shadow:1px 1px 0 #666}
#menu ul li a:hover {background:#f1c40f; transition:background .5s;}
#menu.visible {animation:.5s slideRight ease-in forwards; transition-delay:0;}
#menu.invisible {animation:.1s slideLeft ease-out forwards; transition-delay:0;}

/*  #menu.invisible {animation:5s slideLeft ease-out forwards; transition-delay:0;}
*/
/* Animations pour le menu slide */
@keyframes slideRight {
	from {left:-25%;}
	to {left:0%;}
}
@-webkit-keyframes slideRight {
	from {left:-25%;}
	to {left:0%;}
}
@keyframes slideLeft {
	from {left:0%;}
	to {left:-25%;}
}
@-webkit-keyframes slideLeft {
	from {left:0%;}
	to {left:-25%;}
}

/* Responsive design */
@media (max-width:1024px) {
	#menu {left:-50%; width:50%;}
	#menu-burger.clicked {position:fixed;}
	#main-block,
	#second-block {padding:4em 2em;}

	/* Animations pour le menu slide */
	@keyframes slideRight {
		from {left:-50%;}
		to {left:0%;}
	}
	@-webkit-keyframes slideRight {
		from {left:-50%;}
		to {left:0%;}
	}
	@keyframes slideLeft {
		from {left:0%;}
		to {left:-50%;}
	}
	@-webkit-keyframes slideLeft {
		from {left:0%;}
		to {left:-50%;}
	}
}
@media (max-width:600px) {
	#menu-burger {top:1em; right:2em; z-index:9999;}
	#menu {left:-100%; width:100%;}
	#second-block #google-maps {width:100%; margin-right:0;}
	#second-block #contact-form {width:100%; margin-top:2em;}

	/* Animations pour le menu slide */
	@keyframes slideRight {
		from {left:-100%;}
		to {left:0%;}
	}
	@-webkit-keyframes slideRight {
		from {left:-100%;}
		to {left:0%;}
	}
	@keyframes slideLeft {
		from {left:0%;}
		to {left:-100%;}
	}
	@-webkit-keyframes slideLeft {
		from {left:0%;}
		to {left:-100%;}
	}
}
  </style>
  
  <script>
  // Récupération des blocs
var mainMenu = document.querySelector("#menu");
var burgerMenu = document.querySelector("#menu-burger");

/*===============================*/
/*=== Clic sur le menu burger ===*/
/*===============================*/
// Vérifie si l'événement touchstart existe et est le premier déclenché
var clickedEvent = "click"; // Au clic si "touchstart" n'est pas détecté
window.addEventListener('touchstart', function detectTouch() {
	clickedEvent = "touchstart"; // Transforme l'événement en "touchstart"
	window.removeEventListener('touchstart', detectTouch, false);
}, false);

// Créé un "toggle class" en Javascrit natif (compatible partout)
burgerMenu.addEventListener(clickedEvent, function(evt) {
	console.log(clickedEvent);
	// Modification du menu burger
	if(!this.getAttribute("class")) {
		this.setAttribute("class", "clicked");
	} else {
		this.removeAttribute("class");
	}
	// Variante avec x.classList (ou DOMTokenList), pas 100% compatible avant IE 11...
	// burgerMenu.classList.toggle("clicked");

	// Créé l'effet pour le menu slide (compatible partout)
	if(mainMenu.getAttribute("class") != "visible") {
//      mainMenu.addClass('visible');
		mainMenu.setAttribute("class", "visible");
	} else {
		mainMenu.setAttribute("class", "invisible");
	}
}, false);

/*===============================*/
/*=== Swipe avec Touch Events ===*/
/*===============================*/
// Si l'écran est plus petit que "x" pixels (optionnel) // 1024px ici
if(screen.width <= 1024) {
	var startX = 0; // Position de départ
	var distance = 100; // 100 px de swipe pour afficher le menu

	// Au premier point de contact
	window.addEventListener("touchstart", function(evt) {
		// Récupère les "touches" effectuées
		var touches = evt.changedTouches[0];
		startX = touches.pageX;
		between = 0;
	}, false);

	// Quand les points de contact sont en mouvement
	window.addEventListener("touchmove", function(evt) {
		// Limite les effets de bord avec le tactile...
		evt.preventDefault();
		evt.stopPropagation();
	}, false);

	// Quand le contact s'arrête
	window.addEventListener("touchend", function(evt) {
		var touches = evt.changedTouches[0];
		var between = touches.pageX - startX;

		// Détection de la direction
		if(between > 0) {
			var orientation = "ltr";
		} else {
			var orientation = "rtl";
		}

		// Modification du menu burger
		if(Math.abs(between) >= distance && orientation == "ltr" && mainMenu.getAttribute("class") != "visible") {
				burgerMenu.setAttribute("class", "clicked");
		}
		if(Math.abs(between) >= distance && orientation == "rtl" && mainMenu.getAttribute("class") != "invisible") {
				burgerMenu.removeAttribute("class");
		}

		// Créé l'effet pour le menu slide (compatible partout)
		if(Math.abs(between) >= distance && orientation == "ltr" && mainMenu.getAttribute("class") != "visible") {
			mainMenu.setAttribute("class", "visible");
        //  mainMenu.addClass("visible");
		}
		if(Math.abs(between) >= distance && orientation == "rtl" && mainMenu.getAttribute("class") != "invisible") {
			mainMenu.setAttribute("class", "invisible");
		}
	}, false);
}
  </script>
</head>
<body>
<nav id="menu">
	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li><a href="#">Item 4</a></li>
		<li><a href="#">Item 5</a></li>
	</ul>
</nav>

<div id="container">
	<header id="header">

		<div id="menu-burger">
			<div class="bar1"></div>
			<div class="bar2"></div>
			<div class="bar3"></div>
		</div>
	</header>

	<main id="main-block">
		<header id="main-title">
			<h1>Material UX Design</h1>
			<h2>And just design...</h2>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nunc diam, egestas id pulvinar ac, vestibulum faucibus mi. Nam sit amet erat consectetur, condimentum ligula ac, blandit lectus. Praesent vitae tellus mollis, porttitor felis ac, condimentum tellus. Donec vulputate accumsan laoreet. Proin eget suscipit nisl. Curabitur nec mattis odio. Suspendisse potenti.</p>
		<p>Cras volutpat et sem a feugiat. Vestibulum feugiat nunc id nibh rutrum vestibulum at eu lorem. Vivamus consequat imperdiet nibh, a tincidunt urna. Sed porta erat et ullamcorper facilisis. Curabitur rutrum quis neque et tempor. Proin lobortis nulla vitae erat tempor, non tempor nisi dapibus.</p>
	</main>
</div>
</body>

pour le clic sur un élément qui fait disparaître
.

Code : Tout sélectionner

/*======================*/
/*=== Cacher au clic ===*/
/*======================*/
    $(".menu-flottant ul li a").click(function() {
          $( ".menu-flottant" ).fadeOut( "slow" );
});   

GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 01 nov. 2019, 10:32

Arghhh ! Je l avais vu celui la quand je cherchais pour le swipe entre section mais à ce moment je ne regardais pas pour cacher le menu flottant. J aurai du y penser!


Envoyé de mon iPhone en utilisant Tapatalk

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 01 nov. 2019, 13:15

celui la aussi peut etre ?
https://onextrapixel.com/creating-a-swi ... r-the-web/

Code : Tout sélectionner

<!--
https://onextrapixel.com/creating-a-swipeable-side-menu-for-the-web/
-->
<div class="container">
    <div id="sidebar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
                <li><a href="#">Sign Out</a></li>
        </ul>
    </div>
    <div class="main-content">
        <div class="swipe-area"></div>
        <a href="#" data-toggle=".container" id="sidebar-toggle">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="content">
            <h1>Creating Swipeable Side Menu For the Web</h1>
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>
  <style>
    body, html {
    height: 100%;
    margin: 0;
    overflow:hidden;
    font-family: helvetica;
    font-weight: 100;
}
.container {
    position: relative;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition:  left 0.4s ease-in-out;
    -moz-transition:  left 0.4s ease-in-out;
    -ms-transition:  left 0.4s ease-in-out;
    -o-transition:  left 0.4s ease-in-out;
    transition:  left 0.4s ease-in-out;
}
.container.open-sidebar {
    left: 240px;
}
 
.swipe-area {
    position: absolute;
    width: 50px;
    left: 0;
top: 0;
    height: 100%;
    background: #f3f3f3;
    z-index: 0;
}
#sidebar {
    background: #DF314D;
    position: absolute;
    width: 240px;
    height: 100%;
    left: -240px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
}
.main-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}
.main-content .content{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
padding-left: 60px;
width: 100%;
}
.main-content .content h1{
    font-weight: 100;
}
.main-content .content p{
    width: 100%;
    line-height: 160%;
}
.main-content #sidebar-toggle {
    background: #DF314D;
    border-radius: 3px;
    display: block;
    position: relative;
    padding: 10px 7px;
    float: left;
}
.main-content #sidebar-toggle .bar{
     display: block;
    width: 18px;
    margin-bottom: 3px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;   
}
.main-content #sidebar-toggle .bar:last-child{
     margin-bottom: 0;   
}
  </style>
  <script>
    (function(e){var o="left",n="right",d="up",v="down",c="in",w="out",l="none",r="auto",k="swipe",s="pinch",x="tap",i="doubletap",b="longtap",A="horizontal",t="vertical",h="all",q=10,f="start",j="move",g="end",p="cancel",a="ontouchstart" in window,y="TouchSwipe";var m={fingers:1,threshold:75,cancelThreshold:null,pinchThreshold:20,maxTimeThreshold:null,fingerReleaseThreshold:250,longTapThreshold:500,doubleTapThreshold:200,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,pinchIn:null,pinchOut:null,pinchStatus:null,click:null,tap:null,doubleTap:null,longTap:null,triggerOnTouchEnd:true,triggerOnTouchLeave:false,allowPageScroll:"auto",fallbackToMouseEvents:true,excludedElements:"button, input, select, textarea, a, .noSwipe"};e.fn.swipe=function(D){var C=e(this),B=C.data(y);if(B&&typeof D==="string"){if(B[D]){return B[D].apply(this,Array.prototype.slice.call(arguments,1))}else{e.error("Method "+D+" does not exist on jQuery.swipe")}}else{if(!B&&(typeof D==="object"||!D)){return u.apply(this,arguments)}}return C};e.fn.swipe.defaults=m;e.fn.swipe.phases={PHASE_START:f,PHASE_MOVE:j,PHASE_END:g,PHASE_CANCEL:p};e.fn.swipe.directions={LEFT:o,RIGHT:n,UP:d,DOWN:v,IN:c,OUT:w};e.fn.swipe.pageScroll={NONE:l,HORIZONTAL:A,VERTICAL:t,AUTO:r};e.fn.swipe.fingers={ONE:1,TWO:2,THREE:3,ALL:h};function u(B){if(B&&(B.allowPageScroll===undefined&&(B.swipe!==undefined||B.swipeStatus!==undefined))){B.allowPageScroll=l}if(B.click!==undefined&&B.tap===undefined){B.tap=B.click}if(!B){B={}}B=e.extend({},e.fn.swipe.defaults,B);return this.each(function(){var D=e(this);var C=D.data(y);if(!C){C=new z(this,B);D.data(y,C)}})}function z(a0,aq){var av=(a||!aq.fallbackToMouseEvents),G=av?"touchstart":"mousedown",au=av?"touchmove":"mousemove",R=av?"touchend":"mouseup",P=av?null:"mouseleave",az="touchcancel";var ac=0,aL=null,Y=0,aX=0,aV=0,D=1,am=0,aF=0,J=null;var aN=e(a0);var W="start";var T=0;var aM=null;var Q=0,aY=0,a1=0,aa=0,K=0;var aS=null;try{aN.bind(G,aJ);aN.bind(az,a5)}catch(ag){e.error("events not supported "+G+","+az+" on jQuery.swipe")}this.enable=function(){aN.bind(G,aJ);aN.bind(az,a5);return aN};this.disable=function(){aG();return aN};this.destroy=function(){aG();aN.data(y,null);return aN};this.option=function(a8,a7){if(aq[a8]!==undefined){if(a7===undefined){return aq[a8]}else{aq[a8]=a7}}else{e.error("Option "+a8+" does not exist on jQuery.swipe.options")}};function aJ(a9){if(ax()){return}if(e(a9.target).closest(aq.excludedElements,aN).length>0){return}var ba=a9.originalEvent?a9.originalEvent:a9;var a8,a7=a?ba.touches[0]:ba;W=f;if(a){T=ba.touches.length}else{a9.preventDefault()}ac=0;aL=null;aF=null;Y=0;aX=0;aV=0;D=1;am=0;aM=af();J=X();O();if(!a||(T===aq.fingers||aq.fingers===h)||aT()){ae(0,a7);Q=ao();if(T==2){ae(1,ba.touches[1]);aX=aV=ap(aM[0].start,aM[1].start)}if(aq.swipeStatus||aq.pinchStatus){a8=L(ba,W)}}else{a8=false}if(a8===false){W=p;L(ba,W);return a8}else{ak(true)}}function aZ(ba){var bd=ba.originalEvent?ba.originalEvent:ba;if(W===g||W===p||ai()){return}var a9,a8=a?bd.touches[0]:bd;var bb=aD(a8);aY=ao();if(a){T=bd.touches.length}W=j;if(T==2){if(aX==0){ae(1,bd.touches[1]);aX=aV=ap(aM[0].start,aM[1].start)}else{aD(bd.touches[1]);aV=ap(aM[0].end,aM[1].end);aF=an(aM[0].end,aM[1].end)}D=a3(aX,aV);am=Math.abs(aX-aV)}if((T===aq.fingers||aq.fingers===h)||!a||aT()){aL=aH(bb.start,bb.end);ah(ba,aL);ac=aO(bb.start,bb.end);Y=aI();aE(aL,ac);if(aq.swipeStatus||aq.pinchStatus){a9=L(bd,W)}if(!aq.triggerOnTouchEnd||aq.triggerOnTouchLeave){var a7=true;if(aq.triggerOnTouchLeave){var bc=aU(this);a7=B(bb.end,bc)}if(!aq.triggerOnTouchEnd&&a7){W=ay(j)}else{if(aq.triggerOnTouchLeave&&!a7){W=ay(g)}}if(W==p||W==g){L(bd,W)}}}else{W=p;L(bd,W)}if(a9===false){W=p;L(bd,W)}}function I(a7){var a8=a7.originalEvent;if(a){if(a8.touches.length>0){C();return true}}if(ai()){T=aa}a7.preventDefault();aY=ao();Y=aI();if(a6()){W=p;L(a8,W)}else{if(aq.triggerOnTouchEnd||(aq.triggerOnTouchEnd==false&&W===j)){W=g;L(a8,W)}else{if(!aq.triggerOnTouchEnd&&a2()){W=g;aB(a8,W,x)}else{if(W===j){W=p;L(a8,W)}}}}ak(false)}function a5(){T=0;aY=0;Q=0;aX=0;aV=0;D=1;O();ak(false)}function H(a7){var a8=a7.originalEvent;if(aq.triggerOnTouchLeave){W=ay(g);L(a8,W)}}function aG(){aN.unbind(G,aJ);aN.unbind(az,a5);aN.unbind(au,aZ);aN.unbind(R,I);if(P){aN.unbind(P,H)}ak(false)}function ay(bb){var ba=bb;var a9=aw();var a8=aj();var a7=a6();if(!a9||a7){ba=p}else{if(a8&&bb==j&&(!aq.triggerOnTouchEnd||aq.triggerOnTouchLeave)){ba=g}else{if(!a8&&bb==g&&aq.triggerOnTouchLeave){ba=p}}}return ba}function L(a9,a7){var a8=undefined;if(F()||S()){a8=aB(a9,a7,k)}else{if((M()||aT())&&a8!==false){a8=aB(a9,a7,s)}}if(aC()&&a8!==false){a8=aB(a9,a7,i)}else{if(al()&&a8!==false){a8=aB(a9,a7,b)}else{if(ad()&&a8!==false){a8=aB(a9,a7,x)}}}if(a7===p){a5(a9)}if(a7===g){if(a){if(a9.touches.length==0){a5(a9)}}else{a5(a9)}}return a8}function aB(ba,a7,a9){var a8=undefined;if(a9==k){aN.trigger("swipeStatus",[a7,aL||null,ac||0,Y||0,T]);if(aq.swipeStatus){a8=aq.swipeStatus.call(aN,ba,a7,aL||null,ac||0,Y||0,T);if(a8===false){return false}}if(a7==g&&aR()){aN.trigger("swipe",[aL,ac,Y,T]);if(aq.swipe){a8=aq.swipe.call(aN,ba,aL,ac,Y,T);if(a8===false){return false}}switch(aL){case o:aN.trigger("swipeLeft",[aL,ac,Y,T]);if(aq.swipeLeft){a8=aq.swipeLeft.call(aN,ba,aL,ac,Y,T)}break;case n:aN.trigger("swipeRight",[aL,ac,Y,T]);if(aq.swipeRight){a8=aq.swipeRight.call(aN,ba,aL,ac,Y,T)}break;case d:aN.trigger("swipeUp",[aL,ac,Y,T]);if(aq.swipeUp){a8=aq.swipeUp.call(aN,ba,aL,ac,Y,T)}break;case v:aN.trigger("swipeDown",[aL,ac,Y,T]);if(aq.swipeDown){a8=aq.swipeDown.call(aN,ba,aL,ac,Y,T)}break}}}if(a9==s){aN.trigger("pinchStatus",[a7,aF||null,am||0,Y||0,T,D]);if(aq.pinchStatus){a8=aq.pinchStatus.call(aN,ba,a7,aF||null,am||0,Y||0,T,D);if(a8===false){return false}}if(a7==g&&a4()){switch(aF){case c:aN.trigger("pinchIn",[aF||null,am||0,Y||0,T,D]);if(aq.pinchIn){a8=aq.pinchIn.call(aN,ba,aF||null,am||0,Y||0,T,D)}break;case w:aN.trigger("pinchOut",[aF||null,am||0,Y||0,T,D]);if(aq.pinchOut){a8=aq.pinchOut.call(aN,ba,aF||null,am||0,Y||0,T,D)}break}}}if(a9==x){if(a7===p||a7===g){clearTimeout(aS);if(V()&&!E()){K=ao();aS=setTimeout(e.proxy(function(){K=null;aN.trigger("tap",[ba.target]);if(aq.tap){a8=aq.tap.call(aN,ba,ba.target)}},this),aq.doubleTapThreshold)}else{K=null;aN.trigger("tap",[ba.target]);if(aq.tap){a8=aq.tap.call(aN,ba,ba.target)}}}}else{if(a9==i){if(a7===p||a7===g){clearTimeout(aS);K=null;aN.trigger("doubletap",[ba.target]);if(aq.doubleTap){a8=aq.doubleTap.call(aN,ba,ba.target)}}}else{if(a9==b){if(a7===p||a7===g){clearTimeout(aS);K=null;aN.trigger("longtap",[ba.target]);if(aq.longTap){a8=aq.longTap.call(aN,ba,ba.target)}}}}}return a8}function aj(){var a7=true;if(aq.threshold!==null){a7=ac>=aq.threshold}return a7}function a6(){var a7=false;if(aq.cancelThreshold!==null&&aL!==null){a7=(aP(aL)-ac)>=aq.cancelThreshold}return a7}function ab(){if(aq.pinchThreshold!==null){return am>=aq.pinchThreshold}return true}function aw(){var a7;if(aq.maxTimeThreshold){if(Y>=aq.maxTimeThreshold){a7=false}else{a7=true}}else{a7=true}return a7}function ah(a7,a8){if(aq.allowPageScroll===l||aT()){a7.preventDefault()}else{var a9=aq.allowPageScroll===r;switch(a8){case o:if((aq.swipeLeft&&a9)||(!a9&&aq.allowPageScroll!=A)){a7.preventDefault()}break;case n:if((aq.swipeRight&&a9)||(!a9&&aq.allowPageScroll!=A)){a7.preventDefault()}break;case d:if((aq.swipeUp&&a9)||(!a9&&aq.allowPageScroll!=t)){a7.preventDefault()}break;case v:if((aq.swipeDown&&a9)||(!a9&&aq.allowPageScroll!=t)){a7.preventDefault()}break}}}function a4(){var a8=aK();var a7=U();var a9=ab();return a8&&a7&&a9}function aT(){return !!(aq.pinchStatus||aq.pinchIn||aq.pinchOut)}function M(){return !!(a4()&&aT())}function aR(){var ba=aw();var bc=aj();var a9=aK();var a7=U();var a8=a6();var bb=!a8&&a7&&a9&&bc&&ba;return bb}function S(){return !!(aq.swipe||aq.swipeStatus||aq.swipeLeft||aq.swipeRight||aq.swipeUp||aq.swipeDown)}function F(){return !!(aR()&&S())}function aK(){return((T===aq.fingers||aq.fingers===h)||!a)}function U(){return aM[0].end.x!==0}function a2(){return !!(aq.tap)}function V(){return !!(aq.doubleTap)}function aQ(){return !!(aq.longTap)}function N(){if(K==null){return false}var a7=ao();return(V()&&((a7-K)<=aq.doubleTapThreshold))}function E(){return N()}function at(){return((T===1||!a)&&(isNaN(ac)||ac===0))}function aW(){return((Y>aq.longTapThreshold)&&(ac<q))}function ad(){return !!(at()&&a2())}function aC(){return !!(N()&&V())}function al(){return !!(aW()&&aQ())}function C(){a1=ao();aa=event.touches.length+1}function O(){a1=0;aa=0}function ai(){var a7=false;if(a1){var a8=ao()-a1;if(a8<=aq.fingerReleaseThreshold){a7=true}}return a7}function ax(){return !!(aN.data(y+"_intouch")===true)}function ak(a7){if(a7===true){aN.bind(au,aZ);aN.bind(R,I);if(P){aN.bind(P,H)}}else{aN.unbind(au,aZ,false);aN.unbind(R,I,false);if(P){aN.unbind(P,H,false)}}aN.data(y+"_intouch",a7===true)}function ae(a8,a7){var a9=a7.identifier!==undefined?a7.identifier:0;aM[a8].identifier=a9;aM[a8].start.x=aM[a8].end.x=a7.pageX||a7.clientX;aM[a8].start.y=aM[a8].end.y=a7.pageY||a7.clientY;return aM[a8]}function aD(a7){var a9=a7.identifier!==undefined?a7.identifier:0;var a8=Z(a9);a8.end.x=a7.pageX||a7.clientX;a8.end.y=a7.pageY||a7.clientY;return a8}function Z(a8){for(var a7=0;a7<aM.length;a7++){if(aM[a7].identifier==a8){return aM[a7]}}}function af(){var a7=[];for(var a8=0;a8<=5;a8++){a7.push({start:{x:0,y:0},end:{x:0,y:0},identifier:0})}return a7}function aE(a7,a8){a8=Math.max(a8,aP(a7));J[a7].distance=a8}function aP(a7){return J[a7].distance}function X(){var a7={};a7[o]=ar(o);a7[n]=ar(n);a7[d]=ar(d);a7[v]=ar(v);return a7}function ar(a7){return{direction:a7,distance:0}}function aI(){return aY-Q}function ap(ba,a9){var a8=Math.abs(ba.x-a9.x);var a7=Math.abs(ba.y-a9.y);return Math.round(Math.sqrt(a8*a8+a7*a7))}function a3(a7,a8){var a9=(a8/a7)*1;return a9.toFixed(2)}function an(){if(D<1){return w}else{return c}}function aO(a8,a7){return Math.round(Math.sqrt(Math.pow(a7.x-a8.x,2)+Math.pow(a7.y-a8.y,2)))}function aA(ba,a8){var a7=ba.x-a8.x;var bc=a8.y-ba.y;var a9=Math.atan2(bc,a7);var bb=Math.round(a9*180/Math.PI);if(bb<0){bb=360-Math.abs(bb)}return bb}function aH(a8,a7){var a9=aA(a8,a7);if((a9<=45)&&(a9>=0)){return o}else{if((a9<=360)&&(a9>=315)){return o}else{if((a9>=135)&&(a9<=225)){return n}else{if((a9>45)&&(a9<135)){return v}else{return d}}}}}function ao(){var a7=new Date();return a7.getTime()}function aU(a7){a7=e(a7);var a9=a7.offset();var a8={left:a9.left,right:a9.left+a7.outerWidth(),top:a9.top,bottom:a9.top+a7.outerHeight()};return a8}function B(a7,a8){return(a7.x>a8.left&&a7.x<a8.right&&a7.y>a8.top&&a7.y<a8.bottom)}}})(jQuery);
  </script>
  <script>
    $(document).ready(function() {
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-sidebar");
  });
     
});
 
$(".swipe-area").swipe({
    swipeStatus:function(event, phase, direction, distance, duration, fingers)
        {
            if (phase=="move" && direction =="right") {
                 $(".container").addClass("open-sidebar");
                 return false;
            }
            if (phase=="move" && direction =="left") {
                 $(".container").removeClass("open-sidebar");
                 return false;
            }
        }
});
  </script>
</div>

GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 01 nov. 2019, 23:37

ah mais c'est pas mal du tout ça ! c'est prometteur ! je vais faire quelques essais pour voir ce que ça donne si ça active un scroll to view.
le menu qui se cahe en fondu au clic c'est top ! juste ce qu'il faut. bravo

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 02 nov. 2019, 01:16

je suis chaud bouilllant

tu te souviens le transfert de class/id entre résumé et menu
c'est galére : widget spécifique, configuration spécifique, ...

je ne connaissais que l'envoie à partir de la source sur le destinaire (avec update !important)

voici le contraire
chaque destinataire s'incrémente en surveillant la source (widget tile pour l'exemple du code)

Code : Tout sélectionner

<!--
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
-->
<div id="report">Sud <span class="sud"></span> °C <span class="min"></span>|<span class="max"></span>
</div>


<script>

/* variable de l'info */
  var elem1 = '.cmd[data-cmd_id="819"] .state';
var elem_mini1 = '.cmd[data-cmd_id="819"] [title="Min"]';
var elem_max1 = '.cmd[data-cmd_id="819"] [title="Max"]';
  
/* assignation de l'info au destinaire à l'ouverture de la page*/
  $('#report .sud').text($(elem1).text());
  $('#report .min').text($(elem_mini1).text());
  $('#report .max').text($(elem_max1).text());
  
//var elementToObserve = document.querySelector('.cmd[data-cmd_id="1797"] .state');
var elementToObserve = document.querySelector(elem1);

var observer = new MutationObserver(function() {
//    console.log('callback that runs when observer is triggered');
  
/* assignation de l'info au destinaire si il y a update*/
  $('#report .sud').text($(elem1).text());

});

// call `observe` on that MutationObserver instance, 
// passing it the element to observe, and the options object

  observer.observe(elementToObserve, {subtree: true, childList: true});
  


</script>
la raison 1er plus besoin de plusieurs commande pour 1 seul element
(ex température cuisine dans tableau de bord, cuisine, chauffage)

avec en plus
plus besoin d'une mise en forme d'un widget propre à jeedom "truc parfois complexe"
création de virtuel
et gain de temps
(1 info réele jeedom)

enfin ça demande à être observé avant mise en place plus poussé.

GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 02 nov. 2019, 08:29

Oh ca c est cool ! Ca va être beaucoup plus simple à mettre en place en effet que de passer par le widget et ses attributs et s assurer d avoir mis la même chose dans le widget et le code du résumé !!!

Si je comprends bien, tu créer juste un html sur ton design avec ce code et ça créer un tile qui vas chercher l info sur l ID que tu as mis dans le code ? C est hyper simple !

Et moins de chance que ça plante en V4!

Va falloir que tu refroidisse un peu car je n ai pas le temps de suivre/tester et implémenter à la vitesse où tu développes :)

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 05 nov. 2019, 01:41

Va falloir que tu refroidisse un peu car je n ai pas le temps de suivre/tester et implémenter à la vitesse où tu développes
moi non plus je suis en periode de recherche, avant de partir le nez dans le guidon pour faire machine arriére.
ensuite c'est plus long la mise en place.

soyons encore plus fou

pour un report d'info (avec update)
je ne connaissais que l'envoie à partir de la source sur le destinaire)

le contraire
chaque destinataire s'incrémente en surveillant la source (widget tile "source" pour l'exemple du code)
et maintenant sans l'un ni l'autre ! :D :D
c'est plus un report là ! donc sans equipements sur le design

à coller dans un html

Code : Tout sélectionner

<div class="cmd" data-cmd_id="1797">
<script>
		jeedom.cmd.update['1797'] = function(_options){
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: 1797,
				success:  function(valeur_courante) {
                  alert(valeur_courante);
		//			$('.state1').text(valeur_courante);
				}
			})   
		};
       		jeedom.cmd.update['1797']();
	</script>
</div>
l'id x4 "1797" pourrait être à définir en variable

Code : Tout sélectionner

<div>
<script>
  var stateMouv=3641;
      $('#mouv')[0].setAttribute('data-cmd_id', stateMouv);

  jeedom.cmd.update[stateMouv] = function(_options){
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: stateMouv,
                                success:  function(valeur_courante) {
                            //      alert(valeur_courante);
$('.stateMouv').empty();
if (valeur_courante == 0 ) { $('.stateMouv,.iconCmdMouv').css('color', '');             
} else {$('.stateMouv,.iconCmdMouv').css('color', '#ff9000');
      $('.stateMouv').append(valeur_courante);}
				}})   
   }; 
      jeedom.cmd.update[stateMouv](); 
  
	</script>
<li><div id="mouv" class="cmd"><span class="iconCmdMouv"><i style=""class="fa jeedom-mouvement fa-2x"></i></span>
  <span class="stateMouv"></span>	
  <a href="#section10">Mouvement</a></div></li>	
</div>

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 24 nov. 2019, 11:08

dans le même style
Screenshot_20191124-105810_Chrome.jpg
Screenshot_20191124-105810_Chrome.jpg (278.02 Kio) Consulté 6677 fois
de manières interactif (recalcule en live) pour consultations
Screenshot_20191124-105826_Chrome.jpg
Screenshot_20191124-105826_Chrome.jpg (235.54 Kio) Consulté 6677 fois
il n'y a que l'id à definir

Code : Tout sélectionner

<!-- source
https://codepen.io/pavelvaravko/pen/qjojOr/
-->

<body>
    <div class="wrap">
      
<!--Select with pure css-->
      <div class="select">
					<select class="select-text" required>
						<option value="elem_24h" selected>24 heures</option>
						<option value="elem_1ans">1 ans</option>
						<option value="elem_2ans">2 ans</option>
					</select>
					<span class="select-highlight"></span>
					<span class="select-bar"></span>
					<label class="select-label">Mini/Maxi Temp. Ext. </label>
  	</div>
      
<div class="result">Pour cette periode <br/>
  le minimal est de <span class="mini">--</span><br/>(<span class="minidate">--</span>) <br/>
  le maximal est de <span class="max">--</span><br/>(<span class="maxdate">--</span>) <br/>
  et il faisait <span class="lastyear">--</span><br/>
  à <span class="lastyeardate">--</span>

      </div>
	<script>
      var stateTemp=825; // Id à définir      
   var date = new Date();
   var d = date.getDate();
   var m = date.getMonth() + 1; //Month from 0 to 11
    var y = date.getFullYear();
      var hh = date.getHours();
      var mn = date.getMinutes();
      var ss = date.getSeconds();
	var d_1 = (date.getDate()-1);
    var y_1 = (date.getFullYear()-1);
    var y_2 = (date.getFullYear()-2);   
      var hh_1 = (date.getHours()-1); 
var now = (y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d)+' '+(hh<=9 ? '0' + hh : hh)+':'+(mn<=9 ? '0' + mn : mn)+':'+(ss<=9 ? '0' + ss : ss));
var oneyear = (y_1 + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d)+' '+(hh_1<=9 ? '0' + hh_1 : hh_1)+':'+(mn<=9 ? '0' + mn : mn)+':'+(ss<=9 ? '0' + ss : ss));
var lastday = (y + '-' + (m<=9 ? '0' + m : m) + '-' + (d_1 <= 9 ? '0' + d_1 : d_1)+' '+(hh<=9 ? '0' + hh : hh)+':'+(mn<=9 ? '0' + mn : mn)+':'+(ss<=9 ? '0' + ss : ss));
var twoyear = (y_2 + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d)+' '+(hh_1<=9 ? '0' + hh_1 : hh_1)+':'+(mn<=9 ? '0' + mn : mn)+':'+(ss<=9 ? '0' + ss : ss));

var options = {timeZone: "UTC",hour:"2-digit", minute:"2-digit"};        

history(lastday,now);    
      
      $("select.select-text").on('change', function () {
var data =($(this).val());
     
      if (data == "elem_24h") {
options = {timeZone: "UTC",hour:"2-digit", minute:"2-digit"};        
history(lastday,now);    
   }
 else if (data == "elem_1ans") {
 options = {timeZone: "UTC",month: "long", day: "numeric"};
history(oneyear,now);   
   }
  else if (data == "elem_2ans") {
 options = {timeZone: "UTC",year:"numeric",month: "long", day: "numeric"};
history(twoyear,now);   
   }       
     
     });  
      function history(start, end) {
jeedom.history.get ({ 

            cmd_id: stateTemp,
         //       dateStart:this.lastday,
		//		dateEnd:this.now,
dateStart:start,
dateEnd:end,  
   success:  function(resulat) { 

      $('.mini').empty().text(resulat.minValue+" °C");
     $('.max').empty().text(resulat.maxValue+" °C");
      $('.lastyear').empty().text(resulat.data[0][1]+" °C");
     var lastyeardate = new Date(resulat.data[0][0]);
     lastyeardate=lastyeardate.toLocaleString('fr-FR',{timeZone: "UTC",hour:"2-digit"});
         $('.lastyeardate').empty().text(lastyeardate);

     $( resulat.data ).each(function( index ) {
        var num = resulat.data[index][1];
       
if (num == resulat.maxValue) {
// console.log( $( this ).text(resulat.data[index][1]));
var maxdate = new Date(resulat.data[index][0]);
      maxdate=maxdate.toLocaleString('fr-FR',options);      
  $('.maxdate').empty().text(maxdate);                                
        }
     if (num == resulat.minValue) {
    //        console.log( $( this ).text(resulat.data[index][1]));
var minidate = new Date(resulat.data[index][0]);
      minidate=minidate.toLocaleString('fr-FR',options);
       $('.minidate').empty().text(minidate);                                
        }     
       
     });

      }
   
})
   }
	</script>
      <style>
        .result {
        font-weight: 400;font-size: 12.5px;text-align: center;
       }    
.mini,.minidate,.max,.maxdate,.lastyear,.lastyeardate {
  font-weight: 600;font-size: 15.5px;
  }
.wrap {
  font-size: 15.5px;
  font-family:'Roboto','Helvetica','Arial',sans-serif;
  font-weight: 400;
  position: absolute;
  right: 0;
  top: 0%;
  width: 100%;
  left: 0;
  margin: 0 auto;
}

/* select starting stylings ------------------------------*/
.select {
	position: relative;
	width: 100%;
}

.select-text {
	position: relative;
	font-family: inherit;
	background-color: transparent;
	width: 100%;
	padding: 2px 2px 2px 0;
	font-size: 15px;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid rgba(0,0,0, 0.12);
}

/* Remove focus */
.select-text:focus {
	outline: none;
	border-bottom: 1px solid rgba(0,0,0, 0);
}

	/* Use custom arrow */
.select .select-text {
	appearance: none;
	-webkit-appearance:none
}

.select:after {
	position: absolute;
	top: 8px;
	right: 10px;
	/* Styling the down arrow */
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid rgba(0, 0, 0, 0.12);
	pointer-events: none;
}
/* LABEL ======================================= */
.select-label {
	color: rgba(0,0,0, 0.26);
	font-size: 18px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 0;
	top: 10px;
	transition: 0.2s ease all;
}


/* active state */
.select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
	color: #2F80ED;
	top: -20px;
	transition: 0.2s ease all;
	font-size: 14px;
}

/* BOTTOM BARS ================================= */
.select-bar {
	position: relative;
	display: block;
	width: 100%;
}

.select-bar:before, .select-bar:after {
	content: '';
	height: 2px;
	width: 0;
	bottom: 1px;
	position: absolute;
	background: #2F80ED;
	transition: 0.2s ease all;
}

.select-bar:before {
	left: 50%;
}

.select-bar:after {
	right: 50%;
}

/* active state */
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
	width: 50%;
}

/* HIGHLIGHTER ================================== */
.select-highlight {
	position: absolute;
	height: 60%;
	width: 100px;
	top: 25%;
	left: 0;
	pointer-events: none;
	opacity: 0.5;
}
</style>

</div>
      </body>
sur + 1 ans ma base de données n'est pas optimisé , il me faut + 1mn pour le calcul, ma nouvelle mission

Vins222
Timide
Messages : 37
Inscription : 23 juil. 2017, 16:59

[tuto] Design - menu slide - corps scroll

Message par Vins222 » 30 déc. 2019, 03:20

Bonjour à tous, bonjour @winhex,

Depuis le passage en v4 j’ai un problème d’affichage avec le menu. En effet le menu.txt me fait apparaître une à plusieurs fenêtre rendant le menu design inutilisable ! En effet plusieurs copie du design apparaissent en successions d’image superposées que ce soit avec le menu horizontal ou vertical de @winhex (cf photos ) !
J’aimerais savoir si j’etait le seul dans ce cas ?
Si oui y’a t’il eut une modification de code à faire pour l’adapter au design V4 ?
Merci d’avance de votre aide ;)
Bonne fêtes de fin d’année ;)

Image
Image
Image

Envoyé de mon iPhone en utilisant Tapatalk

Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités