[tuto] Design - menu slide - corps scroll

[winhex]

je regarderai

[Micramaniac]

Merci
Je continue à chercher de mon côté

[JBLSteeve]

Bonjour,
Je commence mes designs pour une tablette et je me pose la question de faire une page (plus petite que la taille totale pour laisser la place au menu) pour chaque partie ou si il faut plutôt faire avec des sections.
Je pensais faire un design avec le menu et après un design pour chaque éléments de menu.

Quels est votre avis ? Si vous avez des conseils?
Je vois plusieurs écoles mais j'ai pas bien cerner les avantages de chaque solution

[winhex]

@Micramaniac j aurai du temps demain
mais donne moi plus de détail sur se que tu veux
car la je comprend un truc de 600px et ne gardé que 300 no swipe ?

@JBLSteeve
bonjour comme tu l'as vu il y a plusieurs école, elle ont
1 apparu avec le temps,
2 évolué avec les contraintes de la précédente.

1 la plus simple un html menu "reproduit" dans chaque design contenant les équipements
avantage : la plus simple.
inconvénient : plusieurs design, temps de chargement de chaque design, à dupliquer chaque équipements "virtuel" si on souhaite l'info sur plusieurs design.

2 celui la
fait à l'origine pour un tel afin d'éviter les 3 inconvénients précédents à base l'iframe (fenêtre sur autre design)
un avantage : le chargement étant progressif (parent/enfant/..) il permet en mobilité de créé des paliers de chargement
inconvénient code ++, design menu en plus, chaque iframe et un temps d'accès supplémentaire (si on souhaites avoir cette info rapidement )

3 celui de pascal
afin d'avoir encore un design en moin
inconvenient : code +++ pour la personnalisation d'un menu

2 autres

4 à base de flickity (a tous créé)
5 à base de tasker (création d'apk) en se servant de l'api

[Micramaniac]

Bonjour Wihnex,
avec tes explications, tout fonctionne comme je veux.
Il ne me reste plus qu'à trouver comment supprimer le scroll vertical pour naviguer uniquement avec les bouton pour que tout soit parfait.
Mais la je bloque encore. JE ne suis pas contre un coup de main si tu as 5min

[winhex]

je pense que si tu joues avec ca tu pourras trouvé
ça empêche le zoom
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

La propriété width contrôle la taille du viewport. Elle peut être réglée à une valeur précise de pixels, comme width=600

https://developer.mozilla.org/fr/docs/M ... a_viewport
édit : ne marche pas avec tablette (chrome) si tu ne désactive pas le zoom dans accessibilité des paramètre chrome

[Micramaniac]

Merci winhex. Je teste ça dès que je rentre

[JBLSteeve]

Merci winhex, il me reste a tester pour trouver la solution la plus optimisé

[JBLSteeve]

Ma tablette Huawei fait un zoom automatique je pense et j'aimerai rester sur la résolution maximale de l'écran. Je ne sais pas comment faire.

[winhex]

il y a d'autre méthode pour bloquer le zoom
qu'on peut avoir sur certains site
ensuite ta plus qu'à analyse du site en question

[JBLSteeve]

Finalement, j'ai une première base .
Maintenant avec ce menu dupliqué je ne me vois pas mettre les widgets de présence sur chaque page. Je tente de faire une intégration dans le code html. J'ai réussi à mettre mon mode "présence" id=890.
Je pense pas que c'est parfais au niveau code mais le langage web je connais pas...

Code : Tout sélectionner

<meta  id="jeedomViewport" name="viewport" content="user-scalable=0;" /> 
<script>  
    if (screen.width >= 1920) {
      	// la tablette
        var mvp = document.getElementById('jeedomViewport');
        mvp.setAttribute('content','width=1920; height=1200; initial-scale=1.0; user-scalable=0;');
    } 
   else {    	
    var scaleX = screen.width / 1920;
    var scaleY = screen.height / 1200;
    var scale = scaleX < scaleY ? scaleX : scaleY; 
    var mvp = document.getElementById('jeedomViewport'); 
    mvp.setAttribute('content','initial-scale='+scale+';');
     document.body.style.transform: scale(scale);
     document.body.style['-o-transform'] = scale;
     document.body.style['-webkit-transform'] = scale;
     document.body.style['-moz-transform'] = scale;
  }  
    
</script>
<!-- pour la tablette permet de ne pas avoir de scroll 
<meta name="viewport" content=" width=device-width; initial-scale=1.0; user-scalable=0;" />  -->
<style>

/*
  le plan total fait 21210x1200
  pour un ecran de 1920x1200
*/  
.div_backgroundPlan {
  background: url("montheme/background.jpg") repeat-x;
}
div.menu_top{
	height:100px;
	background-color:rgba(0,0,0,0.6);
	border-bottom:2px solid rgba(0,0,0,1);
	
}

ul.monmenu ul.monmenu_sep{
	list-style-type:none;
	color:rgba(255,255,255,0.8);
	font-family:Roboto;
	font-size: 16px;
	font-weight: normal;
}

li.monmenu{
	display:inline-block;
	width: 120px;
	margin-left: -5px;
	text-align: center;
	height: 100px;
	padding-top: 10px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(0,0,0,0.2);
}

li.monmenu1{
	display:inline-block;
	width: 120px;
	margin-left: -5px;
	text-align: center;
	height: 100px;
	padding-top: 10px;
	background-color: rgba(0,0,0,0.2);
}

li.monmenupres {
    display: inline-block;
    width: 250px;
    height: 100px;
    margin: 0;
    margin-left: -5px;
	padding-top: 10px;
    text-align: center;
    color: #FFFFFF;
    background-color: rgba(0,0,0,0.2);
}

li.monmenu:hover{
	background-color: rgba(255,255,255,0.2);
}

li.selected{
	display:inline-block;
	width: 120px;
	margin-left: -5px;
	text-align: center;
	height: 100px;
	padding-top: 10px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(255,255,255,0.2);
}

li.monmenu_sep{
	display:inline-block;
	width: 120px;
	margin-left: -5px;
	text-align: center;
	height: 100px;
	padding-top: 10px;
	border-right: 1px solid rgba(0,0,0,0.3);
}

li.monmenudate {
    display: inline-block;
    width: 330px;
    height: 100px;
    margin: 0;
    margin-left: -5px;
	padding-top: 6px;
    text-align: center;
    background-color: rgba(0,0,0,0.2);
}


div.bouton{
	opacity: 1;
}

div.bouton:hover{
	opacity: 0.5;
} 

div.imagette{
	text-align: center;
	margin-bottom: 5px;
	opacity: 0.8;
}
  
body {
position:fixed;
}
  
</style>


<div id="allTopMenus">
  <!-- ici on va copier le div id=menuPage plusieur fois -->
<div id="menuPage" class="menu_top">
<ul class="monmenu">


	<a onClick="scrollToPage(1);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu-accueil.png" height=75px width=75px></div></br></li></a>
	<a onClick="scrollToPage(2);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu-chauffage.png" height=75px width=75px></div></br></li></a>
	<a onClick="scrollToPage(3);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu-camera.png" height=75px width=75px></div></br></li></a>
	<a onClick="scrollToPage(4);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu-music.png" height=75px width=75px></div></br></li></a>
	<a onClick="scrollToPage(5);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu-video.png" height=75px width=75px></div></br></li></a>
    <a onClick="scrollToPage(6);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu-conso.png" height=75px width=75px></div></br></li></a>
    <a onClick="scrollToPage(7);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu-server.png" height=75px width=75px></div></br></li></a>
    
    <a onClick=""><li class="monmenu1"><div class="imagette"><img src="montheme/images/icon_blank.png" height=75px width=75px></div></br></li></a>
    <a onClick=""><li class="monmenu1"><div class="imagette"><img src="montheme/images/icon_blank.png" height=75px width=75px></div></br></li></a>
    <a onClick=""><li class="monmenu1"><div class="imagette"><img src="montheme/images/icon_blank.png" height=75px width=75px></div></br></li></a>
    <a onClick=""><li class="monmenu1"><div class="imagette"><img src="montheme/images/icon_blank.png" height=75px width=75px></div></br></li></a>

	<a onClick=""><li class="monmenupres">
	<div class="cmd #history# tooltips cmd-widget" data-type="info" data-cmd_id="890" >
	<span style="font-size: 3em;font-weight: bold; color: #FFFFFF;" class="state"></span>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#'});
	</script>
	</div>
	</br></li></a>	
    
    <a><li class="monmenudate"><iframe src="montheme/clock.html" height=100px width=330px style="border-style: none ;"></iframe></li></a>


</ul>
</div>
</div>



<script>
var nbOfPage=11;
var pageSizeX=1920;
var pageSizeY=1200;
 
$('#allTopMenus').parent("div").css({ 
      "position":"absolute",
      "left":"0px",
      "top":"0px",
	  "width":(nbOfPage*pageSizeX)+"px"
    });

$(".div_backgroundPlan").eq(0).css({ "width": nbOfPage*pageSizeX, "height": pageSizeY });
  
var cptPage;
for (cptPage = 0; cptPage < nbOfPage; cptPage++) {
  var newid = "menuPage";
  if (cptPage!=0){
    var menuPage = document.getElementById('menuPage');
    var clone = menuPage.cloneNode(true); // true means clone all childNodes and all event handlers
    newid = "menuPage"+cptPage; 
    clone.id = newid;
    var allTopMenus=document.getElementById('allTopMenus');
    allTopMenus.appendChild(clone);
    $("#"+newid+" li").eq(cptPage).addClass("selected");
  }
  $("#"+newid).eq(0).css({ 
 		"position":"absolute",
      	"left":(cptPage*pageSizeX)+"px",
      	"top":"0px",
	  	"width":pageSizeX+"px"                                        
   });
}
// la pager 0 je l'a fait en dernier sinon sa selection est cloné sur toute les autres
$("#menuPage li").eq(0).addClass("selected");

var currentPage=0;
function scrollToPage(page){
currentPage=page;
$("body").css("left", (page-1)*pageSizeX*(-1) + "px");
}
  
// pour cacher la scroll bar
//$("body").css("overflow", "hidden");
/*$(document).ready(function() {

  	$(document).bind("touchmove",function(event){       
        event.preventDefault();
      	scrollToPage(currentPage);
    });

});*/

 
function GetURLParameter(sParam) {
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)  {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
  return null;
}
  
var page = GetURLParameter('page'); 
if (page != null){
  scrollToPage(page);
}
</script>

[winhex]

regarde comment je fait pour intégré la présence/ lumière,.. au menu

tu as le code du menu parent

c'est le même principe même si pour mon cas c'est sur le parent

il te faut mettre sur ta page l'info
et dans son code "design"
un appel à ton id/class créé dans le menu
voici le code du widget présence de mon design
1er image à gauche (bleu)

viewtopic.php?f=25&t=35100&start=60#p678047

Code : Tout sélectionner

<div class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<a href="#section2" style="text-decoration : none;">
   <span class="iconCmd#id#" style="font-size: 25px;"></span>
     <span class="state#id#" style="font-family: 'Roboto-Regular';font-size: 15px;vertical-align: top;margin-left: 5px"></span> #unite#
<span style="text-align: left;font-weight: bold;font-size : 10px;#hideCmdName#">#name_display#</span></a>
  <script>

jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
//
// $('.cmd[data-cmd_id=#id#] .state#id#').empty().append(_options.display_value);
 $('.cmd[data-cmd_id=#id#] .state#id#').empty().append(_options.display_value);

//  $(".state#id#").css('color', ''); 
  if (_options.display_value == 0 ) {
$(".state#id#").css('color', '#e6e6e6'); 
  $(".iconCmd#id#") .empty().append('<i class="fa personne-toilet1 fa-2x" style="color:#e6e6e6;"</i>');  
 $('.PrezIcon', window.parent.document).empty().append('<i class="fa personne-toilet1 fa-2x" style="color:#e6e6e6;"</i>');;
   $('.PrezNumb', window.parent.document).text('#state#').css('color','#e6e6e6');

    
}else if (_options.display_value >= 1 ) { 
  $(".state#id#").css('color', '#64cfe8');
   $(".iconCmd#id#") .empty().append('<i class="fa personne-toilet1" style="color:#64cfe8;"</i>');  
 $('.PrezIcon', window.parent.document).empty().append('<i class="fa personne-toilet1 fa-2x" style="color:#64cfe8;"</i>');;
   $('.PrezNumb', window.parent.document).text('#state#').css('color','#64cfe8');
}  

  //

}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

