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...
                http://lesouffle9.info/joomlatest/

                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
                    1 sur 2 < >

                    C'est [Réglé] et on n'en parle plus ?

                    A quoi ça sert ?
                    La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                    Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                    Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                    Comment ajouter la mention [Réglé] à votre discussion ?
                    1 - Aller sur votre discussion et éditer votre premier message :


                    2 - Cliquer sur la liste déroulante Préfixe.

                    3 - Choisir le préfixe [Réglé].


                    4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                    2 sur 2 < >

                    Assistance au forum - Outil de publication d'infos de votre site

                    Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                    Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                    Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                    UTILISER À VOS PROPRES RISQUES :
                    L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                    Problèmes connus :
                    FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                    Installation :

                    1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                    Archive zip : https://github.com/AFUJ/FPA/zipball/master

                    2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                    3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                    4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                    5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                    6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                    et remplacer www. votresite .com par votre nom de domaine


                    Exemples:
                    Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                    Télécharger le script fpa-fr.php dans: /public_html/
                    Pour executer le script: http://www..com/fpa-fr.php

                    Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                    Télécharger le script fpa-fr.php dans: /public_html/cms/
                    Pour executer le script: http://www..com/cms/fpa-fr.php

                    En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                    Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                    Voir plus
                    Voir moins
                    Travaille ...
                    X