Tweet
Bonjour,
Avez-vous un moyen qui me permette de remplacer la barre de défilement afin de l'intégrer au mieux dans mon thème?
Avez-vous un moyen qui me permette de remplacer la barre de défilement afin de l'intégrer au mieux dans mon thème?
-
-
Re : Changer la barre de défilement ( overflow: auto; )
Salut,
La principale, celle du navigateur, n'y pense même pas : c'est possible mais ça sera du hack, avec tous les désagréments qui vont avec.
Pour une boîte sur ton site c'est envisageable, en javascript. J'aime bien JscrollPan mais c'est en jquery. Si tu utilises mootools sur ton site (ce qui est souvent le cas) tu peux essayer Mooscroll (qui permet d'ailleurs de styler la barre principale) mais ça ne prend pas en compte la molette de la souris. Il y en a sûrement d'autres.
a+ -
Re : Changer la barre de défilement ( overflow: auto; )
Merci!
Quitte à le faire autant que ce soit correct.
Je regarde la méthode Jscroll mais je ne comprends pas tout...
It is very simple to use jScrollPane.
1. You will need to download the necessary files and place them on your server.
Ok, on installe les fichiers sur le serveur... dans le dossier du template, ou n'importe où?
2. Then you just need to include the relevant files in the <head> of your document:
Ok, par contre. je dois l'inclure dans le css?
Then you just need to initialise jScrollPane on document.ready (using a selector which will find the content you want to apply jScrollPane to):Code PHP:<!-- styles needed by jScrollPane -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
Alors là.... traduction:
"Ensuite vous avez juste besoin d'initialiser le JScrollPane document.ready (en utilisant un sélecteur qui se trouve le contenu que vous souhaitez appliquer au JScrollPane):"
Pour le moment je n'en suis pas là...Code PHP:$(function()
{
$('.scroll-pane').jScrollPane();
});
Commentaire
-
Re : Changer la barre de défilement ( overflow: auto; )
Salut,
comme pour toute intégration de script, tu peux le mettre où tu veux pourvu que le chemin soit donné dans le <head>.
Histoire de bien faire, mets les dans /templates/tontemplate/js
Puis dans le <head> de ton index.php tu rajoutes les scripts :
Et pour finir tu déclenches l'appel du script sur les éléments qui t'intéressent (à placer dans la partie <body> de index.php) :<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/nomduscript1.js" ></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/nomduscript2.js" ></script>
etc...
Enfin pour activer le support de la molette de la souris il te faudra inclure le plugin jquery-mousewheel dans ton <head>.<script type="text/javascript">
$(function()
{
$('#ledivenquestion').jScrollPane();
});
</script>
A+Commentaire
-
Re : Changer la barre de défilement ( overflow: auto; )
On parle bien de l'index.php du thème?
Sinon j'ai préféré créer un dossier script/js/ pour uploader les fichier.
Si c'est bien l'index.php, pour lemoment je ne vois pas de changement... ai-je fait une erreur?
edit: je dois créer un autre fichier css dédié ou bien il faut l'integrer dans celui du theme?
MerciDernière édition par fr4nck à 20/07/2011, 16h20Commentaire
-
Re : Changer la barre de défilement ( overflow: auto; )
J'ai tenté de nouveaux l'intégaration de jscrollpane, et cela donne:
etdans mon <head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/jquery.jscrollpane.js" ></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/jquery.jscrollpane.min.js" ></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/jquery.mousewheel.js" ></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/mwheelIntent.js" ></script>
Par contre j'ai retiré le # à gauche de center, car cela supprimait le fond de mon div...dans mon <body>
<script type="text/javascript">
$(function()
{
$('center').jScrollPane();
});
</script>
Est ce que ce serait par ce qu'il manque un css qui décrirait l'usage de jscrollpane?? Et du coup sans le # le script ne serait plus pris en compte?
Il manquerait donc:
mais.... comment je le traduis pour que la ligne soit interpretable par joomla?<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
comme ça?
<script type="text/css" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/jquery.jscrollpane.css" ></script>
edit: j'ai rétabli le # et cela ne fonctionne pas..., le fond de la div disparait. et sans, cela ne change rien, la scrollbar reste la même.Dernière édition par fr4nck à 08/08/2011, 22h46Commentaire
-
Re : Changer la barre de défilement ( overflow: auto; )
Il faudrait un lien vers ton site.
Tu peux déjà virer jquery.jscrollpane.js car c'est la même chose que jquery.jscrollpane.min.js
Ensuite effectivement il vaut mieux ne pas supprimer des caractères au hasard dans les appels...
Tu peux partir du principe que si ca produit un effet sur ton site, comme supprimer un div, tu es sur la bonne voie.
Pour rappel tu mets #center si ton div a une id="center", et .center si class="center"
Pour finir si mootools est appelé dans ton template il se peut que tu aies une incompatibilité entre les deux, il faut passer jquery en mode noconflict (recherche google).Commentaire
-
Re : Changer la barre de défilement ( overflow: auto; )
Voilà, c'est en ligne, il me manque seulement d'ajouter la modification pour la barre de défilement (et le css du menu modifié)
Et effectivement il y a bien mootools d'activé sur la page...
Je viens de m'appercevoir qu' "overflow: auto;" ne fonctionne pas avec l'ipad... cela fontionnera avec jquery après?Dernière édition par fr4nck à 09/08/2011, 15h31Commentaire
-
Re : Changer la barre de défilement ( overflow: auto; )
Bonjour,
Je relance le topic, car je me retrouve devant à peu prés le même problème.
Dans le <header> de ma page index.php de mon template, j'ai inclue les 4 scripts de jscrollpane ainsi que la fonction mais lors du lancement de ma page, le scrollbar n'est pas modifié et firebug m'informe de 4 erreurs "jQuery is not defined" et que "$('.col1').jScrollPane" n'est pas une fonction.
Que puis je faire ?Commentaire
-
Re : Changer la barre de défilement ( overflow: auto; )
salut à tous je suis entrain de developper un site mais j'ai eu un soucis avec le scrollbar qui ne marche pas avec un module joomla: voici le lien :http://ks201055.kimsufi.com/~testsit...emid=4&lang=fr dans evenement je veut mettre un scrollpane personnalisé dans evementCommentaire
Commentaire