Comment ajouter des flèches haut et bas dans le forum ?

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Comment ajouter des flèches haut et bas dans le forum ?

Message par admin tt Dim 11 Fév 2024 - 22:27

Bonjour 

Comment puis-je ajouter une flèche haut et bas dans mon forum ?
admin tt

admin tt
*

Messages : 33
Inscrit(e) le : 28/12/2022

https://dcrpgdarktruth.forumactif.org/
admin tt a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment ajouter des flèches haut et bas dans le forum ?

Message par creange Dim 11 Fév 2024 - 23:08

Bonjour admin tt 

il faut placer un java script dans les modules
avec le titre Bouton haut/bas 
Cocher sur toutes les pages 
et coller ce code 

Code:
$(function(){
          $("body").append('<div class="boutonhautbas"><a href="#top"><img src="ICI METTRE L ADRESSE
DE L IMAGE DU HAUT" alt="Aller en haut" /></a> <a href="#bottom"><img src="ICI METTRE L ADRESSE
DE L IMAGE DU BAS" alt="Aller en bas" /></a></div>');
});





Et ne pas oublier de valider 

ensuite il faut mettre ce code CSS dans la feuille de style dans le PA puis affichage et 
Couleur et feuilles de style CSS


Code:
$(function(){          $("body").append('<div class="boutonhautbas"><a href="#top"><img src="https://i.imgur.com/hkOmuCD.png" alt="Aller en haut" /></a> <a href="#bottom"><img src="https://i.imgur.com/G3Io37u.png" alt="Aller en bas" /></a></div>');});



et ne pas oublier d'enregistrer 

bonne soirée
creange

creange
*****

Féminin
Messages : 741
Inscrit(e) le : 31/03/2011

https://dangela.forumgratuit.org/
creange a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment ajouter des flèches haut et bas dans le forum ?

Message par admin tt Dim 11 Fév 2024 - 23:39

Merci beaucoup creange

C'est trop cool ::fete::

Pouvez-vous ajouter une simple modification au code ?

J'aimerais que la navigation se fasse en plusieurs clics, pas en un seul,
Je veux que la flèche du haut me soulève un peu à chaque fois que je clique dessus


Est-il possible?
admin tt

admin tt
*

Messages : 33
Inscrit(e) le : 28/12/2022

https://dcrpgdarktruth.forumactif.org/
admin tt a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment ajouter des flèches haut et bas dans le forum ?

Message par creange Dim 11 Fév 2024 - 23:46

je ne suis pas sûre que ce soit possible par le code 
mais peut être par un gif animé à la place du bouton ....
sauf que le gif se soulèvera tout le temps 
sinon ça va être trop compliqué et pas assez calée en code
pour te conseiller ....
creange

creange
*****

Féminin
Messages : 741
Inscrit(e) le : 31/03/2011

https://dangela.forumgratuit.org/
creange a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment ajouter des flèches haut et bas dans le forum ?

Message par MlleAlys Lun 12 Fév 2024 - 18:50

Bonjour,
(Les navigateurs ont normalement déjà une barre de défilement munie de tels boutons.)

Vous pouvez remplacer le code javascript de creange par le suivant (toujours sur toutes les pages) :
Code:
$(function(){
  $('body').append('<div id="updownbtn"><img onclick="window.scroll(0, window.scrollY - 100);" src="https://i.imgur.com/hkOmuCD.png" alt="Aller en haut" /> <img onclick="window.scroll(0, window.scrollY + 100);" src="https://i.imgur.com/G3Io37u.png" alt="Aller en bas" /></div>');
});
Pour modifier l'étendue du saut et monter ou descendre plus ou moins vite au clic, vous pouvez modifier les valeurs +100 et -100.

Attention, le code qu'a donné creange a mettre dans le css est en fait le même code javascript, et ne doit pas être mis dans un css. Le code css approprié sera plutôt :
Code:
#updownbtn {
  position: fixed;
  top: 50%;
  right: 0;
}
#updownbtn img {
  display: block;
  cursor: pointer;
  margin: 5px;
}
MlleAlys

MlleAlys
Membre actif

Messages : 5728
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment ajouter des flèches haut et bas dans le forum ?

Message par creange Lun 12 Fév 2024 - 21:04

bonsoir Mlle Alys Effectivement  je viens de me rendre compte que j'avais mis le 
même code 2 fois  Mince
merci d'avoir rectifié
creange

creange
*****

Féminin
Messages : 741
Inscrit(e) le : 31/03/2011

https://dangela.forumgratuit.org/
creange a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment ajouter des flèches haut et bas dans le forum ?

Message par admin tt Lun 12 Fév 2024 - 22:03

Merci beaucoup MlleAlys
C'est très cool et fonctionne parfaitement Yes

je ñ'ai qu'une seule demande

Est-il possible d'ajouter deux flèches à droite et à gauche ?

https://i.servimg.com/u/f46/19/54/28/34/ocia_a10.png
Comment ajouter des flèches haut et bas dans le forum ? Ocia_a10


admin tt

admin tt
*

Messages : 33
Inscrit(e) le : 28/12/2022

https://dcrpgdarktruth.forumactif.org/
admin tt a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment ajouter des flèches haut et bas dans le forum ?

Message par MlleAlys Lun 12 Fév 2024 - 22:48

javascript à remplacer :
Code:
$(function(){
  $('body').append('<div id="updownbtn"><img onclick="defile(0,-1)" src="https://i.imgur.com/hkOmuCD.png" alt="Monter" /><br/><img onclick="defile(-1,0)" src="https://i.imgur.com/hkOmuCD.png" alt="Gauche" style="rotate: -90deg;"/><img onclick="defile(1,0)" src="https://i.imgur.com/hkOmuCD.png" alt="Droite" style="rotate: 90deg;"/><br/><img onclick="defile(0,1)" src="https://i.imgur.com/G3Io37u.png" alt="Descendre" /></div>');
});

function defile(x,y) {
  x = x*100;
  y = y*100;
  window.scrollBy(x,y);
}

J'ai mis les mêmes images pivotées et dans le même bloc que les précédents boutons.
Pour un peu de mise en forme et aligner les boutons, le css peut être complété ainsi avec "text-align: center;" :
Code:
#updownbtn {
  position: fixed;
  top: 50%;
  right: 0;
  text-align: center;
}
#updownbtn img {
  cursor: pointer;
  margin: 5px;
}

Vous pouvez changer la taille du "bond" du défilement en changeant les valeurs 100 ligne 6 et 7 du javascript (x : horizontal, y : vertical).
MlleAlys

MlleAlys
Membre actif

Messages : 5728
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment ajouter des flèches haut et bas dans le forum ?

Message par admin tt Lun 12 Fév 2024 - 23:54

Merci  Merci beaucoup MlleAlys  ::fleur::  ::fleur::  ::fleur::

C'est très cool et fonctionne parfaitement merci

::fete:: ::fete:: ::fete::


Merci MlleAlys   et creange flower
admin tt

admin tt
*

Messages : 33
Inscrit(e) le : 28/12/2022

https://dcrpgdarktruth.forumactif.org/
admin tt a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum