Derniers sujets*
» [PHPBB2] Couleur spécifique aux membres d'un rang dans les messages
par Roza Aujourd'hui à 11:07
» [TOUTES VERSIONS] Afficher une belle infobulle au survol des boutons J aime
par clost Sam 17 Avr 2021 - 12:03
» [MODERNBB] Supprimer l'effet scroll sur la barre de navigation
par Milouze14 Lun 12 Avr 2021 - 7:56
» [MODERNBB]Retirer les crochets des groupes dans le Qeel
par Serah Sam 10 Avr 2021 - 22:48
» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
par Stefano36 Mer 31 Mar 2021 - 21:57
» [PHPBB2] Afficher le nombre de message privé non lus sur la toolbar etc
par Constellation Mer 31 Mar 2021 - 1:59
» [PHPBB2] Remplacer le mot Invité
par Constellation Mer 31 Mar 2021 - 1:37
» [TOUTES VERSIONS] Héberger du css dans une page html comme sur la feuille de style
par Constellation Mer 31 Mar 2021 - 1:31
» [TOUTES VERSIONS] Sauvegarder le contenu de l'éditeur
par Constellation Mer 31 Mar 2021 - 1:30
» [TOUTES VERSIONS]Message de confirmation de fermeture de la page pour les membres distraits
par Constellation Mer 31 Mar 2021 - 1:24
» [TOUTES VERSIONS] Afficher un texte dans l'éditeur avec transition
par Constellation Mer 31 Mar 2021 - 1:14
» [TOUTES VERSIONS] Modifier les textes de la barre de navigation
par Constellation Mar 30 Mar 2021 - 22:53
» [TOUTES VERSIONS] Installer MESSENGER Forumactif sur votre forum (Version Française)
par Constellation Mar 30 Mar 2021 - 22:50
» [TOUTES VERSIONS] Afficher les likes seulement sur les messages des autres membres et plus encore
par Milouze14 Mar 30 Mar 2021 - 6:14
» [TOUTES VERSIONS] Modifier la couleur des pseudos mentionner dans l'éditeur
par Constellation Dim 28 Mar 2021 - 19:34
» [TOUTES VERSIONS] Une page html connexion/deconnexion...
par Constellation Dim 28 Mar 2021 - 19:31
» [TOUTES VERSIONS] Modifier les menus défilant de l'éditeur
par Milouze14 Lun 22 Mar 2021 - 7:30
» [TOUTES VERSIONS] Faire AGRANDIR l'image ou le Smiley au passage de la souris
par photoclic Dim 21 Mar 2021 - 19:24
» [TOUTES VERSIONS]Mise en place automatique décorations
par clost Dim 21 Fév 2021 - 11:37
» [AWESOMEBB] Outils de modération rapide
par Milouze14 Jeu 11 Fév 2021 - 6:04
par Roza Aujourd'hui à 11:07
» [TOUTES VERSIONS] Afficher une belle infobulle au survol des boutons J aime
par clost Sam 17 Avr 2021 - 12:03
» [MODERNBB] Supprimer l'effet scroll sur la barre de navigation
par Milouze14 Lun 12 Avr 2021 - 7:56
» [MODERNBB]Retirer les crochets des groupes dans le Qeel
par Serah Sam 10 Avr 2021 - 22:48
» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
par Stefano36 Mer 31 Mar 2021 - 21:57
» [PHPBB2] Afficher le nombre de message privé non lus sur la toolbar etc
par Constellation Mer 31 Mar 2021 - 1:59
» [PHPBB2] Remplacer le mot Invité
par Constellation Mer 31 Mar 2021 - 1:37
» [TOUTES VERSIONS] Héberger du css dans une page html comme sur la feuille de style
par Constellation Mer 31 Mar 2021 - 1:31
» [TOUTES VERSIONS] Sauvegarder le contenu de l'éditeur
par Constellation Mer 31 Mar 2021 - 1:30
» [TOUTES VERSIONS]Message de confirmation de fermeture de la page pour les membres distraits
par Constellation Mer 31 Mar 2021 - 1:24
» [TOUTES VERSIONS] Afficher un texte dans l'éditeur avec transition
par Constellation Mer 31 Mar 2021 - 1:14
» [TOUTES VERSIONS] Modifier les textes de la barre de navigation
par Constellation Mar 30 Mar 2021 - 22:53
» [TOUTES VERSIONS] Installer MESSENGER Forumactif sur votre forum (Version Française)
par Constellation Mar 30 Mar 2021 - 22:50
» [TOUTES VERSIONS] Afficher les likes seulement sur les messages des autres membres et plus encore
par Milouze14 Mar 30 Mar 2021 - 6:14
» [TOUTES VERSIONS] Modifier la couleur des pseudos mentionner dans l'éditeur
par Constellation Dim 28 Mar 2021 - 19:34
» [TOUTES VERSIONS] Une page html connexion/deconnexion...
par Constellation Dim 28 Mar 2021 - 19:31
» [TOUTES VERSIONS] Modifier les menus défilant de l'éditeur
par Milouze14 Lun 22 Mar 2021 - 7:30
» [TOUTES VERSIONS] Faire AGRANDIR l'image ou le Smiley au passage de la souris
par photoclic Dim 21 Mar 2021 - 19:24
» [TOUTES VERSIONS]Mise en place automatique décorations
par clost Dim 21 Fév 2021 - 11:37
» [AWESOMEBB] Outils de modération rapide
par Milouze14 Jeu 11 Fév 2021 - 6:04
Les statistiques du forum
[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page
Page 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
Hello les ami(e)s,
l'astuce consiste à afficher deux boutons:
un pour le haut de page et un autre pour le bas de page et ce sur toutes les pages de votre forum,
jusque là rien de bien extraordinaire.
Le petit plus est que ces boutons s'estomperont au scroll en fonction de la navigation ( vers le haut ou vers le bas).
Vous pourrez modifier les images en modifiant leurs liens (entre les guillemets) déjà présents dans le script (au début):
D'autres images sont disponibles en bas de l'astuce:
Cliquez ici pour les visionner:
Attention, ces images ont les dimensions suivantes: 32px par 32px
Pensez à adapter le css
.
En visuel:
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Up_arr10](https://i.servimg.com/u/f20/20/11/87/27/up_arr10.png)
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Down_a10](https://i.servimg.com/u/f20/20/11/87/27/down_a10.png)
Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposez ce script:
Si vous désirez que le bouton s'affiche plus tôt ou plus tard il suffit de modifier le script dans cette partie:
Diminuez ou augmentez le "200" selon votre souhait.
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposez ceci et déposez les boutons ou vous le souhaitez en modifiant les valeurs 200px tout en restant raisonnable.
Les liens des images étant déjà dans le script, il faut penser que ces dernières ont les dimensions suivantes:
32px par 32px
Pensez à valider les modifications en cliquant sur le bouton
D'autres lien de boutons ayant les dimensions 32px par 32px:
https://i.servimg.com/u/f20/20/11/87/27/up10.png
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Up10](https://i.servimg.com/u/f20/20/11/87/27/up10.png)
https://i.servimg.com/u/f20/20/11/87/27/down10.png
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Down10](https://i.servimg.com/u/f20/20/11/87/27/down10.png)
https://i.servimg.com/u/f20/20/11/87/27/naviga11.png
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Naviga11](https://i.servimg.com/u/f20/20/11/87/27/naviga11.png)
https://i.servimg.com/u/f20/20/11/87/27/naviga10.png
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Naviga10](https://i.servimg.com/u/f20/20/11/87/27/naviga10.png)
https://i.servimg.com/u/f20/20/11/87/27/naviga12.png
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Naviga12](https://i.servimg.com/u/f20/20/11/87/27/naviga12.png)
https://i.servimg.com/u/f20/20/11/87/27/naviga13.png
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Naviga13](https://i.servimg.com/u/f20/20/11/87/27/naviga13.png)
Voila, c'est tout pour le moment
.
Un soucis direction l'entraide
https://www.milouze14.com/f14-entraide-forumactif
l'astuce consiste à afficher deux boutons:
un pour le haut de page et un autre pour le bas de page et ce sur toutes les pages de votre forum,
jusque là rien de bien extraordinaire.
Le petit plus est que ces boutons s'estomperont au scroll en fonction de la navigation ( vers le haut ou vers le bas).
Vous pourrez modifier les images en modifiant leurs liens (entre les guillemets) déjà présents dans le script (au début):
- Code:
//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";
D'autres images sont disponibles en bas de l'astuce:
Cliquez ici pour les visionner:
Attention, ces images ont les dimensions suivantes: 32px par 32px
Pensez à adapter le css

En visuel:
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Up_arr10](https://i.servimg.com/u/f20/20/11/87/27/up_arr10.png)
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Down_a10](https://i.servimg.com/u/f20/20/11/87/27/down_a10.png)
Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposez ce script:
- 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;});
});

Si vous désirez que le bouton s'affiche plus tôt ou plus tard il suffit de modifier le script dans cette partie:
- Code:
if ($(this).scrollTop() > 200)
Diminuez ou augmentez le "200" selon votre souhait.
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposez ceci et déposez les boutons ou vous le souhaitez en modifiant les valeurs 200px tout en restant raisonnable.
Les liens des images étant déjà dans le script, il faut penser que ces dernières ont les dimensions suivantes:
32px par 32px
- 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
{
top:200px;
}
Pensez à valider les modifications en cliquant sur le bouton

D'autres lien de boutons ayant les dimensions 32px par 32px:
https://i.servimg.com/u/f20/20/11/87/27/up10.png
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Up10](https://i.servimg.com/u/f20/20/11/87/27/up10.png)
https://i.servimg.com/u/f20/20/11/87/27/down10.png
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Down10](https://i.servimg.com/u/f20/20/11/87/27/down10.png)
https://i.servimg.com/u/f20/20/11/87/27/naviga11.png
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Naviga11](https://i.servimg.com/u/f20/20/11/87/27/naviga11.png)
https://i.servimg.com/u/f20/20/11/87/27/naviga10.png
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Naviga10](https://i.servimg.com/u/f20/20/11/87/27/naviga10.png)
https://i.servimg.com/u/f20/20/11/87/27/naviga12.png
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Naviga12](https://i.servimg.com/u/f20/20/11/87/27/naviga12.png)
https://i.servimg.com/u/f20/20/11/87/27/naviga13.png
![[TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page Naviga13](https://i.servimg.com/u/f20/20/11/87/27/naviga13.png)
Voila, c'est tout pour le moment

Un soucis direction l'entraide

https://www.milouze14.com/f14-entraide-forumactif
Dernière édition par Milouze14 le Ven 22 Jan 2021 - 18:06, édité 18 fois (Raison : Correction sur les ancres)
- InvitéInvité
Merci beaucoup !
- InvitéInvité
Merci beaucoup !
- InvitéInvité
Merci beaucoup !
- InvitéInvité
Merci beaucoup !
- K-SurfMilouzien
Merci beaucoup !
- InvitéInvité
Merci beaucoup !
- InvitéInvité
Merci beaucoup !
Page 1 sur 2 • 1, 2
Sujets similaires internes ( 0 )
Aucun sujet
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum