[tuto] Design - menu slide - corps scroll

[winhex]

bonjour
1 = je ne comprends pas,
je comprends la difficulté de se faire comprendre
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]

@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]

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

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

[Micramaniac]

Mais c'est trop fort!!!
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]

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

[djmartinez_]

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

[Micramaniac]

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 (10.35 Kio) Consulté 2588 fois

[winhex]

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]

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

[Micramaniac]

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 (37.74 Kio) Consulté 2517 fois

Et lorsque je clique par exemple sur le bouton avec l'icone 2 personnes
mon design remontre comme ça

Après_clic.PNG (26.84 Kio) Consulté 2517 fois

J'ai essayé de modifié plein de chose mais impossible de trouver le bon paramètre
Merci d'avance pour ton aide

[winhex]

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é 43 fois

du design enfant id 3
un html

menu sur petit fils.txt

(3.6 Kio) Téléchargé 43 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é 37 fois

[winhex]

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é 63 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]

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]

le petit carrée en haut à gauche design du fils

20181222_153328.jpg (79.92 Kio) Consulté 2487 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]

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 (74.83 Kio) Consulté 2469 fois

Merci

[Micramaniac]

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

[Almy]

Bon visiblement il n doit pas avoir que le ; car ca ne s'affiche toujours pas.

[Micramaniac]

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

[Almy]

A oui de suite ça marche bien mieux

Merci et l’aide et le super boulot

[Micramaniac]

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