Imprimer la Page | Fermez la fenêtre

Menu flottant

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Discussion générale openElement
Description du Forum: Discussion générale sur le logiciel
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=23507
Date: 28 Mar 2024 à 20:28
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: Menu flottant
Posté par: jjb1
Sujet: Menu flottant
Posté le: 03 Jan 2019 à 15:00
Bonjour à tous, et bonne année,

J'ai beaucoup fouiné sur le forum, mais je n'ai rien trouvé de concret.
Je voudrais que mon menu disparaisse lorsque je vais vers le bas de ma page, et qu'il réapparaisse dès que je remonte, même si je ne suis pas arrivé en haut de page.
Suis-je bien clair ?
D'avance merci de vos conseils.


-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9)



Réponses:
Posté par: Goetheus
Posté le: 03 Jan 2019 à 17:55
Salut et bonne année !

Tu ne peux pas réaliser ce que tu désires en natif sous OpenElement, il va falloir que tu injecte ton propre code pour cela.

Pas trop de le temps de m'y pencher, mais le plus simple c'est un code javascript : deux fonctions, l'une qui s'exécute au scroll down, si ton menu est affiché, après le chargement de la page, et l'autre qui s'exécute à chaque scroll up.

Une recherche google t'aideras ! Je repasserais par ici dès que je pourrais.


Posté par: brolysan
Posté le: 03 Jan 2019 à 18:49
C'est faisable en bidouillant et détournant 2 éléments.Je vais voir si je peux vous faire ca dans le weekend.

Cordialement

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: jjb1
Posté le: 07 Jan 2019 à 16:30
Bonjour,
Je reviens après quelques jours d'absence.
Merci de vos réponses.
A l'époque, il y a maintenant longtemps, Larsene m'avait répondu que c'était simple, mais c'en est resté à cette appréciation.
Je vais chercher sur google et reviendrais vous en dire plus.


-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9)


Posté par: Hobby001
Posté le: 08 Jan 2019 à 04:42
1- ajoutez la classe BarreMenu à votre menu

2- ajoutez le code javascript suivant en endbody

var position = $(window).scrollTop(); 
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
$('.BarreMenu').fadeOut(500);
} else {
$('.BarreMenu').fadeIn(500);
}
position = scroll;
});

Résultat http://denislafrance.net/EssaisDivers.htm" rel="nofollow -


Posté par: Bridet
Posté le: 08 Jan 2019 à 09:36
Trop fort Hobby !


-------------
http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus


Posté par: jjb1
Posté le: 08 Jan 2019 à 11:06
Grand merci Hobby,
C'est EXACTEMENT ce que je voulais ; simple, concis et efficace.
Ne me reste plus qu'a mettre en place (ce qui n'est pas gagné, me connaissant).
Je vous tiens informé.
Merci encore.


-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9)


Posté par: jjb1
Posté le: 08 Jan 2019 à 19:59
Je savais bien que je n'y parviendrais pas.
Le test01 fonctionne correctement, mais le test02, qui met en jeu un claque pour le Menu ne fonctionne pas.
Quand je descends et que je remonte, le menu clignote.
Cela m'ennuie, car je dois appliquer ce menu sur une centaine de page, alors que le calque est déjà sur les pages en questions ; donc c'était important pour moi d'intervenir sur UN calque au lieu de CENT pages.
Croyez-vous ce problème solvable ?
D'avance merci de votre aide.
http://dev01.chasse-autreches.xyz/" rel="nofollow - L'Album test


-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9)


Posté par: Hobby001
Posté le: 08 Jan 2019 à 20:47
Sut test02 vous avez le code deux fois , commencez par en enlever une

<script type="text/javascript">
var position = $(window).scrollTop(); 
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
$('.barremenu').fadeOut(500);
} else {
$('.barremenu').fadeIn(500);
}
position = scroll;
});
var position = $(window).scrollTop(); 
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
$('.barremenu').fadeOut(500);
} else {
$('.barremenu').fadeIn(500);
}
position = scroll;
});
$(["WEFiles/Image/Skin/28d61833.png","WEFiles/Image/Skin/7e93ed35.png"]).preloadImg();
</script>
</body>
</html>


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 08 Jan 2019 à 20:48
Le code fonctionne très bien à partir d'un calque. 

Sur test 01 vous ne l'avez qu'une fois

</div>
<script type="text/javascript">
var position = $(window).scrollTop(); 
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
$('.barremenu').fadeOut(500);
} else {
$('.barremenu').fadeIn(500);
}
position = scroll;
});
$(["WEFiles/Image/Skin/28d61833.png","WEFiles/Image/Skin/7e93ed35.png"]).preloadImg();
</script>
</body>
</html>


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: jjb1
Posté le: 08 Jan 2019 à 21:16
Merci de votre réponse,

