Bouton haut/bas

[Lalittle]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : non défini
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://in-morues-we-trust.forumactif.com/

Description du problème

Bonjour à tous !

J'ai ajouté sur le forum des flèches haut/bas pour faciliter la navigation des personnes (dont je fais partie) naviguant en version web.

Cependant ces flèches s'affichent également sur la version mobile où elles ne servent à rien et de surcroît sont même plutôt gênantes.

Pourriez-vous me dire comment modifier le code afin qu'elles apparaissent uniquement sur la version web ?

Et s'il serait également possible, en parallèle, de connaître la modification à faire pour éventuellement mettre les flèches l'une au-dessus de l'autre, plutôt que côte à côte... ça pourrait être mieux dans le fond...

Voici ce que j'ai mis :

Code:

.bouhautbas
{
bottom: 50px;
position: fixed;
right: 0px;
z-index: 100;
width: 62px;
}

Merci infiniment par avance...  

[Toryudo]

Bonjour !

Pouvez-vous indiquer de quelle façon vous avez ajouté les flèches ?
Ça aidera sûrement à y voir plus clair sur la façon de répondre à votre demande, au moins pour mettre les flèches l'une sous l'autre.

[Lalittle]

Bonjour à vous !

Eh bien j'ai mis le code dans la feuille css (celui que j'ai copié/coller juste au-dessus je veux dire).
Je ne crois pas avoir fait quoi que ce soit de plus...

[Jawn]

Coucou ! Pour avoir les flèches l'une au dessus de l'autre, réduit simplement le width dans ton CSS ^^
J'ai fais un test avec

Code:

.bouhautbas {
  bottom: 50px;
  position: fixed;
  right: 0;
  z-index: 100;
  width: 28px;
}

Et ça met bien les boutons l'un au-dessus de l'autre ~

[Lalittle]

Merci beaucoup pour cette réponse !!!
Je ferai ça bien vite et reviendrai vous dire  

Y a-t-il une solution pour modifier le code afin qu'elles apparaissent uniquement sur la version web sans "polluer" la version mobile qui possède déjà sa flèche de navigation ?

[Lalittle]

Me revoilà avec d'abord un erratum (pardon Toryudo !!): je n'ai pas fait que le css, j'ai aussi ajouté ça en script :

Code:

$(function(){
          $("body").append('<div class="bouhautbas"><a href="#top"><img src="https://i.servimg.com/u/f97/20/45/63/81/arrow-27.png" alt="Aller en haut" /></a> <a href="#bottom"><img src="https://i.servimg.com/u/f97/20/45/63/81/arrow-26.png" alt="Aller en bas" /></a></div>');
});

Je viens de modifier le css pour la position des flèches c'est impec, elles sont bien l'une au-dessus de l'autre !!

Merci encore hein  

[Toryudo]

D'accord, dans ce cas, je pense que si vous modifiez comme ça, ça ne s'affichera plus que sur la version web :

Code:

$(function(){
  if (_userdata["tpl_used"] == "modernbb"){
    $("body").append('<div class="bouhautbas"><a href="#top"><img src="https://i.servimg.com/u/f97/20/45/63/81/arrow-27.png" alt="Aller en haut" /></a> <a href="#bottom"><img src="https://i.servimg.com/u/f97/20/45/63/81/arrow-26.png" alt="Aller en bas" /></a></div>');
  }
});

[Lalittle]

Bonjour !
J'ai appliqué la modification à l'instant et c'est tout simplement par-fait !!!

Merci infiniment à vous deux d'avoir offert un peu de votre temps pour m'aider...