tu peux voir pour > 0
$('.PrezIcon', window.parent.document).empty().append('<i class="fa personne-toilet1 fa-2x" style="color:#e6e6e6;"</i>');;
$('.PrezNumb', window.parent.document).text('#state#').css('color','#e6e6e6');

PrezIcon et PrezNumb sont 2 class misent dans le menu "vieux code de la 1er page du sujet simplement pour te les faire voir)

Code : Tout sélectionner

<!-- presence  -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section2'">
  <span class="PrezIcon"><i class="fa personne-toilet1 fa-2x"></i></span>
  <span class="PrezNumb Badge"></span>
  </a></li>

pour toi enlevé window.parent.document
$('.PrezNumb').text('#state#').css('color','#e6e6e6');
Après tu peux caché l'info (la rendre non visible) du design pour n'avoir que le menu

cette méthode permet une actualisation(1)
peut aidé à comprendre le principe d'une ligne de script
viewtopic.php?f=30&t=41418&p=675918&hil ... is#p675918


sinon tu as la méthode en html (identique au sujet graphique en camembert) mais tu n'auras pas (1)
peut être une autre méthode existe api js mais je ne l'a connais pas et encore (1) ?

sinon tu fait comme l'heure mais là je ne peux pas t'en dire plus

[JBLSteeve]

