AccueilMembres connectés récemment
[EDGE] Bug avec un effet CSS (smooth catégories)
2 participants
Page 1 sur 1 • Partagez
- tenrev
-
Ven 22 Jan 2021 - 13:32
- Version du forum :EDGE
- Templates modifiés :oui
- Navigateur :Firefox
Bonjour à toutes et à tous
c'est encore moi , j'ai ajouté à ma feuille de style ce morceau de code css trouvé sur FMdesign
j'aime bien l'effet smooth lors de l'ouverture et fermeture des catégories dans les forums qui fonctionne trés bien
le probléme est que depuis que j'ai ajouté ces lignes, les fléches qui me permettent de faire un scroll vers le haut ou vers le bas du forum , m’emmènent aux plus profond des abysses
voir ma capture gif animé ci dessous
![[EDGE] Bug avec un effet CSS (smooth catégories) Smooth](https://biblio3d.fr/fichiers/forum/smooth.gif)
je vous remercie par avance , ca serait super cool que je puisse garder cet effet smooth
bon journée à toutes et à tous
c'est encore moi , j'ai ajouté à ma feuille de style ce morceau de code css trouvé sur FMdesign
- Code:
/*categories smooth*/
.title + div[id] { display: block !important; }
.title.c_hide + div[id] {
opacity: 1;
max-height: 5000px;
width: 100%;
transition: max-height 2s cubic-bezier(1, 0, 1, 0), width 2s 0.75s ease, opacity 2s 1s ease;
}
.title.c_show + div[id] {
opacity: 0;
max-height: 0;
width: 0;
transition: max-height 2s cubic-bezier(0, 1, 0, 1), width 2s ease-in, opacity 2s ease;
}
.title + div[id] .forum-block { overflow: hidden; white-space: nowrap; }
j'aime bien l'effet smooth lors de l'ouverture et fermeture des catégories dans les forums qui fonctionne trés bien
le probléme est que depuis que j'ai ajouté ces lignes, les fléches qui me permettent de faire un scroll vers le haut ou vers le bas du forum , m’emmènent aux plus profond des abysses
voir ma capture gif animé ci dessous
je vous remercie par avance , ca serait super cool que je puisse garder cet effet smooth
bon journée à toutes et à tous
- tenrev
-
Ven 22 Jan 2021 - 17:02
salut Phil
c'est le code qui tu as donné sur ton forum
et le css
j'ai essayé de changer la valeur ci dessous mais ca ne changeait rien
c'est le code qui tu as donné sur ton forum
- Code:
$(document).ready(function(){
//LE LIEN DE L IMAGE POUR REMONTER
var M14_H="https://i.servimg.com/u/f20/20/11/87/27/up_arr10.png";
//LE LIEN DE L IMAGE POUR DESCENDRE
var M14_B="https://i.servimg.com/u/f20/20/11/87/27/down_a10.png";
//ON IMPORTE LES BOUTONS
$('body').append('<a href="#" class="M14_ToP"title="Haut de page"><img src="'+M14_H+'"/></a><a href="#" class="M14_BoTTom"title="Bas de page"><img src="'+M14_B+'"/></a>');
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('.M14_ToP').fadeIn();
$('.M14_BoTTom').fadeOut();
} else {
$('.M14_ToP').fadeOut();
$('.M14_BoTTom').fadeIn();
}
});
$('.M14_ToP').click(function(){
$('html ,body').animate({scrollTop : 0},1000);
return false;});
$('.M14_BoTTom').click(function(e){
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
return false;});
});
et le css
- Code:
/*ON POSITIONNE LES DEUX BOUTONS*/
a.M14_ToP, a.M14_BoTTom
{
width: 32px;
height: 32px;
position: fixed;
right: 20px;
z-index: 999;
}
/*LE BUTON VERS LE HAUT*/
a.M14_ToP
{
bottom:200px;
display: none;
}
/*LE BOUTON VERS LE BAS*/
a.M14_BoTTom
{
bottom:200px;
}
j'ai essayé de changer la valeur ci dessous mais ca ne changeait rien
- Code:
if ($(this).scrollTop() > 200)
- Milouze14
Fondateur -
Ven 22 Jan 2021 - 18:08
Ok merci,
alors le scrool simple se fait correctement mais par précaution,
j'ai modifié le script mentionné afin d'ajouter les ancres Jack.
https://www.milouze14.com/t28430-toutes-versions-afficher-des-boutons-pour-le-haut-et-le-bas-de-page#546651
Remplaces ton script par celui-ci:
alors le scrool simple se fait correctement mais par précaution,
j'ai modifié le script mentionné afin d'ajouter les ancres Jack.
https://www.milouze14.com/t28430-toutes-versions-afficher-des-boutons-pour-le-haut-et-le-bas-de-page#546651
Remplaces ton script par celui-ci:
- Code:
$(document).ready(function(){
//LE LIEN DE L IMAGE POUR REMONTER
var M14_H="https://i.servimg.com/u/f20/20/11/87/27/up_arr10.png";
//LE LIEN DE L IMAGE POUR DESCENDRE
var M14_B="https://i.servimg.com/u/f20/20/11/87/27/down_a10.png";
//ON IMPORTE LES BOUTONS
$('body').append('<a href="#top" class="M14_ToP"title="Haut de page"><img src="'+M14_H+'"/></a><a href="#bottom" class="M14_BoTTom"title="Bas de page"><img src="'+M14_B+'"/></a>');
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('.M14_ToP').fadeIn();
$('.M14_BoTTom').fadeOut();
} else {
$('.M14_ToP').fadeOut();
$('.M14_BoTTom').fadeIn();
}
});
$('.M14_ToP').click(function(){
$('html ,body').animate({scrollTop : 0},1000);
return false;});
$('.M14_BoTTom').click(function(e){
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
return false;});
});
- tenrev
-
Ven 22 Jan 2021 - 18:29
merci Phil
j'ai remplacé le script , mais sur la page d'accueil le bouton vers le bas fait un scrolling beaucoup trop bas
une fois dans un sous forum ca fonctionne bien
si je supprime l'effet smooth ca fonctionne , c'est ce que je ferai si le bug persiste
merci pour ton aide
j'ai remplacé le script , mais sur la page d'accueil le bouton vers le bas fait un scrolling beaucoup trop bas
une fois dans un sous forum ca fonctionne bien
si je supprime l'effet smooth ca fonctionne , c'est ce que je ferai si le bug persiste
merci pour ton aide
- Milouze14Fondateur
-
Ven 22 Jan 2021 - 18:36
Effectivement, tu n'as pas modifié de template depuis que tu es passé sur EDGE.
Attention pour la version EDGE, il est impératif que la feuille de style reste ainsi:
Feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Options du CSS:
Forcer le CSS de base du forum: Non
Désactiver le CSS de base: Oui
Optimiser votre CSS: Non
Attention pour la version EDGE, il est impératif que la feuille de style reste ainsi:
Feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Options du CSS:
Forcer le CSS de base du forum: Non
Désactiver le CSS de base: Oui
Optimiser votre CSS: Non
- tenrev
-
Ven 22 Jan 2021 - 20:05
Milouze14 a écrit:
Effectivement, tu n'as pas modifié de template depuis que tu es passé sur EDGE.
Attention pour la version EDGE, il est impératif que la feuille de style reste ainsi:
Feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Options du CSS:
Forcer le CSS de base du forum: Non
Désactiver le CSS de base: Oui
Optimiser votre CSS: Non
j'ai modifié le template index_body en y ajoutant ces lignes (que tu m'as données pour centrer dans le forum en haut , les derniers sujets )
- Code:
<script>
$(function(){
$('.M14_load_topic').load('/portal #recent_topics_classical');
});
</script>
<div id="M14_load_topic"><div class="M14_load_topic_titre color-primary">Les derniers sujets du forum</div>
<div class="M14_load_topic"><img src="https://i.servimg.com/u/f20/20/11/87/27/loadin10.gif"/></div></div>
et en ce qui concerne le css
![[EDGE] Bug avec un effet CSS (smooth catégories) Captur70](https://i.servimg.com/u/f58/19/65/32/06/captur70.png)
merci infiniment pour ton aide
bonne soirée
- Milouze14Fondateur
-
Sam 23 Jan 2021 - 4:21
Hello Jack,
merci,
tu as dû supprimer cette c.s.s sur ton forum :
car je ne vois plus le soucis d'hier!!
C'est surement le max-height qui génère ce dysfonctionnement en bas de page:
Ce qui m'ennuie, c'est que je n'arrive pas a reproduire l’identique sur mon d’essais EDGE!!!!
merci,
tu as dû supprimer cette c.s.s sur ton forum :
- Code:
/*categories smooth*/
.title + div[id] { display: block !important; }
.title.c_hide + div[id] {
opacity: 1;
max-height: 5000px;
width: 100%;
transition: max-height 2s cubic-bezier(1, 0, 1, 0), width 2s 0.75s ease, opacity 2s 1s ease;
}
.title.c_show + div[id] {
opacity: 0;
max-height: 0;
width: 0;
transition: max-height 2s cubic-bezier(0, 1, 0, 1), width 2s ease-in, opacity 2s ease;
}
.title + div[id] .forum-block { overflow: hidden; white-space: nowrap; }
car je ne vois plus le soucis d'hier!!
C'est surement le max-height qui génère ce dysfonctionnement en bas de page:
- Code:
.title.c_hide + div[id] {
opacity: 1;
max-height: 5000px;
Ce qui m'ennuie, c'est que je n'arrive pas a reproduire l’identique sur mon d’essais EDGE!!!!
.- Milouze14Fondateur
-
Sam 23 Jan 2021 - 18:56
Juste avant de partir , je crois avoir trouver le soucis Jack,
en fait la css recherche une balise ayant la class title et ensuite une div ayant au moins l'id id.
Le qeel contient aussi le même principe.
Tu peux tester cette nouvelle C.S.S et me dire si tu as toujours le même soucis :
en fait la css recherche une balise ayant la class title et ensuite une div ayant au moins l'id id.
Le qeel contient aussi le même principe.
Tu peux tester cette nouvelle C.S.S et me dire si tu as toujours le même soucis :
- Code:
/*categories smooth*/
.forum-category .title + div[id] { display: block !important; }
.forum-category .title.c_hide + div[id]
{
opacity: 1;
max-height: 5000px;
width: 100%;
transition: max-height 2s cubic-bezier(1, 0, 1, 0), width 2s 0.75s ease, opacity 2s 1s ease;
}
.forum-category .title.c_show + div[id]
{
opacity: 0;
max-height: 0;
width: 0;
transition: max-height 2s cubic-bezier(0, 1, 0, 1), width 2s ease-in, opacity 2s ease;
}
.forum-category .title + div[id] .forum-block { overflow: hidden; white-space: nowrap; }
- tenrev
-
Lun 25 Jan 2021 - 16:06
hello Phil
merci d'avoir essayé , comme je préfère que la fléche vers le bas arrête le forum à la limite basse , je vais supprimer les lignes de css qui donnent cet effet smooth
si un jour une idée lumineuse te revient , je suis preneur
je met en résolu , merci à toi
bonne journée
merci d'avoir essayé , comme je préfère que la fléche vers le bas arrête le forum à la limite basse , je vais supprimer les lignes de css qui donnent cet effet smooth
si un jour une idée lumineuse te revient , je suis preneur
je met en résolu , merci à toi
bonne journée
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum