Javascript de scrollbar qui ne marche pas

[Kaiji]

Bonsoir !

Je viens de coder une boîte de texte avec une scrollbar personnalisée, vous trouverez le code ici : http://jsfiddle.net/timbuethe/Kgt7c/25/
Tout marche, sans aucun soucis, et puis... Quand je transvase sur mon forum de test, le défilement ne se fait plus du tout. Voilà mes codes :

Code:

<div style="position: relative; top: 103px; left: 37px;" id="scrollbar1">
    <div class="scrollbar">
        <div class="track">
            <div class="thumb">
                <div class="end"></div>
            </div>
        </div>
    </div>
    <div class="viewport" style="width: 188px; font-size: 9px; line-height: 110%; text-align: justify;">
        <div class="overview">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

Code:

#scrollbar1 {
    width: 198px;
    clear: both;
    margin: 20px 0 10px;
}
#scrollbar1 .viewport {
    height: 112px;
    overflow: hidden;
    position: relative;
}
#scrollbar1 .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
}
#scrollbar1 .thumb .end, #scrollbar1 .thumb {
    background-color: #003D5D;
}
#scrollbar1 .scrollbar {
    position: relative;
    float: right;
    width: 5px;
}
#scrollbar1 .track {
    background-color: #D8EEFD;
    height: 100%;
    width:5px;
    position: relative;
    padding: 0 1px;
}
#scrollbar1 .thumb {
    height: 20px;
    width: 5px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0;
}
#scrollbar1 .thumb .end {
    overflow: hidden;
    height: 5px;
    width: 13px;
}
#scrollbar1 .disable {
    display: none;
}
.noSelect {
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}

Et bien sûr le javascript que je n'ai pas touché, placé dans "Gestion des Javascript" où j'ai bien activé l'utilisation ! Du coup j'ai vraiment du mal à voir d'où vient le soucis...

Par ailleurs, j'aimerais utiliser cette scrollbar à plusieurs endroits du forum, malheureusement je ne sais pas comment faire puisqu'il s'agit d'un id, j'ai essayé de changer tout ça en class en remplaçant le # par un . dans le code javascript (et css) mais ça n'a de toute évidence pas marché, je suis à court d'idée...

Merci d'avance à qui m'aidera !

[Adam_sfp]

Bonjour

Vous avez également mis ce script?
http://baijs.nl/tinyscrollbar/js/jquery.tinyscrollbar.js

Cdt.

[Kaiji]

Bonjour ! Je l'ai ajouté mais ça ne marche malheureusement toujours pas...

Sinon, j'ai modifié

Code:

 $('#scrollbar1').tinyscrollbar();

en

Code:

$(document).ready(function(){$('.scrollbar1').tinyscrollbar(); });

pour remplacer les ids par les class, est-ce que c'est correct ?

[Adam_sfp]

Bonjour

Ou avez vous rajouté ce script?
http://baijs.nl/tinyscrollbar/js/jquery.tinyscrollbar.js

