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 :)

Toute la communauté vous remercie

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

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

Message par winhex » 09 déc. 2018, 18:49

bonjour
1 = je ne comprends pas,
je comprends la difficulté de se faire comprendre :D
2 = tes design on un numéro : id
lorsque tu click sur un design, dans la barre d'adresse tu as un numéros
dans le code remplacé le 4 par un design de ton choix

en reprenant le sujet depuis le début des questions/réponses tu devrais (peut etre) retrouvé la solution

Micramaniac
Timide
Messages : 211
Inscription : 17 oct. 2017, 11:22

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

Message par Micramaniac » 19 déc. 2018, 08:18

@Winhex
je suis en train de refaire complètement mon design.
J'ai opté pour ton travail à partir d'ancre sur un même design. Beaucoup plus réactif (beau travail au passage).

Est-il possible de bloquer le défilement du design un peu comme tu as supprimé les srcollbar.
Je m'explique.
Sur ma tablette, si je fais défiler vers le bas, je passe manuellement les différents chapitres. Je souhaite contraindre l'utilisateur à passer par le menu pour naviguer.
Je ne sais pas si je suis clai

EDIT:
si ce n'est pas possible de bloquer le défilement vers le bas.
Serait-il possible de créer les chapitres vers la droite plutôt que vers le bas?? de façon à aller dans le même sens que la barre de menu

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

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

Message par winhex » 19 déc. 2018, 17:13

j ai compris le soucis qui normalement ne dois pas avoir lieu

j ai un peu oublié se que j'ai fait se soir je te mettrai les codes

par contre j ai pas compris ta solution de rechange

récapitulatif
on a un design À "parent" avec menu

chaque icône du menu dirige sur design B ou C,.. "enfant"
mais ça peut être une annexe de B donc B1 B2

pour aller plus loin
sur B4 un menu "vertical" qui pointe sur un autre design Z "autre enfant donc petit fils :D

parent/enfant/enfant
A/B4/Z qui fait 3 design

Z = design pou 4 rubrique de B4)

t'inquiète pas je m'y perd aussi

Après pour tablette dans le sujet les concernant il existe une autre façon
1 design pour toutes les pages
Pièces jointes
20181219_171013.jpg
20181219_171013.jpg (469.37 Kio) Consulté 528 fois

Micramaniac
Timide
Messages : 211
Inscription : 17 oct. 2017, 11:22

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

Message par Micramaniac » 19 déc. 2018, 18:04

Mais c'est trop fort!!! :shock:
Je comprends le principe des design enfant, même si je ne vois pas encore bien comment faire.
Comment tu fais pour les icônes (la forme surtout, pas l'icône en lui-même) les couleurs de fonds et la police de caractère, en fait toute la partie graphique du design???
Super boulot! Tu t'appuies sur quoi pour le code?

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

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

Message par winhex » 19 déc. 2018, 20:56

le code c'est du copier coller de trucs mis de côté est adapter (inspiration mélange de vieux menu de jeux,film,..)
avant la mode du flat glossy/fade,...

c'est que du code html
tu étires,..

et l'idée de le mettre en menu

ex celui la

Code : Tout sélectionner

 <div>
<style>

.glass3 {
  position: relative;

  outline: none;
  border: none;
  background: rgba(0, 0, 0, .12);
  width: 100%;
  height: 50px;
  border-radius: 33px;
  box-shadow: inset 0 -1px rgba(255, 255, 255, .5), inset 0 5px 5px rgba(0, 0, 0, .4);
  text-align: left;
  text-shadow: 0 1px 0 #000;
  padding-left: 30px;
}



  </style>  

</div>

<! http://codepen.io/RicardoTormo/pen/JzDsL >
<div class="well glass3 col-sm-9" style="width: 100%; height: 100%;">
  <div class="panel-group" role="tablist" aria-multiselectable="true" style="height: 100%;">

  </div>
</div>

il existe des sites pour creation

un fond d'écran, menu et séparateur
et tu as le squelettes qui est déjà plaisant à regarder
Pièces jointes
20181219_205355.jpg
20181219_205355.jpg (265.1 Kio) Consulté 505 fois
Screenshot_20181219-204905_Chrome.jpg
Screenshot_20181219-204905_Chrome.jpg (53.73 Kio) Consulté 505 fois

djmartinez_
Timide
Messages : 5
Inscription : 19 nov. 2018, 18:07
Contact :

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

Message par djmartinez_ » 20 déc. 2018, 07:34

Merci Winhex pour ce magnifique travail ! J'ai un compte développeur sur google play, et je me disait qu'en y faisant une petit appli et différent design, on pourrait arriver a une appli jeedom vraiment sympa, et très très customizable !
Peut on créer un widget sur le market pour des designs ?
Je ne sais pas si ce projet t'intéresse , mais ce serait une compilation de tout ton travail de design en amont !!
Martin - Créateur de Bidouille2geek.fr

Micramaniac
Timide
Messages : 211
Inscription : 17 oct. 2017, 11:22

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

Message par Micramaniac » 20 déc. 2018, 08:49

Encore merci pour tes explications Winhex.
Ca commences à rentrer.
Si tu peux regarder le code pour empêcher le défilement vers le bas et limiter la navigation avec le menu ce serait super cool.
Question subsidiaire, c'est quoi la police que tu utilises ici :
Font.JPG
Font.JPG (10.35 Kio) Consulté 477 fois

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

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

Message par winhex » 20 déc. 2018, 16:12

la plus rapide l'horloge la police est différente du chiffre ou lettre

Code : Tout sélectionner

@font-face {
    font-family: 'letters';
 src: url(http://junesiphone.com/WebFonts/Building_Typeface.ttf);
}
@font-face {
    font-family: 'numbers';
    src: url(http://junesiphone.com/WebFonts/Dense-Regular.otf);
}


le code actuel

Code : Tout sélectionner

<! http://codepen.io/alldrops/pen/WQBgOg >
<div style="min-width:150px;min-height:60px;" class="cmd tooltips cmd-widget" data-type="info" data-subtype="string" data-cmd_id="#id#">

  <center>
<div class="wrapper">
  	<div id="month" class="center month"></div>
	  <div id="dates">
    		<div id="date" class="date"></div>
    		<div id="year" class="year"></div>
		    <div id="day" class="day"></div>
	  </div>
  	  <div id="clock" class="center clock"></div>
</div>
    </center>
<script>

     var language = window.navigator.language;
if (language.length > 2) {
    language = language.split('-');
    language = language[0];
}

//language = "fr"; // manually set language

if (language === "en") {
    var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
} else if (language === "cz") {
    var weekday = ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota"];
    var month = ["Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad", "Prosinec"];
} else if (language === "it") {
    var weekday = ['Domenica', 'Luned&#236', 'Marted&#236', 'Mercoled&#236', 'Gioved&#236', 'Venerd&#236', 'Sabato'];
    var month = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
} else if (language === "sp") {
    var weekday = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
    var month = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
} else if (language === "de") {
    var weekday = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
    var month = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Ju li", "August", "September", "Oktober", "November", "Dez ember"];
} else if (language === "fr") {
    var weekday = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
    var month = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aôut", "Septembre", "Octobre", "Novembre", "Décembre"];

} else if (language === "zh") {
    var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var month = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
} else {
    var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
}

(function clock() {
    "use strict";
    var adjDay, twentyfour, currentTime, currentHours, currentMinutes, mnth, day, oday, year, dat;
    twentyfour = false; ///set twentyfour here.
    adjDay = function (day, daynum) {
        var offset, doffset, left;
        switch (day.length) {
        case 6:
            offset = "0px";
            doffset = "1px";
            left = "-1px";
            break;
        case 7:
            offset = "0px";
            doffset = "0px";
            left = "-1px";
            break;
        case 8:
            offset = "2px";
            doffset = "0px";
            left = "-4px";
            break;
        case 9:
            offset = "3.5px";
            doffset = ".1px";
            left = "-6px";
            break;
        default:
            offset = "0px";
            doffset = "0px";
            left = "0px";
        }
        if (daynum === 1) {
            offset = "1px";
            left = "-2px";
        }
        if (daynum === 5) {
            doffset = "1.5px";
        }
        if (daynum === 6) {
            left = "-4px";
            offset = "2px";
            doffset = ".1px";
        }
        document.getElementById('year').style.letterSpacing = offset;
        document.getElementById('day').style.letterSpacing = doffset;
        document.getElementById('dates').style.left = left;
    };

    currentTime = new Date();
    currentHours = currentTime.getHours();
    currentMinutes = currentTime.getMinutes();
    currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
    mnth = currentTime.getMonth();
    dat = currentTime.getDate();
    day = currentTime.getDay();
    oday = (dat < 10 ? "0" : "") + dat;
    year = currentTime.getFullYear();



    document.getElementById('clock').innerHTML = currentHours + ":" + currentMinutes;
    document.getElementById('month').innerHTML = month[mnth];
    document.getElementById('date').innerHTML = oday;
    document.getElementById('day').innerHTML = weekday[day];
    document.getElementById('year').innerHTML = year;

    adjDay(weekday[day], day);
    setTimeout(function () {
        clock();
    }, 30000);
}());
</script>
     <meta charset="UTF-8">
<style>

.center{
  width: 52px;
  position: absolute;
  text-align: center;
}
.clock{
    color:#eeeeee;
      font-family: 'numbers';
  -webkit-font-smoothing: antialiased;
  width: 250px; 
  height: 10px;
  top:-18px;
  font-size: 70px;
}
.month{
  color: #eeeeee;
  -webkit-font-smoothing: antialiased;
  top:0px;
  font-size: 25px;
  font-family: 'letters';
  font-weight: 200;
  text-transform: uppercase;
}
.date{
    color:#eeeeee;
    font-family: 'numbers';
  -webkit-font-smoothing: antialiased;
  position: absolute;
  width: 25px;
  text-align: right;
  font-size: 40px;
  top:13px;
}
.year{
    color:#eeeeee;
    font-family: 'numbers';
  -webkit-font-smoothing: antialiased;
  position: absolute;
  width: 160px;
  text-align: left;
  left:30px;
  font-size: 20px;
  top:34px;
}
.day{
  color:#eeeeee;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  width: 160px;
  text-align: left;
  left:30px;
  font-size: 15px;
  top:23px;
  font-family: 'letters';
  letter-spacing: 0;
  text-transform: uppercase;
}
#dates{
    position: relative;
}

@font-face {
    font-family: 'letters';
 src: url(http://junesiphone.com/WebFonts/Building_Typeface.ttf);
}
@font-face {
    font-family: 'numbers';
    src: url(http://junesiphone.com/WebFonts/Dense-Regular.otf);
}      
  </style>
</div>
un virtuel info autre avec rien en valeur

certains on eu des soucis heure et mise en forme (je ne m'en souviens plus)
il est là
viewtopic.php?f=29&t=16181&hilit=http%3 ... 40#p391125

---

pour parent / enfant / petit enfant je le ferai se soir

Micramaniac
Timide
Messages : 211
Inscription : 17 oct. 2017, 11:22

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

Message par Micramaniac » 20 déc. 2018, 16:48

Encore merci Winhex.
Ca commences à rentrer.
J'attends avec impatience le ton code pour le défilement vers le bas.

Micramaniac
Timide
Messages : 211
Inscription : 17 oct. 2017, 11:22

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

Message par Micramaniac » 22 déc. 2018, 10:55

Salut Winhex,
J'ai essayé d'utiliser un menu parent/enfant/parent mais j'ai un soucis.
J'ai créé 3 designs A,B,C
B est l'enfant de A
Dans B j'ai créé un menu qui fait appel au design C
Quand je suis sur le design A et que je clique le menu qui fait appel à C, la page se décale et remonte C en haut de la page

Exemple
mon design ressemble à ça
Avant_clic.PNG
Avant_clic.PNG (37.74 Kio) Consulté 406 fois
Et lorsque je clique par exemple sur le bouton avec l'icone 2 personnes
mon design remontre comme ça
Après_clic.PNG
Après_clic.PNG (26.84 Kio) Consulté 406 fois
J'ai essayé de modifié plein de chose mais impossible de trouver le bon paramètre
Merci d'avance pour ton aide

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

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

Message par winhex » 22 déc. 2018, 14:14

je pars du petit fils
290x2400
son nom 0_design_portable_conso
url http://10.1.14.65/index.php?v=d&p=plan&plan_id=30
petit fils.txt
(2.15 Kio) Téléchargé 19 fois
du design enfant id 3
un html
menu sur petit fils.txt
(3.6 Kio) Téléchargé 17 fois
le design enfant id 3
290x12800
son nom 0_design_portable
urll http://10.1.14.65/index.php?v=d&p=plan&plan_id=3
enfant.txt
(8.77 Kio) Téléchargé 15 fois

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

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

Message par winhex » 22 déc. 2018, 14:15

le design parent id 18
360x650
son nom 0_menu_vertical_portable
url http://10.1.14.65/index.php?v=d&p=plan&plan_id=18
parent.txt
(13.39 Kio) Téléchargé 12 fois

on peur voir dans le menu petit fils
un noscroll

si dans se menu tu ne peux pas scroller c'est ca
sinon dans le fils (une autre méthode pour apple)

Micramaniac
Timide
Messages : 211
Inscription : 17 oct. 2017, 11:22

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

Message par Micramaniac » 22 déc. 2018, 14:53

Ce que tu m’a envoyé fonctionne chez moi.

Je pense que mon problème vient du fait que toi tu as un design parent avec un menu vertical qui appelle un design fils qui a un menu horizontal.
Je cherche à faire l’inverse un design parent avec un menu horizontal qui appelle un design fils avec un menu vertical.
Je pense que mon problème est lié à la taille du design fils et aux marges.
Étant sur un tablette je suis en mode paysage et toi portrait sur le téléphone.
Je vais comparer les codes ce soir.
Merci pour ton explication détaillée

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

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

Message par winhex » 22 déc. 2018, 15:32

le petit carrée en haut à gauche design du fils
20181222_153328.jpg
20181222_153328.jpg (79.92 Kio) Consulté 376 fois
vieux reste
pour effacé la barre de scroll et ancre (début de page

Code : Tout sélectionner

<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>
pour tes recherches
scroll déplacement vertical
swipe // horizontal

dans le sujet concernant les tablettes (pascal) interdit le swipe
remonte le fils de conversation
viewtopic.php?f=25&t=5879&hilit=tablett ... 80#p656964

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

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

Message par Almy » 22 déc. 2018, 18:13

tom62490 a écrit :
30 oct. 2018, 23:33
Bonjour a tous,
@guims78 pour mettre des images à la place des couleurs de fond dans le design arlequin, il faut remplacer "background-color: #1e88e5" par "background-image: url(./montheme/images/fond_ecran.jpg)" en remplacant le chemin bien sur.

Est ce qu'il serait possible de transformer le menu vertical pour qu'il devienne un menu accordéon tout en gardant la même forme ?
J'ai essayé d'adapter le code mais sans résultat ( je n'ai pas assez de connaissance en codage)
merci
Salut Tom

J'essaye de changer le fond arlequin de la section 3 par une image.
Je dois avoir une erreur dans la syntaxe car elle ne s'affiche pas.
Vois tu ou est le pb ?
background.jpg
background.jpg (74.83 Kio) Consulté 358 fois
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.

Micramaniac
Timide
Messages : 211
Inscription : 17 oct. 2017, 11:22

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

Message par Micramaniac » 22 déc. 2018, 18:55

Enlève le ; après jpg et fais attention à la casse

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

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

Message par Almy » 22 déc. 2018, 23:55

Bon visiblement il n doit pas avoir que le ; car ca ne s'affiche toujours pas.
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.

Micramaniac
Timide
Messages : 211
Inscription : 17 oct. 2017, 11:22

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

Message par Micramaniac » 23 déc. 2018, 00:36

D'après ce que tu as mis il manque url(./XXXXXX)

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

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

Message par Almy » 23 déc. 2018, 10:44

A oui de suite ça marche bien mieux

Merci et l’aide et le super boulot
Dernière édition par Almy le 24 déc. 2018, 15:44, édité 1 fois.
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.

Micramaniac
Timide
Messages : 211
Inscription : 17 oct. 2017, 11:22

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

Message par Micramaniac » 24 déc. 2018, 10:13

Salut Winhex,
Mon design tablette commence a prendre forme.
Mon soucis était bien lié à la taille des design.
En fait j'essayais de mettre un petit menu de 300px de côtés mais ca ne fonctionne pas. Les design parent enfant et petit-enfant doivent avoir la même taille. Comme ca, les design ne remonte plus.
PAr contre impossible de bloquer le scroll vertical. Je ne trouve pas malgré le lien

Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

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