[tuto] Design - menu slide - corps scroll
Re: [tuto] Design - menu slide - corps scroll
je regarderai
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [tuto] Design - menu slide - corps scroll
Merci
Je continue à chercher de mon côté
Je continue à chercher de mon côté
Re: [tuto] Design - menu slide - corps scroll
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
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
Jeedom stable sur Odroid C2
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C
Re: [tuto] Design - menu slide - corps scroll
@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
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
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [tuto] Design - menu slide - corps scroll
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
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
Re: [tuto] Design - menu slide - corps scroll
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"/>
édit : ne marche pas avec tablette (chrome) si tu ne désactive pas le zoom dans accessibilité des paramètre chrome
ça empêche le zoom
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
https://developer.mozilla.org/fr/docs/M ... a_viewportLa propriété width contrôle la taille du viewport. Elle peut être réglée à une valeur précise de pixels, comme width=600
édit : ne marche pas avec tablette (chrome) si tu ne désactive pas le zoom dans accessibilité des paramètre chrome
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [tuto] Design - menu slide - corps scroll
Merci winhex. Je teste ça dès que je rentre
Re: [tuto] Design - menu slide - corps scroll
Merci winhex, il me reste a tester pour trouver la solution la plus optimisé
Jeedom stable sur Odroid C2
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C
Re: [tuto] Design - menu slide - corps scroll
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.
Jeedom stable sur Odroid C2
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C
Re: [tuto] Design - menu slide - corps scroll
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
qu'on peut avoir sur certains site
ensuite ta plus qu'à analyse du site en question
Re: [tuto] Design - menu slide - corps scroll
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...
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>
- Pièces jointes
-
- menu.jpg (29.47 Kio) Consulté 4117 fois
Jeedom stable sur Odroid C2
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C
Re: [tuto] Design - menu slide - corps scroll
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
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)
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
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>
$('.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>
$('.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
Re: [tuto] Design - menu slide - corps scroll
Merci, je vais 'jouer' avec ca.
Jeedom stable sur Odroid C2
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [tuto] Design - menu slide - corps scroll
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.
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.
Re: [tuto] Design - menu slide - corps scroll
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)
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>
- Pièces jointes
-
- Screenshot_20190102-231754_Chrome.jpg (12.42 Kio) Consulté 4021 fois
Re: [tuto] Design - menu slide - corps scroll
merci winhex
DIY : PC ATOM X86 (DEBIAN) (Jeedom) + razpberry
RPI 2 (Jeedom) + GCE teleinfo + TTS
Tablette nexus 7 mural (IHM avec design jeedom de F$B33)
Zwave modules : 1 Greenwave multiprise, 5 FGMS-001, 3 FGK-101, 3 FGRM-222
RPI 2 (Jeedom) + GCE teleinfo + TTS
Tablette nexus 7 mural (IHM avec design jeedom de F$B33)
Zwave modules : 1 Greenwave multiprise, 5 FGMS-001, 3 FGK-101, 3 FGRM-222
Re: [tuto] Design - menu slide - corps scroll
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.
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>
Re: [tuto] Design - menu slide - corps scroll
Autant pour moi c'est bon ça fonctionne, c'était mon code corps qui ne contenait pas la bonne modif...
- domoggvad
- Actif
- Messages : 1880
- Inscription : 29 avr. 2015, 16:02
- Localisation : Seine-Saint-Denis (Villepinte)
Re: [tuto] Design - menu slide - corps scroll
Super tuto, et super travail, comme d'habitude winhex..
Merci
Merci
3 Odroid C2 (Prod - secours - test) Z83 tests: rfxcom + Z-wave- Clims DAIKIN - espeasy - thekey - Xiaomi - Telinfo - broadlink... widget V3 :viewtopic.php?f=29&t=44183&p=717810#p717810
Re: [tuto] Design - menu slide - corps scroll
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
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
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.
MERCI À VOUS TOUS (JEEDOM et forum) pour votre aide sans laquelle je ne serais pas là où j'en suis.
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 12 invités