Javascript de scrollbar qui ne marche pas

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

Résolu Javascript de scrollbar qui ne marche pas

Message par Kaiji le Ven 10 Jan 2014 - 1:23

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 !


Dernière édition par Kaiji le Dim 12 Jan 2014 - 18:06, édité 1 fois

Kaiji
****

Messages : 228
Inscrit(e) le : 06/06/2010

http://www.i-love-harvard.com/
Kaiji a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Adam_sfp le Ven 10 Jan 2014 - 10:13

Bonjour

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

Cdt.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Kaiji le Ven 10 Jan 2014 - 12:43

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 ?

Kaiji
****

Messages : 228
Inscrit(e) le : 06/06/2010

http://www.i-love-harvard.com/
Kaiji a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Adam_sfp le Ven 10 Jan 2014 - 13:33

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) ?

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Kaiji le Ven 10 Jan 2014 - 13:40

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
****

Messages : 228
Inscrit(e) le : 06/06/2010

http://www.i-love-harvard.com/
Kaiji a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Kaiji le Sam 11 Jan 2014 - 12:38

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

Kaiji
****

Messages : 228
Inscrit(e) le : 06/06/2010

http://www.i-love-harvard.com/
Kaiji a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Adam_sfp le Sam 11 Jan 2014 - 13:31

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

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Kaiji le Sam 11 Jan 2014 - 14:55

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 Sad 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...

Kaiji
****

Messages : 228
Inscrit(e) le : 06/06/2010

http://www.i-love-harvard.com/
Kaiji a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Adam_sfp le Sam 11 Jan 2014 - 15:19

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.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Kaiji le Sam 11 Jan 2014 - 15:26

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)

Kaiji
****

Messages : 228
Inscrit(e) le : 06/06/2010

http://www.i-love-harvard.com/
Kaiji a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Adam_sfp le Sam 11 Jan 2014 - 21:48

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.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Kaiji le Dim 12 Jan 2014 - 2:23

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... =(

Kaiji
****

Messages : 228
Inscrit(e) le : 06/06/2010

http://www.i-love-harvard.com/
Kaiji a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Adam_sfp le Dim 12 Jan 2014 - 8:15

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.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Kaiji le Dim 12 Jan 2014 - 12:46

Bonjour I love you

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

Kaiji
****

Messages : 228
Inscrit(e) le : 06/06/2010

http://www.i-love-harvard.com/
Kaiji a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Adam_sfp le Dim 12 Jan 2014 - 13:07

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.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Kaiji le Dim 12 Jan 2014 - 14:47

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
****

Messages : 228
Inscrit(e) le : 06/06/2010

http://www.i-love-harvard.com/
Kaiji a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Javascript de scrollbar qui ne marche pas

Message par Kaiji le Dim 12 Jan 2014 - 18:06

Re-bonjour !

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

Kaiji
****

Messages : 228
Inscrit(e) le : 06/06/2010

http://www.i-love-harvard.com/
Kaiji 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