"Historique"
plugin.scrollbar.js est mon premier plugin JQuery. Le besoin de cette création est apparu avec le développement du site d’un ami : Damien Balada
Après quelques petites recherches, je suis arrivé sur jquery UI, qui propose un slider. Mais ce dernier fonctionne par "cran" et perd donc un peu en fluidité. Je me suis donc lancé dans ce développement, plein de détermination, le regard fixé sur l’écran, en oubliant de cligner des yeux.
Après quelques de semaines de travail, j’arrive enfin à un résultat acceptable, suffisament en tout cas pour avoir envie de le partager.
Description de ce plugin Jquery
Ce plugin n’a qu’une seule utilité. Celle de créer une scrollbar dans un élément de votre choix pour afficher un contenu d’une taille supérieure à celle de l’espace visible. Il s’adresse surtout à ceux (et celles) qui ne veulent plus voir la scrollbar du navigateur. La gestion du sroll molette est également intégrée à ce plugin, mais reste désactivable.
Pas mal de choses sont facilement configurables, la taille et la position de la scrollBar, du bouton. Il est également possible de définir plusieurs styles. Quand la taille de l’espace visible (taille_englobe) et de la scrollbar (taille_scrollbar) sont en auto, les dimensions s’adaptent automatiquement à l’espace disponible et s’adaptent à chaque redimensionnement de la fenêtre.
Mise en place
Ce plugin nécessite quelques autres fichiers javascript pour fonctionner : jquery-1.4.2.min.js, ui.core-1.7.2.js, ui.draggable-1.7.2.js et jquery.mousewheel.min.js l’appel du plugin ce fait de cette façon là :
$("#contenu").scrollbar();
});
#contenu étant l’id de l’élément qui accueillera la scrollbar. Les options du plugin
- taille_englobe : Taille de l’espace visible. Accepte soit une valeur numérique, soit "auto" pour prendre toute la place disponible
- taille_scrollbar : Taille de la scrollbar. Accepte soit une valeur numérique, soit "auto" pour prendre toute la place disponible
- taille_bouton : C’est la taille du bouton de la scrollbar, doit être une valeur numérique
- pas : Pas du scroll molette. C’est à dire la valeur du déplacement à chaque cran de la molette. Doit être une valeur numérique
- molette : true ou false. Active ou non la prise en compte de la molette de la souris
- drag : true ou false. Active ou non la présence de la scrollbar
- debug : true ou false. Affiche ou non la console de debug
- style : Choix des styles de la scrollbar. Par défaut il n’y a que ’basic’
- position : Position de la scrollbar. droite ou gauche
- alignement_scrollbar : Alignement de la scrollbar. haut, centre ou bas
- orientation : Orientation du contenu. Paysage ou portrait. Dans cette version, seul portrait est disponible
- marge_scroll_contenu : Marge entre la scrollbar et le contenu. Doit êter une valeur numérique.
- largeur_scrollbar : Largeur de la scrollbar et du bouton. Doit être une valeur numérique.
Démo :
Téléchargement
Télécharger cette démo (contient une version compréssée et une commentée du plugin) :
-
- Plugin JQuery : Scrollbar
Télécharger uniquement la version compressée : plugin.scrollbar-min.js
Télécharger uniquement la version commentée : plugin.scrollbar.js
88 Messages de forum
-
Super ton plugin,
cependant je viens de le tester sur ie et il me donne une erreur sur la variable padBot ???
C’est tu de quoi cela peut venir.Merci d’avance
-
Salut,
Effectivement, une petite coquille c’est glissée dans le javascript. Ligne 107, il y avait css(’padding-bttom’) au lieu de css(’padding-bottom’) !! Donc forcément, ça pouvait pas marcher
J’en ai également profité pour corriger un petit bug sur IE qui ne respecte pas bien l’overflow:hidden, si l’élément n’est pas en position:relative ;
La bonne version est en ligne !
-
Petite mise à jour, le curseur au survol du bouton est maintenant une main. Merci @Kerweb
-
Bonjour,
J’utilise votre plugin (JQuery Scrollbar) pour un projet personnel. J’utilise également le framework Easy (http://easyframework.com/) qui est basé sur Jquery également.
Ma question est :
Je souhaite savoir si je peux définir la hauteur du div à défiler à la volé. Comment faire ?
-
Salut Mama,
Bien joué et merci ! J’étais parti pour utiliser le slider de Jquery UI sur un projet en cours, et je me suis souvenu que t’avais bossé sur un truc similaire il y a un moment. Ben du coup y a carrément un plugin tout fait, ça rigole pas ! :D
Je te fais un petit retour technique après quelques tests.
tcho’Voir en ligne : http://jeanbaptisteaudras.com
-
Salut !
j’ai utilise ton plugin qui est en l’occurence trés bien . J’avais juste un petit bug , mon conteneur est plus haut que mon affichage , donc lorsque je scrollais #englobe , cela avais pour effet de scroller aussi ma fenêtre du navigateur !
j’ai donc rajouter à la ligne 229 après "déplacement_bouton(top_contenu) ;" ce petit bout de code => "event.preventDefault() ;"
qui empêche le défilement de l’extérieur de la boite .Encore merci pour ce super plugin !
Matt
-
par ??? 19 novembre 2010 11:32, par hattoa
Merci Mat !!!!!!!!!!!!!!!
et GG à l’auteur pour ce plugin !!
-
-
Merci pour ce plugin !
J’aimerais pouvoir l’utiliser également sur une page contenant des ancres. Et pour le moment, ça ne marche pas...
Une idée ?
Merci beaucoup !
nora -
@Nora : pour gérer les ancres, il faudrait quelquechose comme :
$("a.ancre").click(function()
$(’#englobe’).css(’top’:depl_contenu+"px") ) ;@Matt : Ok c’est noté, merci !
@Jb : J’avais un peu de temps, et envie de comprendre comment créer un plugin pour JQuery, c’est chose faite. Tiens moi au jus si tu as des retours à faire !
@pcmania : c’est la variable taille_contenu dont tu as besoin, qui est initialisé à la ligne 100.
Merci à vous pour les retours !
-
Je viens de découvrir ce pluging bien sympa pour rendre plus agréable un défilement dans une div.
Par contre, comment faire pour supprimer l’affichage du debug à côté de l’exemple ?
Merci. -
J’ai vu que l’on pouvait indiquer false pour désactiver le debug mais ce qui m’intéresse c’est de savoir si cette fonction est réellement utile et si non comment retirer les scripts qui ne servent alors pas ?
Merci.-
par ??? 13 août 2010 08:52, par Créamama
Salut CaroGraff,
Cette fonction est utile dans la mesure où tu veux avoir le détail de positionnement des différents éléments. Sinon, on peut la supprimer sans aucun problème :
pour virer définitivement la fonction de bug, édite le fichier plugin.scrollbar.js et supprime les lignes suivantes :
ligne 24, ligne 144, ligne 194, ligne 230 et les lignes 234 à 259.
Voir en ligne : creamama
-
-
J’adore !!
Exactement ce que je recherchais !
Merci beaucoup !Voir en ligne : http://www.y-and-u.com
-
Bonjour,
Magnifique votre plugin. Pourriez vous m’indiquer ou puis-je changer le style et la couleur de la scroll bar ?
Merci
-
rebonjour,
peut-on remplacer le curseur de la scroll bar par une image ?
Merci pour votre retour
-
@Mohammed, Pour mettre une image, modifier le fichier javascript, ligne 176 :
'background':'url(VOTRE IMAGE)'-
par ??? 17 septembre 2010 14:31, par Mohammed
Merci bcp pour votre réactivité.
-
-
bonjour,
je voudrais utiliser votre script a un endroit localiser, comment faire pour désactiver le centrage ?
Merci d’avance...
Voir en ligne : http://fritsch-associes.com/work-in...
-
@Arnaud
Dans l’exemple en ligne, la div est centrée dans la feuille de style (style.css)
#contenu{margin:0 auto;}supprimez le ’auto’ est la div devrait être à gauche
-
merci pour votre rapidité !
excellent script ! -
Bonjour,
Super plugin !
J’aimerais pouvoir passer une valeur en param dans ce style :
<script type="text/javascript">
$(document).ready(function(){
$("#contenu").scrollbar(
taille_englobe:"205"
);
});
</script>Possible ???
-
Héhé , ca fonctionne ;)
J’adoreeeeee !<script type="text/javascript">
$(document).ready(function(){
$("#contenu").scrollbar({
taille_englobe:"205"
});
});
</script> -
Salutations :)
Je cherche une solution de ce genre....
mais pour une iframe... je débute (du moins avec jq)
et toutes remarques à ce sujet me serait d’un grand secour...
(j’ai rien vu à ce sujet plus haut alors j’imagine que ça ne s’applique qu’aux div)Merci d’avance
Bravo pour ce formidable travail :D
-
unfortunatelly it doesnt work at all in my project :((
-
Bonjour et merci pour ce plugin qui est exactement ce dont j’ai besoin !
Cependant j’ai un soucis, lors de l’ouverture de ma page une fenêtre s’ouvre et me dis "pas de scrollbar", la scrollbar basique s’affiche pourtant normalement, pouvez vous me dire d’où vient ce problème ? Ai je sauté une étape ?
-
Hello,
Super, par contre ne marche pas sous IE8, la preuve avec cette page... Des idées ?
Et pour avoir plusieurs scrollbar dans la meme page ? un idée aussi ? elles se mettent cote à cote.. :p
-
par ??? 29 décembre 2010 11:40, par Targos
Oups désolé, en fait cela vient de moi... cela ne marche que sous chrome chez moi, mais je vais trouver ! pffff
Sinon pour +ieurs scrollbar dans la meme page, il faut parametrer le nom de tous les div créé en dynamique :p
-
-
@Targos :
- Il me semblait l’avoir testée sous IE 8, je regarderai ça rapidement. Peut tu me décrire ton résultat sur IE 8 ?
- Pour avoir plusieurs scrollBar sur la même page tu peux essayer de déclarer la methode scrollbar() sur plusieurs éléments... J’ai pas essayé encore...
@Popote :
Le message pas de scrollBar s’affiche suite au retour de la fonction controle_donnee() qui teste en premier lieu si taille_contenu > params.taille_englobe. Donc regarde dans l’appel de la méthode comment sont définis tes variables. Est ce que ca t’aide ?
-
Bonjour !
cool tuto mais j’ai un petit souci. Dans votre exemple, vous ne visez "qu’une’ div (ici #contenu). Comment je peux m’y prendre pour utiliser ce scroll dans une div qui est dans une div qui est dans une div ? Est-ce possible ?
chez moi, la div où j’aimerai l’utiliser est la suivante (par ex) :#global #breakingnews #newstat pour l’utiliser que dans la div #newstat.
Pour un ex. plus concret elle situe dans la page d’accueil sur mon site, à gauche (avec - évidemment-une scroll bar bien crado)
hey merci d’avance ;-)
Lamb
Voir en ligne : http://www.lambartillustration.com
-
désolé pour le up mais le scrool se trouve, évidemment, à droite ;-)
Voir en ligne : http://www.lambartillustration.com
-
@lambart :
pour afficher la scrollbar sur la div #newstat tu peux faire comme ça : $("#newstat").scrollbar() ;
Il y a l’option position avec ce plugin qui te permet de mettre la scrollbar à droite ou à gauche, à toi de choisir, en veillant à respecter (ou pas) quelques règles d’ergonomie..
a+
-
par ??? 4 janvier 2011 16:48, par lambart
merci de ta réactivité ! Mais c’est ce que j’avais fais en premier et cela ne fonctionnait pas, ça doit être un autre souci ! je te tiens au courant ;-)
a+
lamb.
-
-
Bonjour,
Super le plugin ! Merci Créamama :)
Est-ce que qq1 a essayer de mettre plusieurs scrollbar sur la même page ? j’ai essayer en déclarant plusieurs fois scrollbar() avec un id différent, mais sa n’a pas l’air de fonctionner... une idée ?
Merci.
Sabrina
-
sir i don’t speak french but, if i want to specify the height of the content then how should i do that ?
-
Based on this http://demo.creamama.fr/plugin-scro... , you have to specify the height of #contenu
-
Salut, est-il possible d’avoir le bouton/curseur plus large que la scrollbar ?
Merci -
Bonjour
Quand j’utilise ce plugin avec un autre contenant que #contenu, il ne marche pas -
merci pour ce petit plugin, j’ai juste rajouté un "return false ;" à la fin de la section "mousewheel" pour que la molette ne déclenche plus la scrollbar du navigateur (très utile si le #contenu est un petit bloc d’une grande page)
-
Pour ceux qui souhaitent afficher plusieurs scrollbars sur une même page , voici le code modifié :
/************ Plugin JQuery ************* */
/* Réalisé par Creamama - */
/* ************ juillet 2010 ************ */
/* ******** http://www.creamama.fr ****** *//********** NECESSITE ************/
/* ********************************
jquery-1.4.2.min.js
ui.core-1.7.2.js
ui.draggable-1.7.2.js
jquery.mousewheel.min.js
******************************** */(function($)
$.fn.scrollbar = function(params)
// Fusionner les paramètres par défaut et ceux de l’utilisateur
params = $.extend(
taille_englobe : ’auto’, //Taille de l’espace visible - / !\ Doit être un nombre ou ’auto’
taille_scrollbar : "auto", //Taille de la scrollbar - / !\ Doit être un nombre ou ’auto’
taille_bouton : 50, //Taille du bouton - / !\ Doit être un nombre
pas:75, //Pas du scroll molette - / !\ Doit être un nombre ou ’auto’
molette : true, //Détection du scroll molette - / !\ true ou false
drag : true, //Bouton de la scrollbar déplacable à la souris - / !\ true ou false
debug : true, //Afficher la console de debug - / !\ true ou false
style : ’basic’, //Choix des styles - / !\ Par défault, il n’y a que le style ’basic’
position :’droite’, //Position de la scrollBar - / !\ ’gauche’ ou ’droite’
alignement_scrollbar :’haut’, //Alignement de la scrollBar. Utilisé uniquement si elle à une taille inférieur à celle de taille_englobe
orientation : ’vertical’, //Orientation du contenu, ’vertical’ ou ’horizontal’
marge_scroll_contenu : 15, //Marge entre la scrollBar et le contenu - / !\ Doit être un nombre
largeur_scrollbar:5, //Largeur de la scrollbar
cible : ’englobe’ //div params.cible
, params) ;
return this.each(function()
var $$ = $(this) ;
var taille_englobe_init = params.taille_englobe ;
var taille_scrollbar_init = params.taille_scrollbar ;
//Fonction de calcul de position top maximum du contenu
function calcul_contenu_top_max()
return params.taille_englobe - taille_contenu ;
//Fonction de calcul de position top maximum du bouton
function calcul_bouton_top_max()
return params.taille_scrollbar - params.taille_bouton
//Fonction de calcul du déplacement du bouton
function deplacement_bouton(info_top_contenu)
//On calcul la nouvelle position du bouton
var depl_bouton = (info_top_contenu/calcul_contenu_top_max())*(calcul_bouton_top_max()) ;
//On vérifie que ca déborde pas en haut
if(depl_bouton < 0)depl_bouton = 0 ;
//On vérifie que ca déborde pas en bas
if(depl_bouton > calcul_bouton_top_max())depl_bouton = calcul_bouton_top_max() ;
$(’#bouton’).css(’top’:depl_bouton+"px") ;
function deplacement_contenu(info_top_bouton)
//On calcul la nouvelle position du contenu
var depl_contenu = (info_top_bouton/calcul_bouton_top_max())*(calcul_contenu_top_max()) ;
//On vérifie que ca déborde pas en haut
if (depl_contenu > 0)depl_contenu = 0
//On vérifie que ca déborde pas en bas
if (depl_contenu < calcul_contenu_top_max())depl_contenu = calcul_contenu_top_max()
$(’#’+params.cible).css(’top’:depl_contenu+"px") ;
function styler_scrollbar(position,orientation)
var type_marge_position ;
var marge_position ;
var marge_orientation ;
switch (position)
case ’droite’ :
$(’#’+params.cible).after(’’) ;
$(’#scrollbar’).css(’margin-left’:params.marge_scroll_contenu+’px’) ;
break ;
case ’gauche’ :
$(’#’+params.cible).before(’’) ;
$(’#scrollbar’).css(’margin-right’:params.marge_scroll_contenu+’px’) ;
break ;
switch (orientation)
case ’haut’ :
$(’#scrollbar’).css(’margin-top’ :’0px’) ;
break ;
case ’centre’ :
var marge = (params.taille_englobe -params.taille_scrollbar)/2 ;
$(’#scrollbar’).css(’margin-top’:marge+’px’) ;
break ;
case ’bas’ :
var marge = params.taille_englobe -params.taille_scrollbar ;
$(’#scrollbar’).css(’margin-top’:marge+’px’) ;
break ;
var padTop=0 ;
var padBot=0 ;
//Hauteur du contenu
var taille_contenu = $$.height()+40 ;
function calcul_hauteur_auto()
if(params.taille_englobe == "auto")
padTop = $(’#contenu’).css(’padding-top’) ;
padTop = padTop.substring(0,padTop.length-2) ;
padBot = $(’#contenu’).css(’padding-bottom’) ;
padBot = padBot.substring(0,padBot.length-2) ;
params.taille_englobe = $(window).height()-40-padBot-padTop ;
elsereturn false
calcul_hauteur_auto() ;
//La hauteur de l’espace visible est la hauteur de la fenetre du navigateur si taille_englobe="auto"
function controle_donnee()
calcul_hauteur_auto() ;
//La taille du contenu doit être supérieur à celle de l’espace visible (taille_englobe)
if(taille_contenu > params.taille_englobe)
//La hauteur de la scroll bar est égale à la hauteur de "englobe" si hauteur_srollbar="auto"
if(params.taille_scrollbar == "auto")params.taille_scrollbar = params.taille_englobe ;
//La taille de la scrollbar doit être inférieur ou égale à la taille de taille_englobe
if(params.taille_scrollbar > params.taille_englobe)
params.taille_scrollbar = params.taille_englobe ;
return true ;
elsereturn false ;
//Si la hauteur du contenu est supérieur à la hauteur de l’espace visible
if(controle_donnee())
//Au redimensionnement de la fenetre
//N’est concerné par cette fonction que les éléments en ’auto’
window.onresize = function()
if(taille_englobe_init == "auto")
params.taille_englobe = $(window).height()-40-padBot-padTop ;
$$.css(’height’:params.taille_englobe+’px’) ;
if(taille_scrollbar_init == "auto")
params.taille_scrollbar = params.taille_englobe ;
$(’#scrollbar’).css(’height’:params.taille_scrollbar+’px’) ;
deplacement_bouton($("#"+params.cible).css(’top’).substring(0,$("#"+params.cible).css(’top’).length-2)) ;
if(params.debug)affiche_position() ;
;
//calcul des largeurs
var temp = $$.width() ;
$$.css(’width’:params.marge_scroll_contenu+params.largeur_scrollbar+temp+’px’) ;
//On construit une div autour du contenu, mais à l’intérieur de la div
$$.wrapInner(’’) ;
$$.css(’height’:params.taille_englobe+’px’,’overflow’ :’hidden’,’position’ :’relative’) ;
$("#"+params.cible).css(’top’:0+’px’,’float’ :’left’,’position’ :’relative’,’width’:temp+’px’) ;
//On construit la scrollBar
styler_scrollbar(params.position,params.alignement_scrollbar) ;
$$.append(’’) ;
$(".clear").css(’clear’ :’both’) ;
switch (params.style)
case ’basic’ :
//Style de la scrollBar
$(’#scrollbar’).css(’width’:params.largeur_scrollbar+’px’,
’float’ :’left’,
’height’:params.taille_scrollbar+’px’,
’background’ :’#f8bba4’
) ;
//Style du bouton de la scrollBar
$("#bouton").css(’width’:params.largeur_scrollbar+’px’,
’height’:params.taille_bouton+’px’,
’background’ :’#e3000b’,
’top’:0+’px’,
’cursor’ :’pointer’
) ;
break ;
’) ;
//Si le drag du bouton est activé(true)
if(params.drag)
$("#bouton").draggable(
containment : ’parent’,
axis : ’y’,
start:function(),
drag : function(event, ui)
//ui.position.top est la valeur renvoyé par le plugin JQuery UI
deplacement_contenu(ui.position.top) ;
if(params.debug)affiche_position() ;
,
stop : function()
) ;
if(params.molette)
$$.mousewheel(function(event, delta)
//On récupère la position du contenu
var top_contenu = $(’#’+params.cible).css(’top’) ;
//On enlève le ’px’ et on le convertit en entier pour pouvoir le manipuler
top_contenu = parseInt( top_contenu.substring(0,(top_contenu.length-2)) ) ;
//On récupère la position du bouton
var top_bouton = $(’#bouton’).css(’top’) ;
//On enlève le ’px’ et on le convertit en entier pour pouvoir le manipuler
top_bouton = parseInt( top_bouton.substring(0,(top_bouton.length-2)) ) ;
//Si le delta est positif, c’est à dire que l’on "pousse" la molette
if (delta > 0)
top_contenu = top_contenu + params.pas ;
//On vérifie que l’on n’a pas atteint le haut du contenu
if(top_contenu > 0)top_contenu = 0
$(’#’+params.cible).css(’top’:top_contenu+"px") ;
//Si le delta est négatif, c’est à dire que l’on "ramène" la molette
else if (delta < 0)
top_contenu = top_contenu - params.pas ;
//On vérifie que l’on n’a pas atteint le bas du contenu
if(top_contenu < calcul_contenu_top_max())top_contenu = calcul_contenu_top_max()
$(’#’+params.cible).css(’top’:top_contenu+"px") ;
//calcul de déplacement du bouton
deplacement_bouton(top_contenu) ;
if(params.debug)affiche_position() ;
) ;
//Affiche la console de debug
if(params.debug)
$$.after(’
$(’#debug’).css(’position’ :’fixed’,’top’ :’200px’,’right’ :’50px’, ’border’ :’2px solid #EF9700’,’background’ :’#FFDC9F’,’padding’ :’0px’)
.append(’Hauteur du contenu :’+taille_contenu+’
’)
.append(’Hauteur de l\’espace visible :’+params.taille_englobe+’
’)
.append(’Hauteur du srcoll :’+params.taille_scrollbar+’
’)
.append(’Hauteur du bouton :’+params.taille_bouton+’
’)
.append(’Top du contenu :’+$$.css(’top’)+’
’)
.append(’Top du bouton :’+$(’#bouton’).css(’top’)+’
’)
.append(’Top max du bouton :’+calcul_contenu_top_max()+’
’)
.append(’Top max du contenu :’+calcul_bouton_top_max()+’
’)
.children().css(’margin’ :’0’,’padding’ :’5px’) ;
//Fonction de mise à jour des infos de la console de debug
function affiche_position()
$("#hauteurcontenu").html(’Hauteur du contenu :’+taille_contenu) ;
$("#hauteurenglobe").html(’Hauteur de l\’espace visible :’+params.taille_englobe) ;
$("#hauteurscrollbar").html(’Hauteur du srcoll :’+params.taille_scrollbar) ;
$("#hauteurbouton").html(’Hauteur du bouton :’+params.taille_bouton) ;
$("#topcontenu").html(’Top du contenu :’+$(’#’+params.cible).css(’top’)) ;
$("#topbouton").html(’Top du bouton :’+$(’#bouton’).css(’top’)) ;
$("#topmaxbouton").html(’Top max du bouton :’+calcul_contenu_top_max()) ;
$("#topmaxcontenu").html(’Top max du contenu :’+calcul_bouton_top_max()) ;
else
//alert(’Pas de scrollbar’) ;
) ;
)(jQuery) ;J’ai ajouté la paramètre cible, initialisé à ’englobe’ par défaut :
puis lors de l’appel sur la page : ajouter cible : ’nomdeladiv’ pour chaque appel dans votre page en mettant un nomdediv différent à chaque fois bien sûr :-).
Merci à toi Creamama pour ce travail.
-
J’ai essayé de corriger le script si dessus pour afficher la scrollbar dans plusieurs DIV,
je suis arrivé à quelques choses de plus coherents, mais il me reste quelques bugs, je pense sur la taille du contenu.../************ Plugin JQuery ************* */
/* Réalisé par Creamama - Matthieu Léorat */
/* ************ juillet 2010 ************ *//* ******** http://www.creamama.fr ****** */
/*Presque Corrigé par DiscoFab 16-02-2011*/
/********** NECESSITE ************/
/* ********************************
jquery-1.4.2.min.js
ui.core-1.7.2.js
ui.draggable-1.7.2.js
jquery.mousewheel.min.js
******************************** */(function($)
$.fn.scrollbar = function(params)
// Fusionner les paramètres par défaut et ceux de l’utilisateur
params = $.extend(
taille_englobe : ’auto’, //Taille de l’espace visible - / !\ Doit être un nombre ou ’auto’
taille_scrollbar : "auto", //Taille de la scrollbar - / !\ Doit être un nombre ou ’auto’
taille_bouton : 50, //Taille du bouton - / !\ Doit être un nombre
pas:55, //Pas du scroll molette - / !\ Doit être un nombre ou ’auto’
molette : true, //Détection du scroll molette - / !\ true ou false
drag : true, //Bouton de la scrollbar déplacable à la souris - / !\ true ou false
debug : true, //Afficher la console de debug - / !\ true ou false
style : ’basic’, //Choix des styles - / !\ Par défault, il n’y a que le style ’basic’
position :’droite’, //Position de la scrollBar - / !\ ’gauche’ ou ’droite’
alignement_scrollbar :’haut’, //Alignement de la scrollBar. Utilisé uniquement si elle à une taille inférieur à celle de taille_englobe
orientation : ’vertical’, //Orientation du contenu, ’vertical’ ou ’horizontal’
marge_scroll_contenu : 15, //Marge entre la scrollBar et le contenu - / !\ Doit être un nombre
largeur_scrollbar:14, //Largeur de la scrollbar
cible : ’englobe’ //div params.cible, params) ;
return this.each(function()
var $$ = $(this) ;
var taille_englobe_init = params.taille_englobe ;
var taille_scrollbar_init = params.taille_scrollbar ;//Fonction de calcul de position top maximum du contenu
function calcul_contenu_top_max()
return params.taille_englobe - taille_contenu ;
//Fonction de calcul de position top maximum du bouton
function calcul_bouton_top_max()
return params.taille_scrollbar - params.taille_bouton
//Fonction de calcul du déplacement du bouton
function deplacement_bouton(info_top_contenu)
//On calcul la nouvelle position du bouton
var depl_bouton = (info_top_contenu/calcul_contenu_top_max())*(calcul_bouton_top_max()) ;
//On vérifie que ca déborde pas en haut
if(depl_bouton < 0)depl_bouton = 0 ;
//On vérifie que ca déborde pas en bas
if(depl_bouton > calcul_bouton_top_max())depl_bouton = calcul_bouton_top_max() ;
$(’#bouton_’+params.cible).css(’top’:depl_bouton+"px") ;
function deplacement_contenu(info_top_bouton)
//On calcul la nouvelle position du contenu
var depl_contenu = (info_top_bouton/calcul_bouton_top_max())*(calcul_contenu_top_max()) ;
//On vérifie que ca déborde pas en haut
if (depl_contenu > 0)depl_contenu = 0
//On vérifie que ca déborde pas en bas
if (depl_contenu < calcul_contenu_top_max())depl_contenu = calcul_contenu_top_max()
$(’#’+params.cible).css(’top’:depl_contenu+"px") ;
function styler_scrollbar(position,orientation)
var type_marge_position ;
var marge_position ;
var marge_orientation ;
switch (position)
case ’droite’ :
$(’#’+params.cible).after(’’) ;
$(’#scrollbar_’+params.cible).css(’margin-left’:params.marge_scroll_contenu+’px’) ;
break ;
case ’gauche’ :
$(’#’+params.cible).before(’’) ;
$(’#scrollbar_’+params.cible).css(’margin-right’:params.marge_scroll_contenu+’px’) ;
break ;
switch (orientation)
case ’haut’ :
$(’#scrollbar_’+params.cible).css(’margin-top’ :’0px’) ;
break ;
case ’centre’ :
var marge = (params.taille_englobe -params.taille_scrollbar)/2 ;
$(’#scrollbar_’+params.cible).css(’margin-top’:marge+’px’) ;
break ;
case ’bas’ :
var marge = params.taille_englobe -params.taille_scrollbar ;
$(’#scrollbar_’+params.cible).css(’margin-top’:marge+’px’) ;
break ;
var padTop=0 ;
var padBot=0 ;
//Hauteur du contenu
var taille_contenu = $$.height()+40 ;function calcul_hauteur_auto()
if(params.taille_englobe == "auto")
padTop = $(’#contenu_’+params.cible).css(’padding-top’) ;
padTop = padTop.substring(0,padTop.length-2) ;padBot = $(’#contenu_’+params.cible).css(’padding-bottom’) ;
padBot = padBot.substring(0,padBot.length-2) ;params.taille_englobe = $(window).height()-40-padBot-padTop ;
elsereturn false
calcul_hauteur_auto() ;
//La hauteur de l’espace visible est la hauteur de la fenetre du navigateur si taille_englobe="auto"function controle_donnee()
calcul_hauteur_auto() ;
//La taille du contenu doit être supérieur à celle de l’espace visible (taille_englobe)
if(taille_contenu > params.taille_englobe)
//La hauteur de la scroll bar est égale à la hauteur de "englobe" si hauteur_srollbar="auto"
if(params.taille_scrollbar == "auto")params.taille_scrollbar = params.taille_englobe ;
//La taille de la scrollbar doit être inférieur ou égale à la taille de taille_englobe
if(params.taille_scrollbar > params.taille_englobe)
params.taille_scrollbar = params.taille_englobe ;
return true ;
elsereturn false ;
//Si la hauteur du contenu est supérieur à la hauteur de l’espace visible
if(controle_donnee())
//Au redimensionnement de la fenetre
//N’est concerné par cette fonction que les éléments en ’auto’
window.onresize = function()
if(taille_englobe_init == "auto")
params.taille_englobe = $(window).height()-40-padBot-padTop ;
$$.css(’height’:params.taille_englobe+’px’) ;
if(taille_scrollbar_init == "auto")
params.taille_scrollbar = params.taille_englobe ;
$(’#scrollbar_’+params.cible).css(’height’:params.taille_scrollbar+’px’) ;
deplacement_bouton($("#"+params.cible).css(’top’).substring(0,$("#"+params.cible).css(’top’).length-2)) ;
if(params.debug)affiche_position() ;
;//calcul des largeurs
’) ;
var temp = $$.width() ;
$$.css(’width’:params.marge_scroll_contenu+params.largeur_scrollbar+temp+’px’) ;
//On construit une div autour du contenu, mais à l’intérieur de la div
$$.wrapInner(’
$$.css(’height’:params.taille_englobe+’px’,’overflow’ :’hidden’,’position’ :’relative’) ;
$("#"+params.cible).css(’top’:0+’px’,’float’ :’left’,’position’ :’relative’,’width’:temp+’px’) ;//On construit la scrollBar
styler_scrollbar(params.position,params.alignement_scrollbar) ;$$.append(’
’) ;
$(".clear").css(’clear’ :’both’) ;switch (params.style)
case ’basic’ :
//Style de la scrollBar
$(’#scrollbar_’+params.cible).css(’width’:params.largeur_scrollbar+’px’,
’float’ :’left’,
’height’:params.taille_scrollbar+’px’,
’background’ :’url(IMG/scrollborder.png)’,’background-repeat’ :’no-repeat’,) ;
//Style du bouton de la scrollBar
$("#bouton_"+params.cible).css(’width’:params.largeur_scrollbar+’px’,
’height’:params.taille_bouton+’px’,
’background’ :’#FFF’,
’top’:0+’px’,
’cursor’ :’pointer’
) ;
break ;
//Si le drag du bouton est activé(true)
if(params.drag)
$("#bouton_"+params.cible).draggable(
containment : ’parent’,
axis : ’y’,
start:function(),
drag : function(event, ui)
//ui.position.top est la valeur renvoyé par le plugin JQuery UI
deplacement_contenu(ui.position.top) ;
if(params.debug)affiche_position() ;
,
stop : function()
) ;
if(params.molette)
$$.mousewheel(function(event, delta)
//On récupère la position du contenu
var top_contenu = $("#"+params.cible).css(’top’) ;//On enlève le ’px’ et on le convertit en entier pour pouvoir le manipuler
top_contenu = parseInt( top_contenu.substring(0,(top_contenu.length-2)) ) ;//On récupère la position du bouton
var top_bouton = $(’#bouton_’+params.cible).css(’top’) ;
//On enlève le ’px’ et on le convertit en entier pour pouvoir le manipuler
top_bouton = parseInt( top_bouton.substring(0,(top_bouton.length-2)) ) ;//Si le delta est positif, c’est à dire que l’on "pousse" la molette
if (delta > 0)
top_contenu = top_contenu + params.pas ;
//On vérifie que l’on n’a pas atteint le haut du contenu
if(top_contenu > 0)top_contenu = 0
$("#"+params.cible).css(’top’:top_contenu+"px") ;
//Si le delta est négatif, c’est à dire que l’on "ramène" la molette
else if (delta < 0)
top_contenu = top_contenu - params.pas ;
//On vérifie que l’on n’a pas atteint le bas du contenu
if(top_contenu < calcul_contenu_top_max())top_contenu = calcul_contenu_top_max()
$("#"+params.cible).css(’top’:top_contenu+"px") ;
//calcul de déplacement du bouton
deplacement_bouton(top_contenu) ;if(params.debug)affiche_position() ;
) ;
//Affiche la console de debug
’) ;
if(params.debug)
$$.after(’
$(’#debug’).css(’position’ :’fixed’,’top’ :’200px’,’right’ :’50px’, ’border’ :’2px solid #EF9700’,’background’ :’#FFDC9F’,’padding’ :’0px’)
.append(’Hauteur du contenu :’+taille_contenu+’
’)
.append(’Hauteur de l\’espace visible :’+params.taille_englobe+’
’)
.append(’Hauteur du srcoll :’+params.taille_scrollbar+’
’)
.append(’Hauteur du bouton :’+params.taille_bouton+’
’)
.append(’Top du contenu :’+$$.css(’top’)+’
’)
.append(’Top du bouton :’+$(’#bouton’).css(’top’)+’
’)
.append(’Top max du bouton :’+calcul_contenu_top_max()+’
’)
.append(’Top max du contenu :’+calcul_bouton_top_max()+’
’)
.children().css(’margin’ :’0’,’padding’ :’5px’) ;//Fonction de mise à jour des infos de la console de debug
function affiche_position()
$("#hauteurcontenu").html(’
Hauteur du contenu :’+taille_contenu) ;
$("#hauteurenglobe").html(’Hauteur de l\’espace visible :’+params.taille_englobe) ;
$("#hauteurscrollbar").html(’Hauteur du srcoll :’+params.taille_scrollbar) ;
$("#hauteurbouton").html(’Hauteur du bouton :’+params.taille_bouton) ;
$("#topcontenu").html(’Top du contenu :’+$(’#englobe’).css(’top’)) ;
$("#topbouton").html(’Top du bouton :’+$(’#bouton’).css(’top’)) ;
$("#topmaxbouton").html(’Top max du bouton :’+calcul_contenu_top_max()) ;
$("#topmaxcontenu").html(’Top max du contenu :’+calcul_bouton_top_max()) ;
else
//alert(’Pas de scrollbar’) ;
) ;
)(jQuery) ;
-
par ??? 21 février 2011 12:53, par Stefan Baur
Salue
Ca ne marche pas de copier le code desus. Tu peux metter un link pour download ?
-
par ??? 12 janvier 13:41, par doaa
Hi,
would u please post the required code to call the function for using multiple IDs in the same page.
i mean how this $("#contenu").scrollbar() ; will be changed in case of many IDsThanks
-
-
Salut tout le monde,
Merci de vos contributions, je regarderai votre boulot, et proposerai votre version sur la page du plugin quand j’aurais eu le temps de regarder un peu ce que vous avez fait. En tout cas, merci pour votre participation !
-
Bonjour, votre script est trop bien mais j’ai un petit souci, j’ai réussi a régler la hauteur de ma div en modifiant le auto a la taille que je veux de "taille_englobe" dans plugin.scrollbar.js mais je n’arrive pas a trouver ou choisir la largeur de ma div ?
Une autre question, y’a t’il moyen d’au lieu rentrer une valeur numérique, mettre un pourcentage de ma taille de div ?Merci de vos réponses par avance
-
Salut
Quelle est le plus nouveu code pour le scrollbar ? Le derniert comment, ou quoi ?
Merci
Stefan -
@Stepfan : Le code publié dans les commentaires ci-dessus est fournit par des internautes, je n’ai pas eu le temps de le regarder, ou de l’intégrer au au plugin. Tu peux l’utiliser si tu veux, on peut supposer qu’il fonctionne. :D
@aurel : Merci ! Pour ton problème de largeur, tu peux la définit directement dans ton css. Le plugin gére tout seul après.
-
@discoFab
En effet le code marche mieux comme ça, je ne sais pas pourquoi mais sur un premier test en ne renommant pas les div scroll et bouton j’avais bien deux scrolbars dépendantes et fonctionnelles ; et sur une autre page ça ne fonctionnait pas.
Je confirme donc qu’en renommant ces deux div ça fonctionne.Par contre en fonction du nom donné au paramètre cible ça génère des div avec des noms pas terribles, il faudrait trouver un moyen d’améliorer ça.
-
Salut,
Pas mal du tout.
Malheureusement le plugin ne semble pas fonctionner avec les scrollbare horizontal (même en mettant ’horizontal’ dans le code). J’ai le message : "pas de scrollabar".
Une mise à jour prévue pour ajouter ça ?
Merci
Sébastien -
@SDE : Salut, effectivement, la scrollbar horizontal n’est pas encore développée. J’avais cependant intégré cette option au plugin, pour facilité les évolutions. Donc affaire à suivre. Dès que j’aurais fait ces développements, je ferai un billet sur ce blog !
Créa
-
Merci pour la réponse, je vais donc surveiller ce blog de près ;)
+ -
Hi, thanks for the great plugin.
I have implemented this scrollbar for dynamically varying height container(container height varies accordingly with respect to header and footer heights ).
Onload of the page this scrollbar is fine but, on window resize the scrollbar disappears for the container and gives an alert(’Pas de scrollbar’).
Please help.
-
Salut,
alors tout d’abord super script merci Matthieu !
Mais petite question : est ce que quelqu’un connait une astuce pour le faire fonctionner sur iphone ???
PS : je sais que ca viens du overflow:hidden ligne 156 (mais bon si on l’enlève ca perd tout le sens du script ^^ saleté de mobile)
-
hello !! super barre mais sur mon site ç- joint - elle ne marche pas sur opera et fait disparaitre le contenu.... une idée du PB ?merci d’avance
Voir en ligne : http://www.ybgraphicdesign.fr
-
Salut,
Yves, je viens de tester sur opéra sous windows, ton contenu apparait. Par contre, le scroll de la molette ne fonctionne pas.
Dans ton , appelle les fichiers javascript dans cet ordre :jquery-1.4.2.min.j
ui.core-1.7.2.js
ui.draggable-1.7.2.js
jquery.mousewheel.min.js
plugin.scrollbar.jsA bientôt !
-
par ??? 20 avril 2011 11:33, par yves
merci beaucoup de ta réponse si rapide !! j’ai fait ça au début ça a rien changé, j’ai tout recommencé à zero, tripoté le tout et finalement ça marche !! un grand merci. yves
-
-
est ce que je peut faire
$(".post").scrollbar() ; ou .post est un class et non pas un id comme #contenu
au lieu de
$("#contenu").scrollbar() ;
-
I cannot see all the contents when I scroll down. Anything to fix this issue ?
-
-
any browser, it is the same everywhere.
-
Vraiment super ce script !! :D
J’ai utilisé les modifs faites par Lucien et DiscoFab, et j’ai aussi ajouté des petits trucs dont j’avais besoin pour que ça fonctionne.
Comme le copier-coller était impossible à faire avec les versions posées en commentaires, je me permets de vous fournir un lien ;)Voilà ! Encore merci pour ce script méga top ! =D
Voir en ligne : http://www.cindychiffoleau.fr/
-
par ??? 11 mai 2011 17:37, par erysfoly
J’ai fait une toute petite modif sur ce que j’avais ajouté, car cela ne fonctionnait pas sur IE. ;)
le lien : http://www.cindychiffoleau.fr/scrol...
Voir en ligne : http://www.cindychiffoleau.fr/
-
-
Merci pour ce plugin que je trouve terrible et que j’ai utilisé pour le site de la société pour laquelle je suis en stage.
Je voulais juste signaler que le drag ne fonctionne pas sous IE (j’ai IE9 comme version).
Y aurait-il une solution ?!
merci -
Bonjour,
Je réalise en ce moment un autre site que celui mentionné ci-dessus, un site pour lequel je dois placer deux scrollbars sur la même page. Un qui fait défiler du contenu, l’autre qui fait défiler des photos, dans deux div adjacents.
Si j’arrive sans problème à placer les deux scrollbars (au passage bravo pour votre plugin), en revanche je n’arrive pas à les faire "cohabiter". C’est l’un ou l’autre .
Comment faire pour résoudre mon problème ?
Merci à vous
RobertVoir en ligne : http://www.wikidive.com
-
par ??? 12 juin 2011 14:01, par erysfoly
J’ai modifié le plugin pour que cela fonctionne : http://www.cindychiffoleau.fr/scrol...
-
-
Salut, j’aime bien ton plugin malheureusement il ne marche pas chez moi :(
J’ai voulu l’utiliser dans un site wordpress et j’ai l’erreur suivante :sur IE :
SCRIPT5007 : Impossible d’obtenir la valeur de la propriété « substring » : objet null ou non défini
plugin.scrollbar.js, Ligne 105 Caractère 6sur firefox :
padTop is undefined
[Stopper sur une erreur] padTop = padTop.substring(0,padTop.length-2) ;Si quelqu’un a la solution merci
-
Bonjour ! Merci pour ce plugin qui correspond à 100% à ma recherche malheureusement tout comme "popote" lors du chargement de la page j’ai une alerte "pas de scrollbar" j’ai cherché encore et encore mais rien à faire je ne trouve aucune solution o.o
Avez vous une solution.. ?
merci d’avance !
Voir en ligne : http://romainh.net
-
Bonjour,
super plugin, est il possible de n’activer le scroll qu’au survol de la div, j’ai essayé plusieurs choses mais sans succès. -
Hello !
Can you tell me how to change the white background ? I need to change it to "transparent".
Thanks :D
-
Hello, your plugin is great, but I discovered a bug that only occurs if you use a container within a website, and refills with different content each time. This step solution :
(function($)
$.fn.scrollbar = function(params)
// Fusionner les paramètres par défaut et ceux de l’utilisateur
params = $.extend(
taille_englobe : ’200’, // Tamaño del espacio visible - / \ Debe ser un número o ’auto’
largeur_englobe : ’300’, Here, NEW PARAM WITH SIZE FIXED
taille_scrollbar : ’auto’, // Tamaño de la barra de desplazamiento - / \ Debe ser un número o ’auto’
taille_bouton : 40, // Tamaño de botón - / \ Debe ser un número’
pas:75, // No rueda de desplazamiento - / \ Debe ser un número o ’auto’
molette : true, // Detección de rueda de desplazamiento - / \ verdadero o falso
drag : true, // Botón de la barra de desplazamiento mueve con el ratón - \verdadero o falso
debug : false, // Mostrar la consola de debug - / \ verdadero o falso
style : ’basic’, // Elección de estilos - / \ Por defecto, no es el estilo "básico"
position :’droite’, // Posición de la barra de desplazamiento - / \ ’izquierda’ o ’right’
alignement_scrollbar :’haut’, // Alineación de la barra de desplazamiento. Sólo se utiliza si un tamaño más pequeño que el de taille_englobe
orientation : ’vertical’, // Orientación de los contenidos, "vertical" o "horizontal"
marge_scroll_contenu:0, // Margen entre la barra de desplazamiento y el contenido - / \ Debe ser un número
largeur_scrollbar:5 // Ancho de la barra de desplazamiento
, params) ;
//calcul des largeurs
This party had a variable, so if recharged several times the same container, increased in size
var temp = params.largeur_englobe ;
( this part with a param fixed now, before had "var temp = $$.width() ;"$$.css(’width’:params.marge_scroll_contenu+params.largeur_scrollbar+temp+’px’) ;
’) ;
//$$.css(’width’:params.largeur_englobe + $$.width()+’px’) ;
//On construit une div autour du contenu, mais à l’intérieur de la div
$$.wrapInner(’
$$.css(’height’:params.taille_englobe+’px’,’overflow’ :’hidden’,’position’ :’relative’) ;
$("#englobe").css(’top’:0+’px’,’float’ :’left’,’position’ :’relative’,’width’:temp+’px’) ;
temp = 0 ;
//On construit la scrollBar
styler_scrollbar(params.position,params.alignement_scrollbar) ;
$$.append(’’) ;
$(".clear").css(’clear’ :’both’) ;I hope I have been helpful, and thanks for your apport
-
Bonjour,
Tout d’abord, un grand bravo pour ce plugin.
Cependant, un fâcheux bug survient si je souhaite l’utiliser avec jquery.expander.js.
En effet, la scrollbar n’apparait pas lorsque je déplie une div pour lire la suite d’un article...Sa présence n’est peut-être détectée qu’au chargement de la page !?Merci d’avance pour vos réponses.
Voir en ligne : http://www.upyourcom.fr
-
Hi, Creamama !
About params...
The "orientation" can be "vertical" or "horizontal", right ? (So you wrote in comment line)
Then what is doing the below code from your plugin ? ()
switch (orientation)
case ’haut’ :
$(’#scrollbar’).css(’margin-top’ :’0px’) ;
break ;
case ’centre’ :
var marge = (params.taille_englobe -params.taille_scrollbar)/2 ;
$(’#scrollbar’).css(’margin-top’:marge+’px’) ;
break ;
case ’bas’ :
var marge = params.taille_englobe -params.taille_scrollbar ;
$(’#scrollbar’).css(’margin-top’:marge+’px’) ;
break ; -
Bonjour,
je peux moi aussi te remercier pour ce super plug-in qui correspond exactement à ce que j’ai promis à mon client !
Pour une utilisation classique je n’ai pas de souci (contenu texte+images),
par contre, j’aimerais absolument pouvoir insérer dans ma div des liens vers des LightWindow.Je peux faire fonctionner ta scrollbar ou Lightwindow séparément,
mais utilisés ensemble, celui que j’appelle en premier dans ma ne fonctionne plus.As-tu une astuce pour régler ce bug ?
Quelqu’un a-t-il déjà eu ce souci ? -
@m4thi4s,
Salut,
Peut être qu’au moment tu appelles le script de la scrollbar, la div de la lightbox n’existe pas dans le DOM ?-
par ??? 5 septembre 2011 22:57, par m4thi4s
Salut,
merci beaucoup pour ta réponse !
Toutefois, je ne suis pas sûr de comprendre ton conseil...
Je ne vois pas ce qu’est un DOM :(J’ai une div placée dans une page et mise en forme par une feuille css.
Dans la head j’appelle prototype.js, scriptaculous.js et lightwindow.js,
ensuite, comme tu l’indiques, j’appelle jquery-1.4.2.min.js, ui.core-1.7.2.js, ui.draggable-1.7.2.js, jquery.mousewheel.min.js et plugin.scrollbar2.js
et ensuite :
$(document).ready(function()
$("#ma-div-a-scroller").scrollbar() ; ) ;Mais la Lightwindow et la Scrollbar fonctionnent seuls mais pas ensemble !
Saurais-tu résoudre ce souci ?
Ton aide serait tellement bienvenue,
je m’arrache les cheveux depuis un petit moment !
-
-
Bonjour,
Je desespere...
Je crée en ce moment un tchat en php/ajax (jquery coté client).
J’ai implementé jquery 1.6, jquery-ui-1.8.16, mousewheel 3.0.0(pour la compatibilité avec les anciennes versions) et la version de scrollbar pour manipuler les scrollbar sur plusieurs div independament d’une certaine ’#contenu’ comme il y avait à l’origine.
Apres avoir remplacé le script original par le dernier proposé, je peux en effet PRESQUE mettre la scrollbar sur un div de mon choix.( Pas encore testé sur plusieurs...)
Mais, le div en question ne respecte plus sa hauteur définie(500px).De plus, la scrollbar s’affiche lors du chargement de la page, à gauche malgré le fait que la position par defaut soit à droite, mais s’efface aussitot, quand bien meme le texte contenu dans la div depasserait de celle ci.
J’ai essayé de forcer la hauteur(via arguments de l’appel), rien n’y fait.Je debute en jquery et je dois dire que tout cela est un peu flou pour moi, je suis un peu depassé, d’autant que je comptais m’en servir à plusieurs endroits de la page, je desespere deja au premier essai.
Toutefois, je trouve cette initiative excellente et je ne desespere pas de trouver une solution ici, voire des explications plus claire, je suis un peu lent ;)
-
Bonjour, je débute et trouve ton script vraiment super. Je l’installe tel quel en local et c’est une vraie merveille. Seulement quand j’intègre le tout à mon site la scrollbar n’apparait pas. Je peux scroller ma div à la molette mais je n’ai pas de scroll apparente et des fois le texte dépasse de mes autres div. Une idée ? J’ai p’tet raté un truc...Merci de votre aide.
-
Bonjour,
Super plugin ! Toutefois une petite question. Comment puis-je le faire fonctionner sur mobile ? Je l’ai testé sur iPad et smartphone sous Android mais ça ne fonctionne pas.
Avez-vous une idée si votre plugin est adaptable pour mobile ou si je dois m’orienter vers jquery mobile ?
Merci beaucoup !
-
Bonjour !
ce plugin correspond tout a fait a un besoin sur la crea d’un site, mais malheureusement je ne parviens pas a 2 choses :- il ne marche pas sous ie9, il semble que les div englobe et scrollbar ne sont pas générées ... :/
- lorsque je n’ai pas de scroll (le contenu de ma div change), un pop up du navigateur apparait avec "pas de scroll"
comment désactiver ce pop up et d’autre part, avez-vous ce meme pb sous ie9 ?!
merci de votre aide et bravo encore pour ce plugin !!!!
-
Buenas tardes, felicitaciones por este gran plugin.
Tengo un pequeño problema con él, lo he integrado en una web y cuando he ido a probarlo con IE9 no funciona. ¿Es un bug conocido ?
¿Existe alguna solución ?
-
Solution pour ie9...prendre les dernières librairies jquery ui.draggable 1.8
Voir en ligne : http://www.ninapresotto.com
-
par ??? 10 novembre 2011 02:55, par Agustín
Gracias nina, he actualizado la librería y ahora va todo perfecto en IE9.
Muchas gracias por tu respuesta.
-
-
Bonjour, quelqu’un saurait me dire comment faire fonctionner ce plugin sous spip ? J’essais désespérément d’afficher le scroll sans résultat. Les javascript apparaissent bien dans le code source mais le div englobe ne s’active pas.
Une idée pour l’installer sur SPIP ?
Merci
-
Bonjour,
Merci pour ce plugin fort sympathique.
J’ai découvert un petit bug.
J’appel ce plugin dans un iframe, le scroll ce fait donc sur le "body" de l’iframe
Quand je scroll en drag vers le bas, je peu scroll en illimité dans le vide et cela decalle tout le contenu, je ne peux ensuite plus remonté.
Uun internaute qui va drag rapidement vers le bas sans faire attention va sortir du texte.
Je ne sais pas si je suis très clair sur mon probleme. Mais je ne peux pas faire de lien vers le site, actuellement je le développe en local.
En gros y’a pas d’arrêt du défilement quand on le fait en drag, je peu descendre tant que je veux du moment que je relache pas le clic de la souris.
Une solution ? -
Merci pour ce script bien utile.
J’ai cependant trouvé un bug dans le calcul de "taille_contenu". En effet, le contenu de ma div était un tableau intégrant des textes et images et après différents tests, je me suis aperçu que le calcul ne prenait pas en compte la hauteur des images. Pour le moment, j’ai réussi à contourner le problème en suivant cette règle : hauteur_balise_td = hauteur_image.
Avez-vous eu ce type de problème avec des images ?
Je regarde si je peux contourner globalement ce problème en CSS.Voir en ligne : http://www.kinaia.fr
-
Bonjour. J’aime votre plugin - il est simple à utiliser et à personnaliser. Cependant, le « drag » fonction ne fonctionne pas sur Internet Explorer 9. Pouvez-vous m’aider à résoudre cela ?
Merci.PS : pardonne-moi pour mon français ... (c’est Goolge Translate)
-
par ??? 1er décembre 2011 17:06, par Eduardo
J’ai trouvé une solution ici : http://forum.jquery.com/topic/jquer...
Il a résolu pour moi !
Ajouter à la fin du fichier ui-core :(function ($)
var a = $ ui.mouse._mouseMove. ;
$. ui.mouse._mouseMove = function (b)
if ($. browser.msie & & document.documentMode> = 9)
b.button = 1
;
a.apply (cela, [b]) ;
(JQuery)) ;
-
-
Hi,
I’ve got an html file. From this file I call 2 iframes. I’ve managed to have the scrollbar for the
first one but it doesn’t work with the second. I wonder if you could let me know if there is a
way to have 2 scrollbars within the same file and if so how this can be done.Thanks
-
Bonjour,
J’ai un problème quand j’utilise ce script avec un contenu php dynamique la hauteur du englobe même en auto ne laisse pas apparaître toute la hauteur du contenu.
Avez vous une solution ?Merci
Voir en ligne : http://ncls.biz
Juil
A Propos
Je suis un concepteur et développeur web à Grenoble. Je développe essentiellement avec le CMS Spip. Actuellement en contrat chez Territorial, je continue ma veille technologique, et vous fais partager ce que je trouve utile et pratique.
