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 !

Retour haut de page dans un design

Cette partie est réservée à l'utilisation de l'interface web pour smartphone et tablettes
Répondre
arnox
Timide
Messages : 93
Inscription : 09 sept. 2018, 00:10

Retour haut de page dans un design

Message par arnox » 26 août 2019, 15:44

Salut à tous,
Je suis en train de peaufiner mon design sur la base de F$B33 comme beaucoup d’entre nous ici… Malheureusement je suis une bille en html / CSS et compagnie, alors je tâtonne… J’ai un design avec 5 onglets, tout sur la même page pour avoir une meilleure rapidité de chargement, et j’autorise le scroll vertical pour avoir accès a mes widgets mais pas l’horizontal (uniquement via les onglets en haut de page)… Voilà ma question : comment faire pour faire apparaitre une icône de retour en haut de page dès que je n’y suis plus ? J’ai trouvé de nombreux codes qui m’irait parfaitement mais je ne sais pas comment l’intégrer à mon design… Y’aurait-il des cracks html ici pour m’aider ?
Exemple de code a integrer: https://www.linuxtricks.fr/wiki/creer-u ... r-son-site

arnox
Timide
Messages : 93
Inscription : 09 sept. 2018, 00:10

Re: Retour haut de page dans un design

Message par arnox » 27 août 2019, 18:49

Personne? ou je suis dans la mauvaise section?

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

Re: Retour haut de page dans un design

Message par winhex » 27 août 2019, 20:12

bonjour
de memoire tu dois mettre une cible (haut)
cible :
tu mets un html avec une class ou div
à un endroit (celui ci peut être dans un html existant)
et en bas un autre html qui pointe dessus
le clic bouton va scroller (déplacement haut) pour se rendre à la cible (A la vitesse que tu veux ou instantané)
j'avais fait ça ici
scroll to top
viewtopic.php?f=25&t=35100

si tu regarde le script
le clic bouton
document.getElementById("debut").scrollIntoView
va te déplacer à l'id "debut"

tu as d'autres méthodes aussi (via cible en position x,y)

dans ton lien
ne colles surtout pas la partie :
prérequis script type jquery (jeedom l'integre)
tu vas te retrouver avec un design à supprimer (toutes une aventure apparemment "entrer dans la bdd"
pense a faire un backup avant de tester des trucs

de plus
si tu click il doit te mener à #top (href)
# étant id
hors je ne le vois pas en cible id=top
remplace <body> par <body id="top">

ps : oublie le côté crack je suis comme toi j'apprends je suis juste en cm1 :D

arnox
Timide
Messages : 93
Inscription : 09 sept. 2018, 00:10

Re: Retour haut de page dans un design

Message par arnox » 27 août 2019, 23:04

Super! Merci pour ton aide, j'ai lu rapidement ton autre post, ca a l'air clair... je tente...

arnox
Timide
Messages : 93
Inscription : 09 sept. 2018, 00:10

Re: Retour haut de page dans un design

Message par arnox » 28 août 2019, 01:55

J'y suis presque! J'ai bien le bouton qui s'affiche quand je scrolle, il me renvoie bien en haut de page, mais.... il reste en bas a droite de la "boite" texte/html que j'ai creee... j'ai tente plein de choses pour le positionner en bas a droite de la page affichee genre position: sticky et autres, mais sans succes... et tous les tutos utilisent la position: fixed... J'imagine donc que le browser se positionne dans la mauvaise boite... mais quelle est la bonne boite??? Une idee?

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

Re: Retour haut de page dans un design

Message par winhex » 28 août 2019, 21:43

essai avec un design test
ayant une hauteur de 2 fois (minimum) la taille de ton écran
on peux le déplacer comme tu le dit via positionnement en config ou manuellement (comme un equipements)

si tu le veux à partir de 200px comme ton exemple c'est ça la question ?
là faut que j'essai

arnox
Timide
Messages : 93
Inscription : 09 sept. 2018, 00:10

Re: Retour haut de page dans un design

Message par arnox » 28 août 2019, 23:13

Je suis reparti d'un design vierge, largeur 300, hauteur 1500...
J'ai ajoute un élément texte/html tout en haut de la page et j'ai inséré le code suivant:

Code : Tout sélectionner

<div id="debut">

<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>
Ensuite, ajout d'un autre élément texte/html sur la hauteur totale du design, et inséré le code suivant:

Code : Tout sélectionner

<div>
<a href="javascript:" id="top"><i class="glyphicon glyphicon-arrow-up"></i></a>
<script>
  // ===== Scroll to Top ==== 
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {    // If page is scrolled more than 50px
        $('#top').fadeIn("fast");       // Fade in the arrow
    } else {
        $('#top').fadeOut("fast");      // Else fade out the arrow
    }
});
$('#top').click(function() {            // When arrow is clicked
document.getElementById("debut").scrollIntoView();

});
  </script>
  
  <style>
  #top{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#top i{
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#top:hover{
    background: rgba(0, 0, 0, 0.9);
}
#top:hover i{
    color: #fff;
    top: 5px;
}
</style>
</div>
L'effet reste le même, la flèche apparaît bien des que je commence a scroller, disparait quand je reviens en haut de page, et me renvoie en haut de page quand je clique dessus... Par contre elle reste ancrée en bas a droite du second élément texte/html, ce qui fait que je ne la voit pas tant que je n'ai pas atteint le bas de la page (en l'occurence, le bas du 2nd element texte/html). J'aimerai qu'elle reste en bas a droite de l'ecran tant que je ne suis pas remonte tout en haut, comme le comportement du site que j'ai mis en lien dans mon post initial... A mon avis c'est une histoire de balise <body> mais ca ne fonctionne visiblement pas quand je la rajoute au code...

arnox
Timide
Messages : 93
Inscription : 09 sept. 2018, 00:10

Re: Retour haut de page dans un design

Message par arnox » 31 août 2019, 16:13

@winhex
Décidément pas moyen d'y arriver... J'ai essayé en remplissant l'intégralité de mon design avec les éléments texte/HTML, en changeant les balises, en essayant d'autres codes, je n'y arrive pas... As tu pu faire l'essai de ton côté ?

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

Re: Retour haut de page dans un design

Message par winhex » 31 août 2019, 17:04

oui mais de mon niveau de connaissance
on ne peut pas de la manière de ton exemple (site)
1 l'action href fonctionne oui
2a le script déplacement > 200px oui (html sur page entière) "remplacé 2b par popup"
2b le script lors du scroll remet la flèche " : c'est un déplacement hors champ horizontal" non
(possible via autre moyen)
3 fixe de l'élément non (comme tu le dis)

4 donc je me suis arrêté là
je pense partir sur le déplacement de la flèche au fur et à mesure (2b en repositionnement vertical)

en réutilisant tous les oui précédent pour me passer de 3

comme je penses en avoir besoin je continuerai dans la semaine.

tu as un autre moyen
via un widget tableau pour ton corp
c'est lui qui bougera et ta flèche sera fixe
mais la encore non testé

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

Re: Retour haut de page dans un design

Message par winhex » 13 sept. 2019, 00:51

crée un design
taille 360x12600
crée un html
colle

Code : Tout sélectionner

<div>
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
     <style>
         #section1 {padding-top:0px;height:630px;color: #fff; background-color: #232a31;} /* anthracite */
  #section2 {padding-top:0px;height:630px;color: #fff; background-color: black;}
  #section3 {padding-top:0px;height:630px;color: #fff; background-color: #673ab7;} /* violet */
  #section4 {padding-top:0px;height:630px;color: #fff; background-color: #ff9800;} /* orange */
  #section5 {padding-top:0px;height:630px;color: #fff; background-color: #00bcd4;} /* turquoise */
  #section6 {padding-top:0px;height:630px;color: #fff; background-color: #009688;} /* bleue canard */
  #section7 {padding-top:0px;height:630px;color: #fff; background: linear-gradient(135deg, #80DEEA 0%, #283593 100%);} /* gris */
  #section8 {padding-top:0px;height:630px;color: #fff; background-color: #795548;} /* brun bleue indigo 3F51B5 */ 
  #section9 {padding-top:0px;height:630px;color: #fff; background-color: #232A31;} /* gris */
  #section10 {padding-top:0px;height:630px;color: #fff; background-color: #FFC107;} /* ambre */
  #section11 {padding-top:0px;height:630px;color: #fff; background-color: #1e88e5;} /* bleue */
  #section12 {padding-top:0px;height:630px;color: #fff; background-color: black;}
  #section13 {padding-top:0px;height:630px;color: #fff; background-color: #673ab7;} /* violet */
  #section14 {padding-top:0px;height:630px;color: #fff; background-color: #ff9800;} /* orange */
  #section15 {padding-top:0px;height:630px;color: #fff; background-color: #00bcd4;} /* turquoise */
  #section16 {padding-top:0px;height:630px;color: #fff; background-color: #009688;} /* bleue canard */
  #section17 {padding-top:0px;height:630px;color: #fff; background-color: #FAFAFA;} /* gris */
  #section18 {padding-top:0px;height:630px;color: #fff; background-color: #795548;} /* brun bleue indigo 3F51B5 */ 
  #section19 {padding-top:0px;height:630px;color: #fff; background-color: #CDDC39;} /* citron */
  #section20 {padding-top:0px;height:630px;color: #fff; background-color: black;} /* gris */
       
.menu-flottant {
    width:11.5em; /* Largeur des items du menu*/
    float: right; /* Je veux que le menu soit à droite*/
    position:fixed; /* Le menu est fixe à l'écran*/
    z-index:1000; /* Il sera au dessus de tous les éléments*/
    top: 20%; /* Il sera à 40% du bord supérieur de l'écran*/
    font-size: 1em; /* Taille de la police*/
    line-height: 2px; /* Hauteur de ligne du menu*/
    color: #fff; /* Couleur de la police*/
    font-weight:700; /* Mettre le texte en gras*/
    text-transform:uppercase; /* Mettre le texte en majuscule*/
    right: -8em; /* Décalage du menu sur la droite pour masquer le texte et ne laisser que les icônes de visibles*/
}
.menu-flottant ul {
    list-style: none; /* Le menu est une liste, mais je ne veux pas afficher les puces*/
    margin: 0; /* Choix des marges internes et externes*/
    padding: 0;
}
.menu-flottant ul li {
    display:block; /* Définition des items en tant que bloc*/
    background-color: #333; /* Couleur de fond*/
    height: 3.5em; /* Hauteur des items du menu*/
    padding: 1em 1.5em; /* Marges internes des items du menu*/
    position: relative; /* On leur attribut une position relative*/
    -webkit-transition: -webkit-transform 0.5s; /* Effet de déplacement au passage de la souris*/
    -moz-transition: -webkit-transform 0.5s; /* On le définit plusieurs fois pour assurer la compatibilité entre les navigateurs*/
	transition: transform .5s;
}
/*Couleurs de fond des items du menu*/
.menu-flottant ul li:nth-child(1) { 
	background-color: #00aced; /* 1er item du menu*/
} 
.menu-flottant ul li:nth-child(2) { 
	background-color: #e41b1b; /* 2e item du menu*/
} 
.menu-flottant ul li:nth-child(3) { 
	background-color: #4843D2; /* 3e item du menu*/
} 
/* Si vous en avez plus de 3, ajouteZ ici les mêmes lignes en remplaçant les chiffres et couleurs*/

/* Création de la transformation CSS qui permet d'afficher le menu au passage de la souris*/
.menu-flottant ul li:hover {
    -webkit-transform: translateX(-8em);
    transform: translateX(-8em);
}

/* Mise en forme des liens du menu*/
.menu-flottant ul li a {
    display:block; /* On les définit en tant que bloc*/
    color: #FFF; /* Couleur du texte*/
    text-decoration: none; /* On ne veut pas qu'ils soient soulignés par exemple*/
    position: absolute; /* On leur attribut une position absolue*/
    font-size:1em; /* Taille de la police*/
    line-height: 1.5em; /* Hauteur de ligne*/
    height:2em; /* Hauteur*/
    top:0; /* Positionnement*/
    bottom:0;
    right: 0.5em;
    margin:0 auto;
    padding:1em 1.5em;
}
  
/* Mise en forme des icônes du menu*/
  .menu-flottant ul li span {
    float: left;  /* On les cale à gauche */
    line-height: 1.5em; /* Hauteur de ligne */
    height:2em;
    padding-bottom: 0.8em;
  }  
  </style>
<div id="section1" class="container-fluid">
  <h3 style="margin-left: 35px;">Résumés</h3>
</div>
<div id="section2" class="container-fluid">
  <h3 style="margin-left: 35px;">Présence</h3>
</div>
<div id="section3" class="container-fluid">
    <h3 style="margin-left: 35px;">Accés & Ouvrant</h3>
</div>
<div id="section4" class="container-fluid">
    <h3 style="margin-left: 35px;">Luminaires</h3>
</div>
<div id="section5" class="container-fluid">
    <h3 style="margin-left: 35px;">On/Off</h3>
  </div>
<div id="section6" class="container-fluid">
      <h3 style="margin-left: 35px;">Volets</h3>
  </div>
<div id="section7" class="container-fluid">
        <h3 style="margin-left: 35px;color:black;">Météo</h3>
</div>
<div id="section8" class="container-fluid">
      <h3 style="margin-left: 35px;">Consommation</h3>
</div>
<div id="section9" class="container-fluid">
    <h3 style="margin-left: 35px;">Températures</h3>
</div>
<div id="section10" class="container-fluid">
    <h3 style="color:black;margin-left: 35px;">Radiateur</h3>
</div>
  <div id="section11" class="container-fluid">
    <h3 style="margin-left: 35px;">section11</h3>
</div>
<div id="section12" class="container-fluid">
    <h3 style="margin-left: 35px;">section12</h3>
  </div>
<div id="section13" class="tab-pane container-fluid">
      <h3 style="margin-left: 35px;">section13</h3>
  </div>
<div id="section14" class="container-fluid">
        <h3 style="margin-left: 35px;color:black;">section14</h3>
</div>
<div id="section15" class="container-fluid">
      <h3 style="margin-left: 35px;">section15</h3>
  </div>
  <div id="section16" class="container-fluid">
    <h3 style="margin-left: 35px;">section16</h3>
</div>
<div id="section17" class="container-fluid">
     <h3 style="margin-left: 35px;color:black;">section17</h3>
  </div>
<div id="section18" class="tab-pane container-fluid">
      <h3 style="margin-left: 35px;">Scénarios</h3>
    </div>
  <div id="section19" class="container-fluid">
    <h3 style="margin-left: 35px;">section19</h3>
  </div>
<div id="section20" class="tab-pane container-fluid">
      <h3 style="margin-left: 35px;color:red;">le bas</h3>
    </div>
<script>

var $log = $( ".div_displayObject" ),
  str2 =
    '                                                           \
      <nav class="menu-flottant">								\
		<ul>																								\
<li><span><i class="fas fa-cart-arrow-down"></i></span><a href="#section1">Acheter</a></li>                         \
<li><span><i class="fas fa-calendar-alt"></i></span><a href="#section10">Réserver</a></li> 							\
      <li><span><i class="fas fa-question"></i></span><a href="#section20">Question</a></li>					\
</ul>													\
</nav>									\
    '
    html = $.parseHTML( str2 ),
 $log.append( html );

</script>

</div>
seul le script est menu flotant du css te concerne pour en faire une adaptation du fixed
c'est une adaptation de
https://www.divi-community.fr/tutoriels ... xe-a-divi/
avec le deplacement haut,milieu,bas

sur navigateur bureau
Screenshot_menu fixe.jpg
Screenshot_menu fixe.jpg (10.1 Kio) Consulté 2922 fois
sur navigateur mobile
Screenshot_menu fixe mobile.jpg
Screenshot_menu fixe mobile.jpg (10.25 Kio) Consulté 2921 fois

arnox
Timide
Messages : 93
Inscription : 09 sept. 2018, 00:10

Re: Retour haut de page dans un design

Message par arnox » 13 sept. 2019, 01:50

:o Alors la tu déchires! c'est top!!! Merci encore pour le temps passé la dessus...

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

Re: Retour haut de page dans un design

Message par winhex » 13 sept. 2019, 20:43

c'est aussi et surtout pour moi.
avec la jubilation d'avoir inventé l'eau en poudre :D

en gros 3 soirée c'est surtout la nuit de la 2ème que je me suis demandé au reveil qui a t'il avant le design ".div_displayObject" avec toutes la journée cette question
et peux ton y joindre du html via script (la 3ème hier)

c'est assez simple une fois trouvé. alors que si tu relis je croyais la chose infaisable

là où je t'en veux
design téléphone et tablette à refaire .
j aurai jamais du cherché :D

arnox
Timide
Messages : 93
Inscription : 09 sept. 2018, 00:10

Re: Retour haut de page dans un design

Message par arnox » 14 sept. 2019, 05:26

:D :lol: :D

arnox
Timide
Messages : 93
Inscription : 09 sept. 2018, 00:10

Re: Retour haut de page dans un design

Message par arnox » 15 sept. 2019, 00:22

J'ai essayé de comprendre le code que tu as créé. Je bute sur la dernière partie, alors pour y voir un peu plus clair, j'ai fait un peu de ménage dans le code un peu a tatons et j'arrive a ca:

Code : Tout sélectionner

var $log = $( ".div_displayObject" ),  str =
'\
<nav class="menu-flottant">\
  <ul>\
    <li><span><i class="fas fa-cart-arrow-down"></i></span><a href="#haut">Haut</a></li>\
  </ul>\
</nav>\
'
$log.append($.parseHTML(str));
Ce que je comprends c'est que du créés et tu renseignes la valeur de deux variables: $log et str. La variable $log est égale a ".div_displayObject" et la variable str est égale au code html contenu entre les '
Ensuite la dernière expression permettrait d'aller coller le code html contenu dans la variable str directement dans le code de la page de design dans la section "div displayObject".
Alors? j'ai compris? Franchement, si c'est ça, je n'y aurai jamais pensé!

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

Re: Retour haut de page dans un design

Message par winhex » 15 sept. 2019, 01:08

oui si tu veux aller plus loin (le cheminement )

append et parseHTML sont des commande PHP
tu trouveras facilement leur rôle
le . devant div_displayObject = une class
un # pour un div
fait f12 sur ton design tu auras le mode dev du navigateur
il existe des tuto pour plus de détails

c'est comme ça que j'ai trouvé la class
j'ai modifier la couleur avec le script fonction .css()
pour être sûr que cela impacté toute la page
ensuite un simple .html('<p>...
l'ajout du texte ne suffisait pas (mais la voie est bonne)
j'ai cherché la fonction ajout html plus poussé
parseHTML paraissez ok mais les exemples était simple "une ligne" (mais la voie est toujours bonne)

ensuite j'ai écumé des exemple sur des forum de dev (ex: stackoverflow) à la recherche d'un truc similaire 'resemblant'
genre 'recherche parseHTML li '

et là mise en variable pour avoir plusieurs ligne ( pour arriver au final)
je te l'ai retrouvé avec l'exemple jsfiddle
https://stackoverflow.com/questions/154 ... t/15403846
que j'ai adapté
de la logique, recherche (un peu de chance) et 2,3 notion acquise avec jeedom
ça fait pas de moi un dev mais un bidouilleur. pour te rassurer je comprends pas toujours tous :D

Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

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