Merci, je vais 'jouer' avec ca.

[Micramaniac]

Je commence à mieux comprendre le code html.
A force de tester, j'ai réussi à bloquer le scroll.
En fait c'est tout simple, j'ai modifié le paramètre scrolling en le passant de yes à no
dans ton code :
<iframe id="iframe_a" height="100%" width="100%" frameBorder="0" scrolling="no" src="index.php?v=d&p=plan&plan_id=21&fullscreen=1"></iframe>

et tout fonctionne.
Merci pour ton aide Winhex.
Je continue à avancer mon design, c'est vraiment sympa les possibilités.

[winhex]

avec jeedom ça va très loin

HS
je me suis amusé avec des bougie de préchauffage (+800°C en 12v) avec une vieille alim de pc. simplement pour tester
c'est jeedom qui m'a mis à la bidouille elec aussi

tien un code que je jete la pour changer le format d'un collecdate ou valuedate
c'est brut (modif class test avec i#d# ou devant
[data-cmd_id=#id#] pour eviter les meli melo si on l'utilise sur plusieurs widget)

Code : Tout sélectionner

<div style="width:90px;min-height:62px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <center>
    <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
    <span style="font-size: 2.5em;font-weight: bold;margin-top:-5px;position:relative;top:-6px" class="iconCmd"></span><br/>
  <span class="test timeCmd"></span>
      </center>
  <script>

    jeedom.cmd.update['#id#'] = function(_options){
     jeedom.cmd.displayDuration(_options.valueDate,  $('.cmd[data-cmd_id=#id#] .timeCmd'));
           var date = new Date("#valueDate#");
//    var format = $.datepicker.formatDate('dd/mm D', date); // mer.
        var format = $.datepicker.formatDate('dd/mm DD', date); // mercredi

      var time = date.getHours()+"h"+date.getMinutes(); 

       $('.test').text(time+' '+format);
 
     $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
     if (_options.display_value == '1') {
       $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-fenetre-ferme"></i>');
     }else {
      $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-fenetre-ouverte"></i>');
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

[coulox]

merci winhex

[Fulgore]

Bonjour à tous,

J'ai besoin d'aide, je m'arrache les cheveux depuis plusieurs soir...

Je dois avoir une erreur dans le code de mon menu Iphone. Je n'arrive pas à faire de clics sur les équipements insérer sur les pages autres que la première.
J'ai tester les modifications de scotty92fr mais rien de plus.
Quelqu'un peut m'aider??
Merci d'avance.

Code : Tout sélectionner

  <head>
  <style>
::-webkit-scrollbar {
    display: none; 
}

.cbp-vimenu {
    width: 75px;
    height: 550px;
  
 	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;
	height: 100%;
  	margin: 0;
	padding: 0;
background-color: rgba(0,0,0,0.5);
    overflow-y: auto;
  	list-style-type: none;
}
/* 

    */
.cbp-vimenu li a {
  	position: relative;
    	display: block;
	height: 5em;
	width: 5em;
  	text-align: center;
	color: #999;
     	line-height: 4em;
      text-decoration: none;



  padding:.75em 1em;
  border-radius:.75em;

  background-color:rgba(250,250,255,.05);
  color:rgba(255,255,255,.75);
    box-shadow:
    inset 0 1px 0 0 rgba(250,250,255,.3),
    inset 0 -.5em 0 0 rgba(0,0,5,.05),
    inset 0 .25em 1em 0 rgba(250,250,255,.1),
    inset 0 -.25em 1em 0 rgba(0,0,5,.5),
    inset 0 -1px 0 0 rgba(0,0,5,.1),
    0 0 .25em 0 rgba(0,0,5,.5);
  
}

.cbp-vimenu li a:hover {
	background: #47a3da;
  	color: #fff;
}
.cbp-vimenu li a:hover,
.cbp-vimenu li.active a{
	background: #47a3da;
  	color: #fff;
}

.cbp-vimenu li a:before {
	speak: none;
	font-style: normal;
	font-weight: normal;

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}

  </style>
  </head>
<iframe id="iframe_a" height="550px" width="100%" frameBorder="0" scrolling="no" src="index.php?v=d&p=plan&plan_id=6&fullscreen=1"></iframe>
<ul class="cbp-vimenu">

<li class="active"><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section1'"><span class="fa maison-house110 fa-3x"></span></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section2'"><span class="fa jeedom2-bulb14 fa-3x"></span></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section3'"><span class="fa techno-heating3 fa-3x"></span></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section4'"><img src="/montheme/Images/icon_camera.png" height=40px width=40px></img></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section5'"><span class="fa techno-ventilation fa-3x"></span></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section6'"><span class="fa jeedom-clap_cinema fa-3x"></span></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section7'"><img src="/montheme/Images/icon_mini_reseau.png" height=40px width=40px></img></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section8'">8</a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section9'">9</a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section10'"><span class="icon circle-icon glyphicon glyphicon-chevron-down"></span></a></li>

</ul>
 <script>
      $('.cbp-vimenu li').on('click', function() {
  $(this).addClass('active').siblings().removeClass('active'); 
});
  </script>

[Fulgore]

Autant pour moi c'est bon ça fonctionne, c'était mon code corps qui ne contenait pas la bonne modif...

[domoggvad]

Super tuto, et super travail, comme d'habitude winhex..
Merci

[Almy]

Bonjour,

Je voudrais, lorsque je lance un scenario d'ouverture du portail que le visuel scroll à la section 7 pour m'afficher les cameras.
Je pensais ajouter dans le scenario un bloc : code, et coller la ligne suivante :

<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=66&fullscreen=1#section7'">
</a></li>

Mais ce ne dois pas etre aussi simple car ca ne marche pas. (vous aurez compris que je ne sais pas coder mais juste faire du copier coller

Auriez-vous une idée de comment faire ou du code à ajouter au scenario.

Merci