Changer la barre de défilement ( overflow: auto; )

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Changer la barre de défilement ( overflow: auto; )

    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?
    Dernière édition par cavo789 à 20/07/2011, 15h45 Raison: Déplacement du post dans la section J1.6

  • #2
    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+

    Commentaire


    • #3
      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?

      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> 
      Then you just need to initialise jScrollPane on document.ready (using a selector which will find the content you want to apply jScrollPane to):
      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):"

      Code PHP:
      $(function()
      {
          $(
      '.scroll-pane').jScrollPane();
      }); 
      Pour le moment je n'en suis pas là...

      Commentaire


      • #4
        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 :

        <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...
        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">
        $(function()
        {
        $('#ledivenquestion').jScrollPane();
        });
        </script>
        Enfin pour activer le support de la molette de la souris il te faudra inclure le plugin jquery-mousewheel dans ton <head>.

        A+

        Commentaire


        • #5
          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?

          Merci
          Dernière édition par fr4nck à 20/07/2011, 16h20

          Commentaire


          • #6
            Re : Changer la barre de défilement ( overflow: auto; )

            J'ai tenté de nouveaux l'intégaration de jscrollpane, et cela donne:

            dans 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>
            et

            dans mon <body>

            <script type="text/javascript">
            $(function()
            {
            $('center').jScrollPane();
            });
            </script>
            Par contre j'ai retiré le # à gauche de center, car cela supprimait le fond de mon div...
            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:
            <link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
            mais.... comment je le traduis pour que la ligne soit interpretable par joomla?

            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, 22h46

            Commentaire


            • #7
              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


              • #8
                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, 15h31

                Commentaire


                • #9
                  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


                  • #10
                    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 evement

                    Commentaire

                    Annonce

                    Réduire
                    Aucune annonce pour le moment.

                    Partenaire de l'association

                    Réduire

                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X