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
Répondre
scotty92fr
Timide
Messages : 262
Inscription : 07 mars 2017, 20:31

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

Message par scotty92fr » 30 déc. 2019, 21:38

Bonjour,

Peux tu afficher les codes html ? Sinon on peut pas vérifier.

Perso je n’ai eu aucun problème en passant en v4
Jeedom 4.0.35 DIY RPI3/SSD , Zwave - Rfxcom - ...
Haut
Vins222
Timide
Messages : 37
Inscription : 23 juil. 2017, 16:59

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

Message par Vins222 » 31 déc. 2019, 02:47

Bonsoir @scotty92fr,

Merci de la réponse ;)
Pour les codes html il s’agit des codes de winhex ( premier message de la discussion ) que j’ai copier coller.
J’ai juste modifier les id de page design !
Mais sinon il s’agit du code menu design / design code arlequin et enfin début. Je les met en lien au cas où...
Je voulais savoir si il s’agit d’un cas isolé ou si il n’était plus valable pour la V4.
Apparement c’est un cas isolé donc j’ai peur de devoir faire une réinstallation complet
Mais si quelqu’un trouve une solution je suis preneur !


Envoyé de mon iPhone en utilisant Tapatalk
Haut
Vins222
Timide
Messages : 37
Inscription : 23 juil. 2017, 16:59

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

Message par Vins222 » 31 déc. 2019, 02:48

Html Menu :


<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
::-webkit-scrollbar {
display: none;
}

div.scrollmenu {
height: 48px;
background-color: #232A31;
white-space: nowrap;
overflow: auto;

}
div.scrollmenu a {
color: white;
text-align: center;
padding: 18px;
border-bottom: none;
text-decoration: none;
opacity: 1;
padding-top: 15px;
}
div.scrollmenu a:hover {
border-bottom: none;
text-decoration: none;
opacity: 1;
}
la {
display: inline-block;
list-style: none;
opacity: 0.33;
font-size: 13.5px;
color: #FFFFFF;
}
la>a {
display: block;
margin-right: 0px;
color: #FFFFFF;
}
la.active,
la.active:hover {
height: calc(100% - 1px);
border-bottom: 2px solid #F87620;
opacity: 1;
}
la:hover {
border-bottom: 2px solid #F5F5F5;
height: calc(100% - 1px);
cursor: pointer;
}
iframe {
width: 1px;
min-width: 100%;
overflow:hidden!important;
}
</style>
</head>

<div>
<!-- enlever navbar-fixed-top pour redemissionage -->
<div class="scrollmenu navbar-fixed-top">

<la><a onClick="planHeader_id=4; displayPlan();"><span class="fa maison-home63 fa-lg"></span></a></la>

<la class="active"><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section1'">Résumé</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section2'"><span class="fa jeedom-mouvement fa-lg"></span></a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section3'">Extérieures</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section4'">Luminaires</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section5'">Vmc</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section6'">Chauffages</a></la>

<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section7'">7</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section8'">8</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section9'">9</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section10'">10</a></la>

<la><a onclick="document.getElementById('iframe_a').src ='index.php'">Forum</a></la>

</div>
<div id="menu-div" style="height: 660px; min-width: 100%; background-color: transparant;">
<div style="height: 100%; width: 0px; min-width: 100%; background-color: transparant;">
<iframe id="iframe_a" height="100%" width="105%" frameBorder="0" scrolling="yes" src="index.php?v=d&p=plan&plan_id=3&fullscreen=1">
</iframe>
<script type="text/javascript">
if (/iPad|iPhone|iPod/.test(window.navigator.userAgent)) { document.getElementById('iframe_a').setAttribute('scrolling', 'yes') }
if (/iPad|iPhone|iPod/.test(window.navigator.userAgent)) { document.getElementById('menu-div').style.height = "100%" }
$('.scrollmenu la').on('click', function() {
$(this).addClass('active').siblings().removeClass('active');

});
</script>
</div>
</div>
</div>


Envoyé de mon iPhone en utilisant Tapatalk
Haut
Vins222
Timide
Messages : 37
Inscription : 23 juil. 2017, 16:59

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

Message par Vins222 » 31 déc. 2019, 02:49

Html corps Arlequin :


<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
/* 1E88E5 */
#section1 {padding-top:50px;height:616px;color: #fff; background-color: #1E88E5;} /* bleue */
#section2 {padding-top:40px;height:616px;color: #fff; background-color: black;}
#section3 {padding-top:40px;height:616px;color: #fff; background-color: #673ab7;} /* violet */
#section4 {padding-top:40px;height:616px;color: #fff; background-color: #ff9800;} /* orange */
#section5 {padding-top:40px;height:616px;color: #fff; background-color: #00bcd4;} /* turquoise */
#section6 {padding-top:40px;height:616px;color: #fff; background-color: #009688;} /* bleue canard */
#section7 {padding-top:40px;height:616px;color: #fff; background-color: #FAFAFA;} /* gris */
#section8 {padding-top:40px;height:616px;color: #fff; background-color: #795548;} /* brun bleue indigo 3F51B5 */
#section9 {padding-top:40px;height:616px;color: #fff; background-color: #CDDC39;} /* citron */
#section10 {padding-top:40px;height:616px;color: #fff; background-color: #FFC107;} /* ambre */
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- navbar-fixed-top -->
<div id="section1" class="container-fluid">
<h3>Résumé</h3>
</div>
<div id="section2" class="container-fluid">
<h3>Présence</h3>
</div>
<div id="section3" class="container-fluid">
<h3>Extérieures</h3>
</div>
<div id="section4" class="container-fluid">
<h3>Luminaires</h3>
</div>
<div id="section5" class="container-fluid">
<h3>VMC</h3>
</div>
<div id="section6" class="container-fluid">
<h3>Chauffages</h3>
</div>
<div id="section7" class="container-fluid">
<h3 style="color:black;">section7</h3>
</div>
<div id="section8" class="container-fluid">
<h3>section8</h3>
</div>
<div id="section9" class="container-fluid">
<h3 style="color:black;">section9</h3>
</div>
<div id="section10" class="container-fluid">
<h3 style="color:black;">section10</h3>
</div>
</body>


Envoyé de mon iPhone en utilisant Tapatalk
Haut
Vins222
Timide
Messages : 37
Inscription : 23 juil. 2017, 16:59

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

Message par Vins222 » 31 déc. 2019, 02:50

@scotty92fr, voici le dernier code html « début »:


<div id="debut">
css/js
<style>

/* Commentaire sur une ligne
//
*/
::-webkit-scrollbar {
width: 0px!important;
display:none!important;
overflow:hidden!important;
}

</style>
<script>
$(document).ready(function () { var anchor_id = window.location.hash; if (anchor_id != "") {

var new_position = $(anchor_id).offset();
window.scrollTo(new_position.left,new_position.top);

} });
</script>
</div>


Envoyé de mon iPhone en utilisant Tapatalk
Haut
Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité