Apparence scrollbar personnalisé en jQuery

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

Résolu Apparence scrollbar personnalisé en jQuery

Message par Oxalys le Jeu 18 Mai 2017 - 9:13

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Plusieurs utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bien le bonjour à tous et toutes,

Après de nombreuses recherches j’ai bien compris que Firefox n’aimait pas que l’on touche à l’apparence de ses scrollbars. Seulement beh faut bien l’avouer… elles sont moches leurs scroll ! C’est donc pour cette raison que je fais appel à une ou plusieurs âmes généreuses qui pourront m’aider puisque mes recherches m’ayant mené à savoir que c’était une chose possible que via jQuery et c’est une chose que je ne maitrise absolument pas Grrr J’ai bien trouvé un tuto explicatif, seulement la malchance étant totalement de mon côté il est totalement en anglais, langue que je ne maitrise pas non plus ::betise::

Donc voilà, j’espère qu’une âme bienfaitrice pourra m’aider, merci à vous d’avance Sourire2


Dernière édition par Oxalys le Dim 18 Juin 2017 - 15:59, édité 2 fois
avatar

Oxalys
*

Messages : 40
Inscrit(e) le : 03/01/2012

http://you-shall-not-pass.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par IzumiRK le Jeu 18 Mai 2017 - 17:28

Est-ce que tu peux m'envoyer ton tuto explicatif ? Je peux te le traduire en français Wink
avatar

IzumiRK
***

Messages : 116
Inscrit(e) le : 25/02/2015

http://indare-division.forumactif.com/
IzumiRK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys le Jeu 18 Mai 2017 - 17:30

Je te fais ça Smile
avatar

Oxalys
*

Messages : 40
Inscrit(e) le : 03/01/2012

http://you-shall-not-pass.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys le Mar 23 Mai 2017 - 15:36

UP
avatar

Oxalys
*

Messages : 40
Inscrit(e) le : 03/01/2012

http://you-shall-not-pass.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Chacha le Lun 29 Mai 2017 - 9:58

Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »
avatar

Chacha
Modéractif
Modéractif

Masculin
Messages : 55120
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys le Lun 29 Mai 2017 - 10:59

Toujours d'actu
avatar

Oxalys
*

Messages : 40
Inscrit(e) le : 03/01/2012

http://you-shall-not-pass.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys le Jeu 1 Juin 2017 - 16:13

Up
avatar

Oxalys
*

Messages : 40
Inscrit(e) le : 03/01/2012

http://you-shall-not-pass.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys le Dim 4 Juin 2017 - 11:18

Up
avatar

Oxalys
*

Messages : 40
Inscrit(e) le : 03/01/2012

http://you-shall-not-pass.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Chacha le Sam 10 Juin 2017 - 10:00

Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »
avatar

Chacha
Modéractif
Modéractif

Masculin
Messages : 55120
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys le Sam 10 Juin 2017 - 10:02

Toujours d'actu
avatar

Oxalys
*

Messages : 40
Inscrit(e) le : 03/01/2012

http://you-shall-not-pass.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Lixyr le Lun 12 Juin 2017 - 22:58

Bonjour,

Avez-vous essayé ceci ?
> modifier scrollbar


EN PRÉSENCE RÉDUITE LA SEMAINE - RÉPOND AUX MP
avatar

Lixyr
Aidactive
Aidactive

Féminin
Messages : 6013
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys le Lun 12 Juin 2017 - 23:06

J'ai ceci dans mon CSS, mais sous mozilla rien ne change.

Code:
/**************************************************** DÉBUT SCROLLBAR ****************************************************/
::-webkit-scrollbar {  height: 0.5px;  width: 1.5px;  background-color: #EBF0EF; /* couleur de fond */}
 
html > ::-webkit-scrollbar {  width: 1.5px; /*largeur de la barre*/}
 
::-webkit-scrollbar-thumb {  background: #DFDEBF; /* couleur de la barre qui se déplace */}
 
::-webkit-scrollbar-track-piece {  background-color:#EBF0EF; /* couleur de fond */}
::-ms-scrollbar {  height: 0.5px;  width: 1.5px;  background-color:#EBF0EF; /* couleur de fond */}
 
html > ::-ms-scrollbar {  width: 1.5px; /* largeur de la barre */}
 
::-ms-scrollbar-thumb {  background: #EBF0EF; /* couleur de la barre qui se déplace */}
 
::-ms-scrollbar-track-piece {  background-color: #EBF0EF; /* couleur de fond */}
::-moz-scrollbar {  height: 0.5px;  width: 1.5px;  background-color: #EBF0EF; /* couleur de fond */}
 
html > ::-moz-scrollbar {  width: 1.5px; /* largeur de la barre */}
 
::-moz-scrollbar-thumb {  background: #DFDEBF; /* couleur de la barre qui se déplace */}
 
::-moz-scrollbar-track-piece {  background-color: #EBF0EF; /* couleur de fond */}
::-o-scrollbar {  height: 2px;  width: 1.5px;  background-color: #EBF0EF; /* couleur de fond */}
 
html > ::-o-scrollbar {  width: 0.5px; /* largeur de la barre */}
 
::-o-scrollbar-thumb {  background: #DFDEBF; /* couleur de la barre qui se déplace */}
 
::-o-scrollbar-track-piece {  background-color: #EBF0EF; /* couleur de fond */}

/**************************************************** FIN SCROLLBAR ****************************************************/

Et je viens de tester le code proposé, rien n'a changé.
avatar

Oxalys
*

Messages : 40
Inscrit(e) le : 03/01/2012

http://you-shall-not-pass.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Lixyr le Lun 12 Juin 2017 - 23:25

En effet. Firefox, toujours à la traine. Pour ce navigateur, il faut effectivement passer par JavaScript. Je vais voir à trouver un tuto pas trop dur à comprendre, ou à expliquer.


EN PRÉSENCE RÉDUITE LA SEMAINE - RÉPOND AUX MP
avatar

Lixyr
Aidactive
Aidactive

Féminin
Messages : 6013
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys le Lun 12 Juin 2017 - 23:31

Merci beaucoup Smile
avatar

Oxalys
*

Messages : 40
Inscrit(e) le : 03/01/2012

http://you-shall-not-pass.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys le Sam 17 Juin 2017 - 10:02

Up
avatar

Oxalys
*

Messages : 40
Inscrit(e) le : 03/01/2012

http://you-shall-not-pass.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Milouze14 le Sam 17 Juin 2017 - 12:01

Hello Oxalys,

tu as ce script nicescroll qui pourrait répondre à ta demande:
http://epicadesign.fr/personnaliser-votre-barre-de-scroll/


Va sur cette page html:

https://raw.githubusercontent.com/inuyaksa/jquery.nicescroll/master/jquery.nicescroll.js

sélectionnes tout le contenu et déposes celui-ci dans le module suivant;

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Coches sur toutes les pages.
Déposes le contenu sélectionné:


Penses à cliquer sur le bouton


Ensuite on va créer un autre pour faire l'appel.

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Coches sur toutes les pages.

Déposes ceci:
Code:

$(function(){
  $('body').niceScroll();  // let's do the magic!
});


Penses à cliquer sur le bouton

Ensuite tu peux paramétrer cette scroolbar pour son apparence dans le premier script ici:
Code:

var _globaloptions = {
    zindex: "auto",
    cursoropacitymin: 0,
    cursoropacitymax: 1,
    cursorcolor: "#424242",
    cursorwidth: "6px",
    cursorborder: "1px solid #fff",
    cursorborderradius: "5px",
    scrollspeed: 60,
    mousescrollstep: 8 * 3,
    touchbehavior: false,  // deprecated
    emulatetouch: false,    // replacing touchbehavior
    hwacceleration: true,
    usetransition: true,
    boxzoom: false,
    dblclickzoom: true,
    gesturezoom: true,
    grabcursorenabled: true,
    autohidemode: true,
    background: "",
    iframeautoresize: true,
    cursorminheight: 32,
    preservenativescrolling: true,
    railoffset: false,
    railhoffset: false,
    bouncescroll: true,
    spacebarenabled: true,
    railpadding: {
      top:0,
      right: 0,
      left: 0,
      bottom: 0
    },

La largeur se trouve ici:
Code:
 cursorwidth: "6px",
La bordure ici:
Code:
cursorborder: "1px solid #fff",
Les arrondis ici:
Code:
cursorborderradius: "5px",

Ensuite si tu as activé la toolbar il faudra remplacer le 0 par 30 ici:
Code:
   
railpadding: {
      top:0,

Wink .

a++
avatar

Milouze14
Membre actif

Masculin
Messages : 4825
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys le Dim 18 Juin 2017 - 14:48

Bonjour,

Merci pour ta réponse !
Après avoir mis les deux java, toujours aucun changement des scroll' sous firefox :/
avatar

Oxalys
*

Messages : 40
Inscrit(e) le : 03/01/2012

http://you-shall-not-pass.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Milouze14 le Dim 18 Juin 2017 - 15:33

Hello Oxalys,

hum, le script ne figure pas sur le forum mentionné dans ta demande.
Tu as bien coché sur toutes les pages pour les deux scripts ?

a++
avatar

Milouze14
Membre actif

Masculin
Messages : 4825
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys le Dim 18 Juin 2017 - 15:48

Pourtant il y est, alors en fait je viens de comprendre ! La scrollbar a droite c'est good, mais est-ce qu'il y a un moyen de l'appliquer a toutes les scrollbar du forum ? (notamment pour le profil surtout)
avatar

Oxalys
*

Messages : 40
Inscrit(e) le : 03/01/2012

http://you-shall-not-pass.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Milouze14 le Dim 18 Juin 2017 - 15:51

Re,
hum il vaudrait mieux te contenter des scrolls actuels sous risque d'avoir un visu tronqué.


a++
avatar

Milouze14
Membre actif

Masculin
Messages : 4825
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Apparence scrollbar personnalisé en jQuery

Message par Oxalys le Dim 18 Juin 2017 - 15:58

D'accords, merci beaucoup à toi !! Yes
avatar

Oxalys
*

Messages : 40
Inscrit(e) le : 03/01/2012

http://you-shall-not-pass.forumactif.com/
Oxalys a été remercié(e) par l'auteur de ce sujet.

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


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