Je ne comprends pas pourquoi j'ai un doublon sur le test02.
J'ai procédé comme suit :
test01 : j'ai inclus un panneau d'éléments "barremenu". J'ai appliqué votre code dans un bloc de code en Javascrit Endbody.
Cette page n'a pas de calque.
Pour test02 (qui est une autre page) je n'ai pas copié ce code, j'ai appliqué un calque et dans ce calque, j'ai inséré le code en question ; mais je ne l'ai pas inclus deux fois, enfin pas à ma connaissance.
http://dev01.chasse-autreches.xyz/" rel="nofollow - L'Album avec les trois options.


-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9)


Posté par: jjb1
Posté le: 08 Jan 2019 à 22:57
J'ai vu mon erreur.
J'ai rectifié et cela fonctionne.

Merci mille fois.


-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9)


Posté par: Hobby001
Posté le: 09 Jan 2019 à 14:50
Il m'est venu l'idée que vous pourriez mettre en transparence partielle votre menu au lieu de l'escamoter complètement.

Vous pourriez utiliser le code suivant:

Javascript

var position = $(window).scrollTop(); 
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
$('.barremenu').css('opacity',.3);;
} else {
$('.barremenu').css('opacity',1);
}
position = scroll;
});

CSS

.barremenu{
transition: all .5s;
}



-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 09 Jan 2019 à 14:56
Un exemple http://denislafrance.net/EssaisDivers.htm" rel="nofollow -


Posté par: brolysan
Posté le: 09 Jan 2019 à 15:21
Y a aussi moyen de faire comme ceci :  http://sensode.ovh/SENSMALTE/" rel="nofollow - http://sensode.ovh/SENSMALTE/

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Hobby001
Posté le: 09 Jan 2019 à 15:33
Message posté par brolysan brolysan a écrit:

Y a aussi moyen de faire comme ceci :  http://sensode.ovh/SENSMALTE/" rel="nofollow - http://sensode.ovh/SENSMALTE/


Intéressant!


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: jjb1
Posté le: 09 Jan 2019 à 19:17
Merci Hobby, j'aime bien l'idée de mettre en transparence partielle le menu ; je suppose que le chiffre 3 correspond au degré d'opacité.
Je pense que je vais l'adopter. L'option de Brolysan pourrait difficilement me concerner, vu le nombre de pages différentes de mon site.
Puisque nous en sommes là, j'ai appliqué le script sur un de mes calques que j'applique sur deux types de pages différentes :
http://prod.chasse-autreches.xyz/18-12-16-PDF.htm" rel="nofollow - Ici ça fonctionne parfaitement
http://prod.chasse-autreches.xyz/18-12-16-PDF-Jpeg.htm" rel="nofollow - Là, je ne parviens pas à le faire fonctionner
C'est pourtant le même calque qui est utilisé ; en revanche, ce sont deux types de pages différents.
Ceci explique peut-être cela.




-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9)


Posté par: jjb1
Posté le: 09 Jan 2019 à 19:19
J'ai inversé les deux pages : la première ne fonctionne pas, la seconde si.

-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9)


Posté par: Hobby001
Posté le: 09 Jan 2019 à 20:20
En fait, sur cette page, il n'y a pas de scroll d'exécuté sur la page elle-même mais plutôt à l'intérieur du document pdf.

La fonction $(window).scroll détecte le scroll de la page.

Vous devez donc avoir une page plus grande que le document pdf pour que ça fonctionne.

Je communique avec vous en MP pour la suite.


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 10 Jan 2019 à 20:02
Je n'ai pas pu trouver de façon de calculer la longueur d'un document pdf avec js ou jQuery donc il ne m'est pas possible de déterminer la longueur de fenêtre requise pour afficher le document au complet sur la page.

L'affichage d'un pdf semble prendre la hauteur de l'élément parent ou au maximum de la fenêtre.  Le scroll s'exécute alors à l'intérieur du pdf.

À moins que quelqu'un ne propose une méthode de calcul efficace, vous devrez imposer une hauteur arbitraire plus grande que le document pdf à votre iframe sans quoi il n'y aura pas de scroll sur la fenêtre $(window).





-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 10 Jan 2019 à 20:24
Voici ce que ça donne avec une hauteur de 6000px

http://denislafrance.net/EssaisDiversII.htm" rel="nofollow - http://denislafrance.net/EssaisDiversII.htm


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: jjb1
Posté le: 10 Jan 2019 à 21:08
Merci beaucoup pour ces recherches.
Je vais tester avec des fichiers pdf de différents volumes pour voir ce que cela donne.
Au pire, j'abandonnerai l'option pdf, puisque je mets en parallèle une page d'images du fichier pdf.

Quoi qu'il en soit, merci beaucoup pour les solutions apportées, utilisables sur les autres constructions de mes page.
Et vive le Quebec ...
Bien cordialement.


-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9)



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net