[tuto] Design - menu slide - corps scroll
Re: [tuto] Design - menu slide - corps scroll
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
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
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [tuto] Design - menu slide - corps scroll
@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
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
Re: [tuto] Design - menu slide - corps scroll
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
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
- Pièces jointes
-
- 20181219_171013.jpg (469.37 Kio) Consulté 2650 fois
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [tuto] Design - menu slide - corps scroll
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?
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?
Re: [tuto] Design - menu slide - corps scroll
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
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
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>
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 (265.1 Kio) Consulté 2627 fois
-
- Screenshot_20181219-204905_Chrome.jpg (53.73 Kio) Consulté 2627 fois
-
- Timide
- Messages : 6
- Inscription : 19 nov. 2018, 18:07
- Contact :
Re: [tuto] Design - menu slide - corps scroll
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 !!
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
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [tuto] Design - menu slide - corps scroll
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 :
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 :
Re: [tuto] Design - menu slide - corps scroll
la plus rapide l'horloge la police est différente du chiffre ou lettre
le code actuel
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
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ì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', '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>
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
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [tuto] Design - menu slide - corps scroll
Encore merci Winhex.
Ca commences à rentrer.
J'attends avec impatience le ton code pour le défilement vers le bas.
Ca commences à rentrer.
J'attends avec impatience le ton code pour le défilement vers le bas.
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [tuto] Design - menu slide - corps scroll
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 Et lorsque je clique par exemple sur le bouton avec l'icone 2 personnes
mon design remontre comme ça J'ai essayé de modifié plein de chose mais impossible de trouver le bon paramètre
Merci d'avance pour ton aide
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 Et lorsque je clique par exemple sur le bouton avec l'icone 2 personnes
mon design remontre comme ça J'ai essayé de modifié plein de chose mais impossible de trouver le bon paramètre
Merci d'avance pour ton aide
Re: [tuto] Design - menu slide - corps scroll
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 du design enfant id 3
un html 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
290x2400
son nom 0_design_portable_conso
url http://10.1.14.65/index.php?v=d&p=plan&plan_id=30 du design enfant id 3
un html 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
Re: [tuto] Design - menu slide - corps scroll
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
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)
360x650
son nom 0_menu_vertical_portable
url http://10.1.14.65/index.php?v=d&p=plan&plan_id=18
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)
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [tuto] Design - menu slide - corps scroll
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
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
Re: [tuto] Design - menu slide - corps scroll
le petit carrée en haut à gauche design du fils
vieux reste
pour effacé la barre de scroll et ancre (début de page
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
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>
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
Re: [tuto] Design - menu slide - corps scroll
Salut Tomtom62490 a écrit : ↑30 oct. 2018, 23:33Bonjour 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
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 ?
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.
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [tuto] Design - menu slide - corps scroll
Enlève le ; après jpg et fais attention à la casse
Re: [tuto] Design - menu slide - corps scroll
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.
MERCI À VOUS TOUS (JEEDOM et forum) pour votre aide sans laquelle je ne serais pas là où j'en suis.
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [tuto] Design - menu slide - corps scroll
D'après ce que tu as mis il manque url(./XXXXXX)
Re: [tuto] Design - menu slide - corps scroll
A oui de suite ça marche bien mieux
Merci et l’aide et le super boulot
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.
MERCI À VOUS TOUS (JEEDOM et forum) pour votre aide sans laquelle je ne serais pas là où j'en suis.
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [tuto] Design - menu slide - corps scroll
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
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
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 13 invités