dans quel partie du forum faites vous le test (page d'accueil ou autres) ?

[Kaiji]

Je l'ai rajouté dans le template overall_header entre les balises head, comme ça :

Code:

<script src="http://baijs.nl/tinyscrollbar/js/jquery.tinyscrollbar.js" type="text/javascript"></script>

Et je fais les tests sur l'index du forum, la page d'accueil !

[Kaiji]

Up, je n'ai toujours pas trouvé de solution à mon problème

[Adam_sfp]

Bonjour

Logiquement cela devrait fonctionner...
J'utilise un autre plugin du même style qui fonctionne sur un forum.
http://areaaperta.com/nicescroll/
http://jsfiddle.net/adam_sfp/3kBDK/2/
Essayez peut être celui ci ...


Cdt

[Kaiji]

Bonjour !

Ça ne marche pas non plus, ça me fait le overflow:auto; normalement comme s'il n'y avait aucun script, pas de scrollbar personnalisée aux environs J'ai pourtant bien mis le fichier .js externe dans le overall_header, qui est bien publié, et l'autre code javascript sur toutes les pages...

[Adam_sfp]

bonjour

En testant de mon coté cela fonctionne..
Vous avez d'autres scripts?
si oui essayer en les desactivant..
Vous avez le lien du forum test avec les codes en places?

Cdt.

[Kaiji]

Il n'y en a qu'un, un javascript pour des onglets, qui lui fonctionne très bien =/ Après il y a les améliorations de FA, comme l'option "sélectionner le contenu" avec les balises codes, le bouton de sauvegarde, le sélecteur de couleur...
http://www.somebody-told-me.com/ Voilà le lien du forum où j'utilise le tout premier code de scrollbar, et voici le forum test où j'ai testé la scrollbar du dernier lien : http://kdr-rpg.forumactif.fr/forum (dans le "contexte" de la page d'accueil uniquement)

[Adam_sfp]

Bonsoir

il me semble une petite erreur dans le script celui ci

Code:

$(document).ready(function(){$(".scroller").niceScroll({cursorcolor:"#d3ddeb",cursoropacitymax:0.8,touchbehavior:false,smoothscroll:true,zindex:999999,cursorwidth:7,cursorborder:"2px solid #ebcbcf",cursorborderradius:"3px"})});

essayez

Code:

$(document).ready(function(){$(".scroller").niceScroll({cursorcolor:"#d3ddeb",cursoropacitymax:0.8,touchbehavior:false,smoothscroll:true,zindex:999999,cursorwidth:7,cursorborder:"2px solid #ebcbcf",cursorborderradius:"3px"});});

*Vous pouvez mettre plusieurs identifiants dans cette partie du code

Code:

{$(".scroller")

par exemple pour la barre de votre navigateur ajouter html

Code:

$(document).ready(function(){$(".scroller,html").niceScroll({cursorcolor:"#d3ddeb",cursoropacitymax:0.8,touchbehavior:false,smoothscroll:true,zindex:999999,cursorwidth:7,cursorborder:"2px solid #ebcbcf",cursorborderradius:"3px"});});

pour les différents paramètres activables ou non regardez dans la partie Configuration parameters du site.

Cdt.

[Kaiji]

Bonsoir !

Merci pour l'astuce c'est bon à savoir ! J'ai remplacé le script cela dit et ça ne fonctionne toujours pas en revanche, le overflow s'affiche toujours normalement... =(

[Adam_sfp]

Bonjour

Il y a tjrs une erreur dans le code
vous avez

Code:

$(document).ready(function(){$(".scroller,html").niceScroll({cursorcolor:"#d3ddeb",cursoropacitymax:0.8,touchbehavior:false,smoothscroll:true,zindex:999999,cursorwidth:7,cursorborder:"2px solid #ebcbcf",cursorborderradius:"3px"})});

Essayez

Code:

$(document).ready(function(){$(".scroller,html").niceScroll({cursorcolor:"#d3ddeb",cursoropacitymax:0.8,touchbehavior:false,smoothscroll:true,zindex:999999,cursorwidth:7,cursorborder:"2px solid #ebcbcf",cursorborderradius:"3px"});});

Cdt.

[Kaiji]

Bonjour

J'ai c/c la correction, mais toujours rien   

[Adam_sfp]

Bonjour

Quand je regarde sur votre forum test vous avez toujours ce code

Code:

$(document).ready(function(){$(".scroller,html").niceScroll({cursorcolor:"#d3ddeb",cursoropacitymax:0.8,touchbehavior:false,smoothscroll:true,zindex:999999,cursorwidth:7,cursorborder:"2px solid #ebcbcf",cursorborderradius:"3px"})});

au lieu de

Code:

        $(document).ready(function(){$(".scroller,html").niceScroll({cursorcolor:"#d3ddeb",cursoropacitymax:0.8,touchbehavior:false,smoothscroll:true,zindex:999999,cursorwidth:7,cursorborder:"2px solid #ebcbcf",cursorborderradius:"3px"});});

cdt.

[Kaiji]

Alors là je ne comprends rien du tout, parce que moi j'ai bien ce code :

Code:

$(document).ready(function(){$(".scroller,html").niceScroll({cursorcolor:"#d3ddeb",cursoropacitymax:0.8,touchbehavior:false,smoothscroll:true,zindex:999999,cursorwidth:7,cursorborder:"2px solid #ebcbcf",cursorborderradius:"3px"});});

Dans la gestion des javascripts... J'ai vérifié ne pas avoir fait de boulette en mettant le script également dans le overall_header mais non, je ne l'ai bien mis que dans la gestion des javascript et c'est bien la version corrigée que vous me donnez...

[Kaiji]

Re-bonjour !

Mon problème est résolu, vous pouvez archiver