Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Le groupe des Helpers est present pour vous aidez, n'hésitez pas à poser des questions ;)

Toute la communauté vous remercie

/!\ L’ancien forum passera en lecture seule en janvier 2020./!\
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

[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 : 3754
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 05 févr. 2019, 10:38

beaucoup plus simple
<a href="#section4" style="text-decoration : none;">

exemple le résumé luminaires
qui fait changé la couleur de l'icône menu lors d'un changement

si je clic sur l'icône du résumé
je me retrouve section4

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="#section4" 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 jeedom2-bulb14" style="color:#e6e6e6;"</i>');  
 $('.LumIcon', window.parent.document).empty().append('<i class="fa jeedom2-bulb14 fa-2x" style="color:#e6e6e6;"</i>');;
    $('.LumNumb', window.parent.document).empty().append("").css('color','#e6e6e6'); // page enfant
//   $('.LumNumb', window.parent.document).removeClass(); // page enfant "addclass pour value 1"
//    $('.LumNumb', window.parent.document).empty().append(_options.display_value).css('color','#e6e6e6'); // page enfant
//     $('.LumNumb').empty().append(_options.display_value).css('color','#e6e6e6'); // même page

}else if (_options.display_value >= 1 ) { 
  $(".state#id#").css('color', '#FFC107');
   $(".iconCmd#id#") .empty().append('<i class="fa jeedom2-lightbulb58" style="color:#FFC107;"</i>');  
 $('.LumIcon', window.parent.document).empty().append('<i class="fa jeedom2-lightbulb58 fa-2x" style="color:#FFC107;"</i>');;
   $('.LumNumb', window.parent.document).empty().append(_options.display_value).css('color','#FFC107'); // page enfant
//     $('.LumNumb').empty().append(_options.display_value).css('color','#FFC107'); // même page
}
  //

}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
en personnalisation avancé
code - design

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

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

Message par Almy » 05 févr. 2019, 10:53

Je mets la ligne de code dans un bloc code du scénario ?
Comme ca ?
Nouvelle image bitmap.jpg
Nouvelle image bitmap.jpg (28.25 Kio) Consulté 1201 fois
Lorsque je lance le scénario, le visuel reste sur la page principale et ne scroll pas en page 7
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.

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

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

Message par Vins222 » 08 févr. 2019, 17:24

scotty92fr a écrit :merci Winhex,
L'exemple que tu as préparé comporte le même problème et je n'ai pas réussi a transposer les 2 autres solutions.

Par contre, j'ai réussi à résoudre le problème. il faut rajouter au style de la page "DESIGN Corps Arlequin"

Code : Tout sélectionner

 
 @supports (-webkit-overflow-scrolling: touch) {
	  /* CSS specific to iOS devices */
      html, body {
      height: 100%;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
	}
Le design s'affiche et fonctionne correctement, tu pourrais peut-être le rajouter dans le fichier debut.txt de ton magnifique Tuto 8-)

Un grand merci pour ton aide.
@+ Scotty92fr

@Scotty, arriverais tu à me dire comment tu as fais pour passer le design sous iOS !?

Merci d’avance !


Envoyé de mon iPhone en utilisant Tapatalk

GuillaumeDieppe
Actif
Messages : 630
Inscription : 27 janv. 2017, 10:53

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

Message par GuillaumeDieppe » 26 févr. 2019, 00:50

Bonsoir,

Je manque de compétence pour adapter cette bonne idée à mon projet.
Du coup j'ai créé une page par onglet, donc 9 design sur lesquels j'ai copié collé un élément "texte/html" avec le code ci dessous :

Code : Tout sélectionner

<a href="https://xxxxxxxx.dns1.jeedom.com/index.php?v=d&p=plan&plan_id=8"><img src="https://i.imgur.com/xPC1sQE.png"/></a><br>
<a href="https://xxxxxxxx.dns1.jeedom.com/index.php?v=d&p=plan&plan_id=9"><img src="https://i.imgur.com/MUx29uT.png"/></a><br>
<a href="https://xxxxxxxx.dns1.jeedom.com/index.php?v=d&p=plan&plan_id=10"><img src="https://i.imgur.com/1XWfJKD.png"/></a><br>
<a href="https://xxxxxxxx.dns1.jeedom.com/index.php?v=d&p=plan&plan_id=11"><img src="https://i.imgur.com/aI2vQJh.png"/></a><br>
<a href="https://xxxxxxxx.dns1.jeedom.com/index.php?v=d&p=plan&plan_id=12"><img src="https://i.imgur.com/42JOkWC.png"/></a><br>
<a href="https://xxxxxxxx.dns1.jeedom.com/index.php?v=d&p=plan&plan_id=13"><img src="https://i.imgur.com/4LYCv7g.png"/></a><br>
<a href="https://xxxxxxxx.dns1.jeedom.com/index.php?v=d&p=plan&plan_id=14"><img src="https://i.imgur.com/qGsNHgR.png"/></a><br>
<a href="https://xxxxxxxx.dns1.jeedom.com/index.php?v=d&p=plan&plan_id=15"><img src="https://i.imgur.com/T8opvBb.png"/></a><br>
<a href="https://xxxxxxxx.dns1.jeedom.com/index.php?v=d&p=plan&plan_id=16"><img src="https://i.imgur.com/Qc2yKHM.png"/></a>
Si je mettais l'adresse locale, à chaque clic en dehors de chez moi cela ne fonctionnerait pas, d'où les adresses des design en DNS
mais du coup les temps de chargement sont trop longs...

Comment faire pour qu'automatiquement à chaque clic, par défaut ce soit les adresses en local, et si je charge ma page Jeedom en DNS ce soit les liens DNS ?
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis

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

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

Message par winhex » 26 févr. 2019, 06:54

simple tu remplaces ton adresse par rien
exemple lien dashboard

Code : Tout sélectionner

<a href="index.php?v=d&p=dashboard"></a>
viewtopic.php?t=39983

pour gagner un peu du temps de latence via cette methode

regarde le sujet de prez design tu as des trucs simple

<a onClick="planHeader_id=3; displayPlan();"><li class="selected"><div class="imagette"><img src="perso/design/images/icon_chauffage.png" height=50px width=50px></div></br></li></a>

il y a se tuto aussi (pas essayé)
viewtopic.php?f=25&t=43549&p=701145&hil ... FS#p701145

GuillaumeDieppe
Actif
Messages : 630
Inscription : 27 janv. 2017, 10:53

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

Message par GuillaumeDieppe » 26 févr. 2019, 14:10

Top merci winhex !!
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis

Avatar de l’utilisateur
ThrashER187
Timide
Messages : 49
Inscription : 31 mars 2018, 20:38

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

Message par ThrashER187 » 09 mars 2019, 16:24

Bonjour à tous et merci winhex pour ton partage

Je suis entrain de refaire mon menu et je trouve le menu numéro 1 celui-ci vraiment très bien

Code : Tout sélectionner

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

.cbp-vimenu {
    width: 75px;
    height: 660px;
  
 	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;
	height: 100%;
  	margin: 0;
	padding: 0;

  background-color: #232a31;
    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 1.5em;
  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%;

}

.Badge { 
font-family: 'Roboto-Regular';
position:absolute;
font-size: 15px;
     top:-15px;
left: 50px;
}
     #iframe_a 
{
    background: white;
    border:1px solid gray;
    border-top: none;
//    height:500px;
    width:80%;
    padding:0;
    margin-left:70px;
    left:0;
    top:0;	
}
    
  </style>
  </head>
<iframe style="border:none;"id="iframe_a" height="625px" frameBorder="0" scrolling="no" src="index.php?v=d&p=plan&plan_id=3&fullscreen=1"></iframe>
<ul class="cbp-vimenu">
  <li><a href="index.php?v=d&p=plan&plan_id=18"><span class="fa maison-home63 fa-2x"></span></a></li>

 <!-- Résumés -->
<li class="active"><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section1'"><span class="fa fa-table fa-2x"></span></a></li>

  <!-- 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>
  
 <!-- Extérieures -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section3'">
<span style="position: relative;right:3px;bottom:5px" class="fa jeedom-portail_ferme fa-lg"></span>
</a></li> 

  <!-- luminaires -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section4'">
 <span class="LumIcon"><i class="fa jeedom2-bulb14 fa-2x"></i></span>
 <span class="LumNumb Badge"></span>
</a></li>
  
  <!-- On / Off -->
<!-- la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section5'"><span class="fa icomoon-fan_1 fa-lg" style="position: relative;top: -3px;"></span></a></la -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section5'">
<span class="OnOffIcon"><i class="fa fa-power-off fa-2x"></i></span>
<span class="OnOffNumb Badge"></span>
</a></li>
  
<!-- Chauffages nature-fire14 jeedom-thermometre -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section20'">
<span class="fa fa-thermometer-three-quarters fa-2x"></span>
</a></li>
<!-- Volet Roulant -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section6'">
<span class="fa jeedom-volet-ferme fa-2x"></span>
</a></li>
<!-- 8 Consommation  
techno-courbes2
jeedom2-bitcoin
-->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section8'">
<span class="fa jeedom2-money2 fa-2x"></span>
</a></li>
<!-- 9 surveillance -->  
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section9'">
<span class="fa jeedom-surveillance1 fa-2x"></span>
</a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=1&fullscreen=1'"><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>
Mais le menu est à la vertical et il possible d'avoir ce même menu mais à l'horizontal ?? car j'ai essayer de décortiquer le code mais vu mes faile connaissance en code je galère

merci :)

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

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

Message par winhex » 09 mars 2019, 18:43

je suis dessus (hier) pour ma tablette en gardant le vertical (mode recopie du code html menu pour plusieurs design)
j aurai un soucis à régler pointer sur le menu dépassant la page du scroll (exemple icône 11 pour design 11 actif et visible) baste (un soucis après l'autre)

mais l'horizontale la méthode diffère car c'est un swipe qui differe d'un scroll
je regarderai

le code du html simple (brut)

Code : Tout sélectionner

<!-- 
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_vertical_menu_scroll
https://www.w3schools.com/howto/howto_js_vertical_tabs.asp
https://tympanus.net/codrops/2013/03/05/vertical-icon-menu/
 https://codepen.io/pablop76/pen/bBRmQz?limit=all&page=7&q=menu+vertical
-->

  <head>
  <style>
::-webkit-scrollbar {
    display: none; 
}
.cbp-vimenu {
/*    width: 90px;
    height: 30px;
 */ 
 	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;
	height: 100%;
  	margin: 0;
	padding: 0;
/* background-color: rgba(0,0,0,0.5); 232a31 */
  background-color: transparent;
    overflow-y: auto;
  	list-style-type: none;
}

/* 

    */
.cbp-vimenu li a {
  	position: relative;
    	display: block;
	height: 6em;
	width: 6em;
  	text-align: center;

     	line-height: 5em;
      text-decoration: none;
top:35px;
  padding:.75em 1.5em;
  border-radius:.75em;
margin-top: .1em;
  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: rgba(0,0,0,0.5); */
	background: #47a3da;  /* 47a3da  232c2a*/
  	color: #999;

}
.cbp-vimenu li a:hover,
.cbp-vimenu li.active a{
background: rgba(0,0,0,0.3);
  	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%;

}

/* Example for media query (depends on total height of menu) 
@media screen and (max-height: 34.9375em) { 
	.cbp-vimenu {
		font-size: 70%;
	}
}*/
    /* pour badge menu */
.Badge { 
font-family: 'Roboto-Regular';
position:absolute;
font-size: 15px;
     top:-15px;
left: 50px;
  
    /*
  https://codepen.io/dodozhang21/pen/CHfip?limit=all&page=2&q=badge
  https://codepen.io/tutsplus/pen/JdLzRv?limit=all&page=3&q=badge
  https://codepen.io/nikazawila/pen/IycfH?limit=all&page=2&q=badge
   top: -1px;
  right: 1px;
  
    min-width: 8px;
  height: 20px;
  line-height: 20px;
  margin-top: -11px;
  padding: 0 6px;
  font-weight: normal;
  color: white;
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, 0.2);
  background: #e23442;
  border: 1px solid #911f28;
  border-radius: 11px;
  background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
  background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
  background-image: -o-linear-gradient(top, #e8616c, #dd202f);
  background-image: linear-gradient(to bottom, #e8616c, #dd202f);
  -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
  */
}
.pos { 
position: relative;
  top:5px;

    }
  </style>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>   
  </head>

<ul class="cbp-vimenu">
  <!--  <li><a href="index.php?v=d&p=plan&plan_id=18"><span class="fa maison-home63 fa-2x"></span></a></li>
  -->
<li><a ondblclick='window.location.reload(false)' onclick="planHeader_id=10; displayPlan();"><span class="pos fa maison-home63 fa-3x"></span></a></li>

 <!-- Résumés 
<li class="active"><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section1'"><span class="fa fa-table fa-2x"></span></a></li>
-->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section7'">
<span class="pos fa fa-table fa-3x"></span>
  </a></li>

  <!-- presence  -->
<li class="active"><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section2'">
  <span class="PrezIcon"><i class="pos fa personne-toilet1 fa-3x"></i></span>
  <span class="PrezNumb Badge"></span>
  </a></li>
  
 <!-- Extérieures -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section3'">
<span style="position: relative;right:5px;top:0px;" class="pos fa jeedom-portail_ferme fa-2x"></span>
</a></li> 

  <!-- luminaires -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section4'">
 <span class="LumIcon"><i style="position: relative;top:5px;" class="fa jeedom2-bulb14 fa-3x"></i></span>
 <span class="LumNumb Badge"></span>
</a></li>
  
  <!-- On / Off -->
<!-- la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section5'"><span class="fa icomoon-fan_1 fa-lg" style="position: relative;top: -3px;"></span></a></la -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section5'">
<span class="OnOffIcon"><i style="position: relative;top:5px;" class="fa fa-power-off fa-3x"></i></span>
<span class="OnOffNumb Badge"></span>
</a></li>
  
<!-- Chauffages nature-fire14 jeedom-thermometre -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section20'">
<span class="fa fa-thermometer-three-quarters fa-3x"></span>
</a></li>
<!-- Volet Roulant -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section6'">
<span class="fa jeedom-volet-ferme fa-2x"></span>
</a></li>
<!-- 8 Consommation  
techno-courbes2
jeedom2-bitcoin
-->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section19'">
<span class="fa jeedom2-money2 fa-2x"></span>
</a></li>
<!-- 9 surveillance -->  
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=34&fullscreen=1'">
<span class="fa jeedom-surveillance1 fa-2x"></span>
</a></li>
  <!-- 10 scénarios -->  
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section18'">
<span class="fa fa-cogs fa-2x"></span>
</a></li>
<!-- bas -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=1&fullscreen=1'"><span class="icon circle-icon glyphicon glyphicon-chevron-down"></span></a></li>
<!-- modal -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=1&fullscreen=1'">
  <img style="position: relative;left:14px;top:-12px;" src="/core/img/logo-jeedom-sans-nom-blanc.svg" height=32 width=32 />
  </a></li>

</ul>


                <script>
      $('.cbp-vimenu li').on('click', function() {
  $(this).addClass('active').siblings().removeClass('active'); 
});
                      $(function() {
        $('#myModal').someDialogPlug({ some: options });
    })
  </script>

Pièces jointes
Screenshot_20190309-184438_Chrome.jpg
Screenshot_20190309-184438_Chrome.jpg (204.74 Kio) Consulté 980 fois

Avatar de l’utilisateur
ThrashER187
Timide
Messages : 49
Inscription : 31 mars 2018, 20:38

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

Message par ThrashER187 » 10 mars 2019, 11:01

merci winhex

Le code brut est pas mal aussi, j'ai put faire des modif en changeant les icones...

JBLSteeve
Timide
Messages : 100
Inscription : 30 juin 2014, 22:07

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

Message par JBLSteeve » 05 mai 2019, 14:19

Bonjour,

Je me permets de venir vers vous, j'avais une solution pour avoir les icônes dans le menu (répétitif) , mais avec la modification des widget cela ne fonctionne plus. Vous avez le même problème ?
Merci
winhex a écrit :
29 déc. 2018, 00:18
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
Jeedom stable sur Odroid C2
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C

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

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

Message par winhex » 05 mai 2019, 21:54

bonjour
le code utilise le pour faire un widget
et si ca marche pas il y a encore une autre possibilité (principe selon design plus bas)

--

moi je suis partis sur autre chose
inspirant -> inspirer

viewtopic.php?f=50&t=1182&hilit=design& ... 20#p704978

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

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

Message par winhex » 08 mai 2019, 17:10

Vins222 a écrit :
08 févr. 2019, 17:24
scotty92fr a écrit :merci Winhex,
L'exemple que tu as préparé comporte le même problème et je n'ai pas réussi a transposer les 2 autres solutions.

Par contre, j'ai réussi à résoudre le problème. il faut rajouter au style de la page "DESIGN Corps Arlequin"

Code : Tout sélectionner

 
 @supports (-webkit-overflow-scrolling: touch) {
	  /* CSS specific to iOS devices */
      html, body {
      height: 100%;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
	}
Le design s'affiche et fonctionne correctement, tu pourrais peut-être le rajouter dans le fichier debut.txt de ton magnifique Tuto 8-)

Un grand merci pour ton aide.
@+ Scotty92fr

@Scotty, arriverais tu à me dire comment tu as fais pour passer le design sous iOS !?

Merci d’avance !


Envoyé de mon iPhone en utilisant Tapatalk
en faite si tu regardes dans le détail (chose que je ne peux reproduire)
il manque à la fin une paranthese "}"

des fois que !

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

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

Message par winhex » 13 mai 2019, 16:42

Almy a écrit :
05 févr. 2019, 10:22
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
en faite on va crée un paramêtre à l'url menu

Code : Tout sélectionner

http://10.1.14.29/index.php?v=d&p=plan&plan_id=38&nom=PRESENCE
celui ci sera appelé par ton scenario ou le plug clic lynk (j'ai cherché cette possibilité pour un autre besoin donc cette partie n'est pas testé )

dans le script on recupére le nom
si celui ci comporte PRESENCE lance l'iframe
desactive la class active
et si on veux ajouté le bouton active faut ajouté une class au 1er li
au lieu de

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>
mettre

Code : Tout sélectionner

  <!-- presence  -->
<li class="prez"><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>
ajjout dans le script

Code : Tout sélectionner

         // recupération paramétre URL  ex : http://10.1.14.29/index.php?v=d&p=plan&plan_id=38&nom=PRESENCE
$.urlParam = function(name){
	var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
	return results[1] || 0;
}

var test =$.urlParam('nom'); // le resultat du paramêtre nom

  if (test == "PRESENCE") {

document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section2';
      $('.cbp-vimenu li').removeClass('active'); 
$('.prez').addClass('active');
  } 

MiWa59
Timide
Messages : 88
Inscription : 25 mars 2019, 12:02

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

Message par MiWa59 » 15 mai 2019, 00:55

Merci winhex pour tout ces partages, je débute dans le design et tes explications sont très utiles !

J'ai passé la journée à chercher et tester du code pour personnaliser mon design, j'arrive à un résultat pas degeu !

Je bloque sur l'importation de code provenant de site comme freefrontend, je place un fichier CSS via jeexplorer et je mets le HTML dans le design, malheureusement ça modifie tout jeedom...
Je ne comprends pas comment"isoler" le CSS au design...

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

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

Message par winhex » 15 mai 2019, 16:01

normalement ça se cantonne au design
sûrement le cache.
je regarderai se soir.

MiWa59
Timide
Messages : 88
Inscription : 25 mars 2019, 12:02

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

Message par MiWa59 » 16 mai 2019, 10:56

Merci ! Je continue à tester de mon côté, mais n'ayant à la base aucune connaissance, j'emploie la méthode empirique pour progresser...

Avatar de l’utilisateur
Kenderv44
Timide
Messages : 55
Inscription : 07 févr. 2018, 16:21
Localisation : NANTES

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

Message par Kenderv44 » 20 mai 2019, 16:45

Bonjour,
Question hors sujet mais je ne sais pas trop où la poser : Où peut-on trouver la liste des paramètres complémentaires possibles à rajouter à l'URL de lancement de Jeedom ?
Par exemple ici "viewtopic.php?f=25&t=35100&start=100#p701856" on voit bien
v=d&p=plan&plan_id=8"><img src="https://i.imgur.com/xPC1sQE.png" le paramêtre v=d ou p=plan ou plan_id=.
Où trouver l’ensemble des ces paramètres et ce qu'ils peuvent contenir ? J'ai eu beau chercher un peu partout mais sans doute pas où il fallait.
Merci

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

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

Message par winhex » 20 mai 2019, 17:52

ça c'est un lien design que tu peux voir dans l'adresse de ton navigateur
puis f$833 a utiliser planheader_id
avec un gain d accès page
viewtopic.php?f=50&t=14863

il ny aucune doc au sujet c'est de l'examen de page, api

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

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

Message par GGR72700 » 16 sept. 2019, 16:14

Bonjour,

Je suis en train de me coller à mon design sur tablette après avoir remis cette étape a plus tard de nombreuses fois et franchement je dois dire que ceux que j'ai trouvé dans ces pages sont vraiment au top !
J'apprécie tout particulirement la première version avec le menu horizontal bien adapté à la tablette verticale (bravo Winhex!!!).

Maintenant, j'essaye de l'adapter un petit peu mais je me rends bien compte que je ne suis pas un pro du code...

Dans l'idéal j'aimerai arriver à faire une design comme le 1 avec le menu horizontal qui pointes sur une dizaine de section mais également avoir la possibilité de swiper vers la droite puis vers la gauche pour afficher d'autres pages qui proviennt du même design pour rester reactif.

En gros, l'idée serai d'avoir des sections en Y (comme dans le code inclus par WinHex) mais aussi des section en X (3 maxi je pense). bref, un genre de matrice.
Pour celà, il suffit de mettre la largeur du design à 3 ou 4x la largeur de base.
-par défaut le menu pointerai sur la section en Y
-puis on passerai sur les pages suivantes ou précdentes avec de simple bouton qui ferai un offset en X (un swipe si j'ai bien compris).

et alors le top du top serai vraiment de pouvoir glisser avec le doigt comme dans les pages d'un livre :D mais je pense qu'il ne faut pas rever quand même.

Bref, j'ai passé quelques soirée à faire de vaines tentatives donc si un pro passe par la ou a une idée, je suis preneur... :roll:

Merci à tous pour votre aide préciseuse en tout cas !

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

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

Message par winhex » 16 sept. 2019, 17:16

a cause de ca je suis a la version z :D
pour portable pour commencer (mes je suis bien motivé)
essai, ca evite les iframes donc 1 design et baste

le menu tu peux tres bien le mettre comme tu veux (maintenant que tu connais)

et un clic pour cacher/faire apparaitre le menu (par la suite) et aussi faisable

tu peux tres bien faire un design horizontal car le menu ne bougera pas (il est fixe)
ensuite je chercherai pour moi le defilement de page

pour info
dans la v z-1 via fonction tableau d'un virtuel un scroll horizontal
(on peut via bt scroll directement a la position x,y) = donc un menu liste pour tableau
slide tableau
viewtopic.php?f=30&t=45196

dernier truc fait en v z-1 (avant que je decouvre le fixe menu)
nos nav ont une memoire
donc enregistrement du clic x,y d'un menu scroll
afin de resistuer la position du menu scroll dans un autre design
je mettrai si vous le voulez (3 lignes de codes)

Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

Utilisateurs parcourant ce forum : brasletti, GGR72700, mib68 et 0 invité