Accueil du site > Squelettes > Outils pour squelettes > jScrollPane > jScrollPane

jScrollPane

7 septembre 2010 – par PieroWbmstr – 17

3 votes

Cet outil ajoute le plugin « jScrollPane » de la bibliothèque jQuery à SPIP, utilisable dans vos pages publiques. Il permet de définir des blocs CSS avec un scroller personnalisé (ascenseur permettant de se déplacer dans le bloc et d’en fixer la taille).

Page de démonstration : http://spip.pierowbmstr.fr/spip.php... (documentation livrée avec le plugin).

Installation

Téléchargez l’archive ’Plugin jScrollPane (version stable)’ de cette page vers le dossier de plugins de votre SPIP
Installez le plugin depuis votre espace privé comme expliqué ici : http://www.spip.net/fr_article3396.html.

À noter que le plugin est hébergé sur un serveur distant. Sa dernière version stable est toujours disponible à la même URL (cela peut permettre une mise à jour automatique) : http://projets.ateliers-pierrot.fr/....

Aperçu

Copie d'écran d'une div « scrollée »

Utilisation de la balise

Le scroller s’utilise dans vos squelettes grâce à la balise #SCROLLBOX à insérer n’importe où dans la page :

#SCROLLBOX{#div_id,width,arrow_width,arrow_visible}

avec les options suivantes :

div_id (obligatoire) : l’identifiant ou la classe du bloc CSS sur lequel appliquer les scrollers (bien préciser le dièse ou le point),
width (20px par défaut) : l’épaisseur du dragueur,
arrow_width (20px par défaut) : la taille des flèches,
arrow_visible (par défaut « oui ») : doit-on présenter les flèches ou non.

Personnalisation

Vous pouvez personnaliser les styles CSS et les images utilisées pour les flèches et le dragueur dans le fichier « css/jScrollPane.css » (différents sets d’images sont proposés dans le répertoire « img_pack/ » [1]).

Lame Couteau Suisse

Une version du plugin a été mise en place pour s’intégrer en tant que lame du Couteau Suisse. Pour l’utiliser, téléchargez l’archive ci-dessous et suivez les instructions du fichier « READ_ME.txt ». Une fois installée, une lame « Des ascenseurs dans SPIP » apparaît dans la catégorie ’Affichage public’ du Couteau Suisse [2].

Conditions d’utilisation

Attention :
- Vérifiez bien que vos squelettes utilisent la balise #INSERT_HEAD [3] !
- Vérifiez bien que les deux plugins jQuery ci-dessous ne soient pas déjà présents dans vos pages [4] !

Licences :
- jquery.mousewheel.js (v. 3.0 pour jQuery 1.2.2+) : copyright © 2006 Brandon Aaron sous double licence MIT et GPL
- jquery.scrollpane.js : copyright © 2006 Kelvin Luck sous double licence MIT et GPL

Notes

[1] Deux fichiers de travail sont proposés dans le plugin, pour vous aider à créer vos propres images, si besoin est. Ces fichiers sont au format ’.psd’ (Photoshop).

[2] Si vous utilisez le plugin sous forme de lame, essayez tant que possible de ne pas cumuler avec la version individuelle du plugin Scrolling Box afin de ne pas risquer de surcharge (les scripts ne devraient pas créer de conflit, mais mieux vaut ne pas tenter le diable !).

[3] C’est le cas des squelettes de la distribution standard de SPIP.

[4] Si un conflit survient, commentez la ou les ligne(s) concernée(s) de la fonction « scrollbox_insert_head() » du fichier « scrollbox_options.php » (attention à ne pas commenter la fonction en elle-même !).

Vos commentaires

# Le 5 décembre 2011 à 18:00, par fd En réponse à : jScrollPane

Salut et merci pour ce plugin, par contre je deviens fou, j’ai 2 problèmes :
1) malgré que jai spécifié une largeur de 20 px (dans le code source l’appel js se fait bien à 20px), autant la barre que les boutons apparaissent à moitié, coupés en 2 en horizontal. Je vois donc la moitié des boutons (largeur 5px) et de la barre. Ai essayé de spécifier dans le css la largeur, de déplacer la barre rien à faire. Qu’est ce qui pourrait créer ceci ?
2) La barre se trouve dans le bloc « contenu » qui lui même est entouré d’une autre div à droite et une autre à gauche. Dès que j’active le scroll, la div de droite part en bas hors du cadre. Avec firebug je suis entrain de tout essayer, enlever les padding, réduire les div en largeur, ai vidé le cache...bref rien y fait

des symptômes connus ?
- # ^ Le 5 décembre 2011 à 20:18, par PieroWbmstr En réponse à : jScrollPane
  
  Salut FD,
  
  Non, ces symptômes ne sont pas vraiment connus (d’ailleurs, le plugin est assez ancien et n’a pas beaucoup de retours ...).
  
  Par contre pour t’aider j’aurai besoin d’un peu plus d’infos :
  - copie du squelette avec la balise #SCROLLBOX
  - copie du CSS associé
  - copie d’écran du résultat (l’original en ligne serait encore mieux).
  
  Pour les flottants autour de la div scrollée, j’ai testé et ça semble fonctionner (il faut un peu bidouiller pour celle de droite mais ça fonctionne).
  
  Une astuce pour tes tests est de partir de la doc interne du plugin : le fichier « contenu/doic_scrollbox.html ». S’il ne fonctionne pas dès le départ c’est qu’il y a un souci externe, sinon, à toi de tester étape par étape ...
  
  Tiens moi au courant
  PiWi
Répondre à ce message
# Le 7 juillet 2011 à 12:14, par arriflex En réponse à : jScrollPane

Bonjour et merci pour ce plugin super !

Pourriez-vous expliciter la balise pour ne pas avoir les flèches. Sur mon site [(#SCROLLBOX{#conteneur,20,20,non})] ne fonctionne pas et n’affiche rien, tout comme [(#SCROLLBOX{#conteneur,20,20,"non"})]

Merci beaucoup et bonne journée !
- # ^ Le 7 juillet 2011 à 13:45, par PieroWbmstr En réponse à : jScrollPane
  
  Salut, content qu’il te plaise ...
  
  Pour les flèches, effectivement ... la fonctionnalité de marchait plus :-(
  
  C’est rectifié ;-)
  
  Dispo pour la version 1.03 là : http://projets.pierowbmstr.fr/SPIP_...
  
  ++ P.
Répondre à ce message
# Le 23 mai 2011 à 18:36, par ? En réponse à : jScrollPane

Bonjour, je ne comprends vraiment ce qu’il faut faire pour que cela fonctionne au niveau du squelette,
#SCROLLBOX#div_id,width,arrow_width,arrow_visible
Pouvez vous montrer un exemple précis@div_id="lenomdeladiv" etc etc
Merci
- # ^ Le 24 mai 2011 à 13:16, par PieroWbmstr En réponse à : jScrollPane
  C’est très simple en fait :
  
  #SCROLLBOX{#div_de_test_scroll}
  
  <div id="div_de_test_scroll" style="height: XXXpx;">
  
  Mon contenu qui apparaîtra en zone scrollable (si 'height' est assez petit)
  
  </div>
  
  Télécharger
  
  Et hop !
  
  Les arguments 2 à 4 de la balise ne sont utiles que si on modifie les images utilisées pour représenter les flèches et le dragueur dans le fichier CSS.
  Le deuxième argument correspond à l’épaisseur du dragueur (en pixels), le troisième à la taille des flèches (en haut et en bas de la zone de dragage, en pixels) et le dernier est un booléen demandant si oui ou non, on doit présenter lesdites flèches.
  
  ++ P.
- # ^ Le 24 mai 2011 à 15:35, par ? En réponse à : jScrollPane
  Merci pour la rapidité de la réponse,
  j’ai effectué les modifications comme suit
  
  #SCROLLBOX{#contientexte}
  
  <div id="contientexte" style="height: 600px;">
  
  [(#TEXTE|image_reduire{500,0})]</div>
  
  Télécharger
  
  la div ou je souhaite faire apparaitre le scroll se nomme contientext, comme son nom l’indique elle contient le texte principal de l’article ainsi que les possibles images. Cela fonctionne en effet, mais la div a changé de taille elle est devenue trois fois moins large, et je ne m’explique pas ce fait il y a t il un css dans un autre fichier du plugin qui est en cause.
  De plus dans votre explication je n’ai pas très bien compris les arguments 2 à 4 ni comment ils se modifient faire apparaitre ou non les flèches, largeur …
  Vous l’avez compris je débute…
- # ^ Le 25 mai 2011 à 20:03, par PieroWbmstr En réponse à : jScrollPane
  Salut,
  
  Il n’y a pas de CSS ailleurs que dans le fichier « jScrollPane.css » dans le plugin. Peut-être avais-tu défini quelques CSS avant de l’utiliser ??
  En tout cas, la différence de taille ne vient pas du plugin. Ce que tu peux faire ici c’est définir directement le « width » dans ton argument « style », même en % ou en em, tu seras sûr que ça ne vient pas d’une définition CSS extérieure.
  Exemple :
  
  #SCROLLBOX{#contientexte}
  
  <div id="contientexte" style="height: 600px;width: 76%;">
  
  [(#TEXTE|image_reduire{500,0})]</div>
  
  Télécharger
  
  Les arguments suivants de la balise (2 à 4) ne sont utiles que si tu utilises d’autres images que celles du plugin pour les ascenseurs (les deux flèches haut et bas et le dragueur).
  Sur ce point, le plus simple est que tu me dises ce que tu veux utiliser, je te montrerai comment coder la balise.
  
  Courage, et bienvenue chez SPIP alors ;-)
  ++ P.
Répondre à ce message
# Le 1er février 2011 à 18:35, par fd En réponse à : jScrollPane

le téléchargement ne fonctionne pas !!
ca fonctionne sur une 2.1.8 ?
- # ^ Le 1er février 2011 à 20:35, par PieroWbmstr En réponse à : jScrollPane
  
  Salut,
  
  Malheureusement, mon serveur perso a planté !!
  J’ai tout mis là en attendant (il faut chercher un peu, les plugins sont au format ZIP) : http://pierrecassat.free.fr/spip/
  
  Ca fonctionne sur 2.1.8 bien sûr ;-)
Répondre à ce message
# Le 13 décembre 2010 à 00:26, par polar-oïd En réponse à : jScrollPane
Bonjour,

- Je teste la bête sur SPIP 2.1.2 :

- Configuration de la balise comme suit :

[(#SCROLLBOX{#scrollboite,18,20,1})]

- Implémentation de la balise dans article.html contenant bien :

#INSERT_HEAD

- Le script apparaît bien dans la page sous la forme :

<script type="text/javascript">

$(function(){

$("#scrollbox").jScrollPane({ showArrows: 1, scrollbarWidth: 18, arrowSize: 20 });

});

</script>

Télécharger

J’implémente la division et le contenu suivant :

<div id="scrollboite">

Lorem ipsum (...)

</div>

Télécharger

- Je vide la cache
Le plugin ne fait pas son travail ! Une idée ?

Note : j’ai testé avec le plugin installé dans /www/plugins puis dans /www/plugins/auto puis selon la méthode d’ajout d’une lame au couteau suisse. Rien n’y fait …

Est-ce un problème de paramétrage de balise ? Mon protocole est-il erroné ? Est-ce un problème de version de SPIP ? J’ai bien vérifié aussi que jquery.mousewheel.js et jquery.scrollpane.js n’était pas déjà chargés par d’autres plugins par exemple, ce qui ici n’est pas le cas …………

Si cela parle à quelqu’un je suis preneur, merci d’avance !
- # ^ Le 13 décembre 2010 à 11:05, par PieroWbmstr En réponse à : jScrollPane
  
  Salut Pola (...),
  
  A vérifier, dans l’ordre (en utilisant le plugin et non la lame du couteau suisse, c’est préférable *) :
  
  1- Dans ton ticket, tu mets « scrollboite » dans la balise alors que « scrollbox » apparaît dans le script JS ... peut-être une confusion ?
  
  2- Est-ce que tu définis bien une hauteur maxi pour la div ? ("height :..." dans le CSS ou dans le squelette de la page) A défaut, sur certaines version d’IE, le scroller n’apparaît pas du tout (sur d’autres versions et sous Mozilla, il apparaît sans permettre de scroller puisque la div adapte sa hauteur au contenu)
  
  3- Si rien de tout ça n’a donné de résultat (ça va être plus compliqué que prévu !) :
  - quelle version exacte de SPIP (entre crochets en bas des pages privées) ?
  - avec quels autres plugins ?
  - quel est le squelette complet contenant la balise SCROLLBOX ?
  - quel navigateur et quelle version utilises-tu ?
  
  J’éspère que l’un des deux premiers points réglera ton problème ... sinon on devrait trouver en répondant aux questions du troisième (conflit javascript, version du navigateur ... il y a forcément un problème quelque part).
  
  * Bien penser à retirer complètement les fichiers de définition de la lame le cas échéant. Dans le doute, réinstaller le Couteau Suisse ...
- # ^ Le 20 janvier 2011 à 20:48, par Renée Picard En réponse à : jScrollPane
  
  Bonjour
  Merci pour ce plugin.
  
  Je l’ai installé sur un site encore en construction et tout va très très bien. Est-il possible de donner un comportement plus fluide du genre ancre douce ou changement de page lorsqu’on consulte les plugins du site de SPIP-contrib ?
  
  Merci RP
- # ^ Le 21 janvier 2011 à 04:42, par Renée Picard En réponse à : jScrollPane
  
  Allo
  Je pense ne pas bien comprendre ce que tu veux dire par ;
  À noter que le plugin est hébergé sur un serveur distant. Sa dernière version stable est toujours disponible à la même URL
  J’ai téléchargé le plugin par cette page de SPIP-CONTRIB.
  Est-il complet ?
  Merci
  RP
- # ^ Le 21 janvier 2011 à 07:53, par PieroWbmstr En réponse à : jScrollPane
  
  « Hébergé sur un serveur distant » signifie simplement que le code du plugin n’est pas développé ni hébergé sur « la zone » de SPIP (cf. http://zone.spip.org/trac/spip-zone/), à la différence de la majorité des plugins de spip-contrib.
  
  Il est donc hébergé ailleurs, mais le zip de « cette page de SPIP-CONTRIB » correspond toujours à sa dernière version stable. Donc oui, le plugin de « cette page de SPIP-CONTRIB » est complet et fonctionnel ... c’est la dernière version stable du plugin.
Répondre à ce message
# Le 20 janvier 2011 à 20:55, par Renée Picard En réponse à : jScrollPane

Bonjour

Je viens d’aller visiter le site http://www.pierowbmstr.fr
Est-ce que ce site va héberger longtemps ce scipt ?
Pourquoi n’est-il pas disponible pour le mettre sur notre propre site ?
Il me semble que cela serait plus certain ?

Merci
RP
- # ^ Le 20 janvier 2011 à 21:31, par PieroWbmstr En réponse à : jScrollPane
  
  Bonsoir,
  
  je n’ai pas tout compris mais je réponds aux deux tickets en même temps :
  
  D’abord, le site spip.pierowbmstr.fr est juste un site de démo ... le plugin est téléchargeable et utilisable sur un site personnel, bien sûr ! (d’où l’existence de cette page d’ailleurs)
  
  Pour la fonctionnalité ’ancre douce’, c’est une fonction Javascript assez complexe à mettre en place ... Si je comprends bien, l’idée serait de « scroller en douceur » dans la boîte à l’intérieur de la page c’est ça ? donc utilisable depuis un lien de cette boîte vers une ancre de cette même boîte ? si c’est bien ça, il doit y avoir un moyen d’utiliser le plugin Ancres douces moyennant un sérieux travail d’adaptation (il faudrait je pense simuler une fenêtre de navigateur dans le boîte ...).
  
  codage et courage ;-)
  ++
Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Courriel (non publié)

Pour afficher votre trombine avec votre message, enregistrez-la d'abord sur gravatar.com (gratuit et indolore) et n'oubliez pas d'indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )

Texte de votre message

Ajouter un document

gif, jpg, png

SPIP-Contrib

jScrollPane

Installation

Aperçu

Utilisation de la balise

Personnalisation

Lame Couteau Suisse

Conditions d’utilisation

Notes

Rubriques

Derniers commentaires

Compatibilité

Téléchargement(s)

Sur le Web

Vos commentaires

Répondre à cet article

Ça discute par ici

Transaction : créer des formulaires avec paiement en ligne

Formulaire de contact avancé

Squelette Multi-Saisons

JQuery Masonry

Thélia

Ça spipe par là

SPIP Blog

SPIP Party

SPIP Forums

SPIP-Zone

SPIP SVN